6

[ブラウザ/ウェブ アプリケーションから] ドロップボックスにファイルを直接アップロードしようとしています。コード 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明確なドキュメントがなく、ドキュメント部分のリンクの多くが壊れていると言ってがっかりしました。

ファイルを自分のアカウントにアップロードする必要があり、クライアントはドロップボックスにログインする必要はありません。

任意のポインタは本当に高く評価されます. Ajax / JavaScript メソッドを探しています。

アップデート

以下を試しましたが、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]);
}
4

5 に答える 5

1

「ファイルを自分のアカウントにアップロードする必要があり、クライアントはドロップボックスにログインする必要はありません。」

次に、サーバー側でアップロードを行う必要があります。クライアント側でこれを行うには、ブラウザにアクセス トークンを送信することを意味します。その時点で、アプリのユーザーはそのアクセス トークンを使用して、アカウントで必要なことを行うことができます。(たとえば、他のすべてのファイルを削除する、個人の DVD コレクションをアップロードするなど)。

セキュリティ上の理由から、アクセス トークンを秘密にできるサーバー側でアップロードすることを強くお勧めします。

于 2015-12-22T17:46:21.523 に答える
1

これまでの回答では、Dropbox javascript SDK を使用していません。これが最善の方法だと思います。こちらのリンクをご覧ください:

https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/javascript/upload/index.html

これは、SDK をダウンロードしたことに依存する例を提供します。（編集：SDKで遊んだ後、このスレッドで受け入れられた回答と同様のPOSTリクエストが作成されることに気付きました。ただし、一般的な回答で省略されているのは、SDKが実際のPOSTの前に行うOPTIONSプリフライト呼び出しの存在です）

また、ドロップボックス SDK の例には示されていないが、ブロブ オブジェクトをドロップボックスにアップロードできることも付け加えておきます。これは、たとえば、キャンバスから画像を動的に抽出してアップロードしたいが、ファイル アップロード入力を介してファイル システムから選択されたものをアップロードしたくない場合に便利です。

ここで説明しているシナリオの簡単な例を次に示します。

//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})
于 2018-02-15T11:55:27.657 に答える
0

@smarx のポインターに感謝し、最終的な解決策にたどり着くことができました。

また、アップロードの進行状況をリッスンするなどの追加機能をいくつか追加して、アップロードの進行状況のパーセンテージをユーザーに表示できるようにしました。

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メソッドを使用しました。さまざまなリソース（StackOverflowおよびzacharyvoase）に関する私の研究によると、putメソッドは大きなファイルをストリーミングでき、ファイルが存在する場合、指定されたURIにファイルを配置する設計も可能ですファイルを置き換える必要があります。PUT メソッドは、指定された URL 以外の別の URL に移動することはできません。

リスク

クライアント側でアクセス トークンを使用すると危険にさらされます。トークンをマスクする高度なセキュリティ対策が必要です。しかし、ブラウザ コンソールや Firebug などの最新の Web 開発ツールは、サーバー リクエストを監視し、アクセス トークンを確認できます。

于 2016-03-16T13:02:21.630 に答える