javascript – Dropbox直接从浏览器上传文件

我试图将文件直接上传到dropBox [来自浏览器/网络应用程序],代码API上的“uploadFile”函数需要在服务器上上传文件,这给我带来了麻烦,因为我不想要任何要上传到我的服务器并从那里到dropBox的文件.

$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很失望地说没有明确的文档,文档部分的许多链接都被打破了.

我需要将文件上传到我的帐户,客户端无需登录到DropBox.

任何指针都会非常感激.寻找Ajax / JavaScript方法.

更新

我尝试了以下内容,但没有来自DropBox的回复

HTML


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/找到它(完全披露,我写了博客文章.)
以下是如何上传文件.

/**
 * 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进行身份验证并获取自己的令牌.
在Form.io,我们已经在我们的平台上实现了身份验证和上传/下载.这使得使用dropBox作为文件后端构建Web应用程序非常容易.

javascript – Dropbox直接从浏览器上传文件

猜你在找的jQuery相关文章