Javascript Dropbox直接从浏览器上载文件

我正在尝试[从浏览器/web应用程序]将文件直接上载到dropbox，code API上的“uploadFile”功能需要将文件上载到服务器上，这给我带来了麻烦，因为我不希望将任何文件上载到我的服务器并从那里上载到dropbox

$f = fopen("test.jpg", "rb"); // requires file on server
$result = $dbxClient->uploadFile("test.jpg", dbx\WriteMode::add(), $f);
fclose($f);

试过这个失望地说，没有清晰的文档，文档部分的很多链接都断了

---

我需要的文件上传到我的帐户和客户端不需要登录到dropbox

$f = fopen("test.jpg", "rb"); // requires file on server
$result = $dbxClient->uploadFile("test.jpg", dbx\WriteMode::add(), $f);
fclose($f);

任何指点都将不胜感激。正在寻找Ajax/JavaScript方法

更新

我尝试了以下方法，但Dropbox没有响应

HTML

“我需要将文件上载到我的帐户，客户端不需要登录dropbox。”

然后你真的需要上传服务器端。要做到这一点，客户端将意味着向浏览器发送访问令牌，此时应用程序的任何用户都可以使用该访问令牌对您的帐户执行任何他们想要的操作。（例如，删除所有其他文件，上载其私人DVD收藏等）

---

出于安全原因，我强烈建议您在服务器端上传访问令牌，这样您就可以对访问令牌保密。

多亏@smarx的指点，我才能够找到最终的解决方案

此外，我还添加了一些额外的功能，如收听上传进度，以便用户可以显示上传进度百分比

HTML

<input type="file" name="file" id="file" onchange="doUpload(event)">

你已经使用了PUT方法，因为我们的唯一目标是上传文件，根据我对各种资源的研究（并且）PUT方法可以流式传输大文件，并且其目的是将文件放在指定的URI上，如果文件存在，则必须替换文件。PUT方法不能移动到指定URL以外的其他URL

风险

---

在客户端使用访问令牌存在风险，需要采取高安全措施来屏蔽令牌。但是，浏览器控制台、Firebug等现代Web开发工具可以监视您的服务器请求，并可以查看您的访问令牌。

Dropbox刚刚发布了一篇博客，介绍了如何执行此操作。你可以在（完全公开，我写了这篇博文。）

下面是如何上传文件

/**
 * Two variables should already be set.
 * dropboxToken = OAuth token received then signing in with OAuth.
 * file = file object selected in the file widget.
 */

var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function(evt) {
    var percentComplete = parseInt(100.0 * evt.loaded / evt.total);
    // Upload in progress. Do something here with the percent complete.
};

xhr.onload = function() {
    if (xhr.status === 200) {
        var fileInfo = JSON.parse(xhr.response);
        // Upload succeeded. Do something here with the file info.
    }
    else {
        var errorMessage = xhr.response || 'Unable to upload file';
        // Upload failed. Do something here with the error.
    }
};

xhr.open('POST', 'https://content.dropboxapi.com/2/files/upload');
xhr.setRequestHeader('Authorization', 'Bearer ' + dropboxToken);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
    path: '/' +  file.name,
    mode: 'add',
    autorename: true,
    mute: false
}));

xhr.send(file);

然后从dropbox下载一个文件

var downloadFile = function(evt, file) {
  evt.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = new Blob([xhr.response], {type: ’application/octet-stream’});
      FileSaver.saveAs(blob, file.name, true);
    }
    else {
      var errorMessage = xhr.response || 'Unable to download file';
      // Upload failed. Do something here with the error.
    }
  };

  xhr.open('POST', 'https://content.dropboxapi.com/2/files/download');
  xhr.setRequestHeader('Authorization', 'Bearer ' + dropboxToken);
  xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
    path: file.path_lower
  }));
  xhr.send();
}

FileSaver和Blob在较旧的浏览器上不起作用，因此您可以为它们添加一个变通方法

正如其他答案所指出的，上传或下载文件的每个会话都需要访问dropbox令牌。向用户发送其他人的令牌是一个安全问题，因为拥有令牌将使他们完全控制dropbox帐户。实现这一点的唯一方法是让每个人都使用Dropbox进行身份验证，并获得他们自己的令牌

目前，我们已经在我们的平台上实现了身份验证和上传/下载。这使得使用dropbox作为文件后端构建web应用程序变得非常容易。

upload.html 上传

upload.js

---

目前给出的答案没有使用Dropbox javascript SDK，我认为这可能是最好的解决方法。请在此处查看此链接：

它提供了一个示例，ofc依赖于下载了SDK。（编辑：在玩SDK后，我意识到它创建了一个类似于此线程中接受答案的POST请求。但是，流行答案忽略了SDK在实际POST之前进行的选项飞行前调用）

我还可以补充一点，dropbox sdk示例中没有显示的内容是，您可以将blob对象上载到dropbox；例如，如果您希望从画布中动态提取图像并上载它们，而不希望上载通过文件上载输入从文件系统中选择的内容，则这非常有用

下面是我正在描述的场景的一个简单示例：

//code below after having included dropbox-sdk-js in your project.  
//Dropbox is in scope!
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
//numerous stack overflow examples on creating a blob from data uri
var blob = dataURIToBlob(canvas.toDataUrl());
//the path here is the path of the file as it will exist on dropbox.
//should be unique or you will get a 4xx error
dbx.filesUpload({path: `unq_filename.png`, contents: blob})

---

不久前，我遇到了Dropbox API文档的问题。用户@smarx为Dropbox工作，他很想听听用户对文档的看法。这段代码看起来很合理。当你说“Dropbox没有响应”时，你真的是说HTTP请求没有响应吗？（您可以在浏览器的“网络”选项卡中查看。）API更有可能返回错误。可能会跳出两个问题：

contentLength

是一个虚假的标题名（尽管我怀疑这会破坏任何东西），并且

file.size

可能不起作用，除非变量

file

在某个地方定义。虽然确实要保密访问令牌，但也不建议先将较大的文件上载到服务器[>100 mb]，然后再从那里上载到dropbox。任何直接上传文件的方法我的dropbox帐户都会很好。经过今晚的研究，S3似乎为上传提供了逐项签名，这比分发令牌要安全得多。这将是一个很好的答案，但您需要包括dropbox对象来自SDK这一事实。另外，这基本上只是一个文档示例的剪切和粘贴

var downloadFile = function(evt, file) {
  evt.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = new Blob([xhr.response], {type: ’application/octet-stream’});
      FileSaver.saveAs(blob, file.name, true);
    }
    else {
      var errorMessage = xhr.response || 'Unable to download file';
      // Upload failed. Do something here with the error.
    }
  };

  xhr.open('POST', 'https://content.dropboxapi.com/2/files/download');
  xhr.setRequestHeader('Authorization', 'Bearer ' + dropboxToken);
  xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
    path: file.path_lower
  }));
  xhr.send();
}

$('#form_wizard_1 .button-submit').click(function () {
      var ACCESS_TOKEN ="Your token get from dropbox";
      var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
      var fileInput = document.getElementById('files1');
      var file = fileInput.files[0];
      res=dbx.filesUpload({path: '/' + file.name, contents: file})
      .then(function(response) {
      var results = document.getElementById('results');
      results.appendChild(document.createTextNode('File uploaded!'));
      res=response;
      console.log(response);
    })
    .catch(function(error) {
       console.error(error);
    });
}

//code below after having included dropbox-sdk-js in your project.  
//Dropbox is in scope!
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
//numerous stack overflow examples on creating a blob from data uri
var blob = dataURIToBlob(canvas.toDataUrl());
//the path here is the path of the file as it will exist on dropbox.
//should be unique or you will get a 4xx error
dbx.filesUpload({path: `unq_filename.png`, contents: blob})