Dropbox直接从浏览器上传文件

我正在尝试将文件直接上传到 dropbox [从浏览器/网络应用程序]，代码 API 上的“uploadFile”函数需要上传服务器上可用的文件，这给我带来了麻烦，因为我不想要任何文件要上传到我的服务器并从那里上传到保管箱。

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

尝试过这个https://github.com/dropbox/dropbox-js https://github.com/dropbox/dropbox-js遗憾的是，没有明确的文档，文档部分的许多链接都已损坏。

我需要将文件上传到我的帐户，并且客户无需登录 Dropbox。

任何指点将非常感激。寻找 Ajax / JavaScript 方法。

Update

我已尝试以下操作，但 Dropbox 没有回复

HTML

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

JavaScript

var doUpload = function(event){

var input = event.target;
var reader = new FileReader();


  reader.onload = function(){
    var arrayBuffer = reader.result;

   $.ajax({  
    url: "https://api-content.dropbox.com/1/files_put/auto/uploads/" + input.files[0].name,  
    headers: {  
        Authorization: 'Bearer ' + MyAccessToken,  
        contentLength: file.size  
    },  
    crossDomain: true,  
    crossOrigin: true,  
    type: 'PUT',  
    contentType: input.files[0].type,  
    data: arrayBuffer,  
    dataType: 'json',  
    processData: false,
    success : function(result) {
        $('#uploadResults').html(result);
    }
    });
  }
 reader.readAsArrayBuffer(input.files[0]);
}

Dropbox 刚刚发布了一篇博客，其中包含有关如何执行此操作的说明。您可以在以下位置找到它：https://blogs.dropbox.com/developers/2016/03/how-formio-uses-dropbox-as-a-file-backend-for-javascript-apps/ https://blogs.dropbox.com/developers/2016/03/how-formio-uses-dropbox-as-a-file-backend-for-javascript-apps/（完全公开，我写了这篇博文。）

以下是上传文件的方法。

/**
 * 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 进行身份验证并获取自己的令牌。

At Form.io https://form.io我们已经在我们的平台中实现了身份验证和上传/下载。这使得使用 Dropbox 作为文件后端构建 Web 应用程序变得非常容易。