Dropbox从浏览器直接上传文件 [英] Dropbox direct upload files from browser

问题描述

我正在尝试将文件直接从[浏览器/Web应用程序]上传到Dropbox，代码API上的"uploadFile"功能需要在服务器上上传文件，这给我带来了麻烦，因为我确实不想将任何文件上传到我的服务器，然后再从那里上传到保管箱.

I am trying to upload files directly to dropbox [from a browser / web application], The "uploadFile" function on the code API needs the file to be uploaded available on the server, this puts me in trouble, because I do not want any files to be uploaded to my server and from there to 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 说没有清晰的文档，文档部分的许多链接都坏了.

Tried out this https://github.com/dropbox/dropbox-js disappointed to say that there is no clear documentation, many of the links on the documentation part is broken.

我需要将文件上传到我的帐户，客户无需登录到保管箱.

I need the files to be uploaded to my account and the clients need not login to dropbox.

任何指针将不胜感激.寻找Ajax/JavaScript方法.

Any pointers would be really appreciated. looking for Ajax / JavaScript methods.

更新

我尝试了以下操作，但Dropbox没有响应

I have tried the following, but no response from Dropbox

HTML

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

JavaScript

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]);
}

推荐答案

非常感谢@smarx的指导，我才能够找到最终解决方案.

Many thanks to @smarx with his pointers I was able to reach the final solution.

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

Also I have added a few extra features like listening to upload progress so that the users can be showed with the upload progress percentage.

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;
        var arrayBufferView = new Uint8Array( arrayBuffer );
        var blob = new Blob( [ arrayBufferView ], { type: input.files[0].type } );
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL( blob );   

        $.ajax({  
          url: "https://api-content.dropbox.com/1/files_put/auto/YourDirectory/" + input.files[0].name,  
          headers: {  
            'Authorization':'Bearer ' +YourToken,  
            'Content-Length':input.files[0].size  
          },  
          crossDomain: true,  
          crossOrigin: true,  
          type: 'PUT',  
          contentType: input.files[0].type,  
          data: arrayBuffer,  
          dataType: 'json',  
          processData: false,
          xhr: function()
          {
            var xhr = new window.XMLHttpRequest();
           //Upload progress, litsens to the upload progress 
           //and get the upload status
           xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
              var percentComplete = parseInt( parseFloat(evt.loaded / evt.total) * 100);
              //Do something with upload progress
              $('#uploadProgress').html(percentComplete);
              $('#uploadProgressBar').css('width',percentComplete+'%');
             }
            }, false);
           },
         beforeSend: function(){
           // Things you do before sending the file 
           // like showing the loader GIF
         },
         success : function(result) {
           // Display the results from dropbox after upload 
           // Other stuff on complete
          },

        }); 
       }
     reader.readAsArrayBuffer(input.files[0]);
    }

U使用PUT方法作为我们的唯一目标是上传文件，根据我对各种资源的研究( zacharyvoase )put方法可以流式传输大文件，也可以将文件放在指定的URI上，如果文件存在，则必须替换该文件. PUT方法不能移动到指定URL以外的其他URL.

U have used the PUT method as our only objective is to upload files,As per my studies on various resources ( StackOverflow and zacharyvoase ) A put method can stream large files, also its desigend to put files on a specified URI , if file exist the file must be replaced. A PUT method cannot be moved to a different URL other than the URL Specified.

风险

在客户端使用访问令牌会给您带来风险，因此需要采取高度安全的措施来屏蔽该令牌.但是，现代的Web开发工具(如浏览器控制台，Firebug等)可以监视您的服务器请求并可以查看您的访问令牌.

You are at risk by using access token at client side, there needs to be high security measures to mask the token. But modern Web dev tools like Browser consoles , Firebug etc can monitor your server requests and can see your access token.

这篇关于Dropbox从浏览器直接上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！