使用Javascript中的Dropbox Core API将文件上传到Dropbox [英] Upload files to Dropbox using a Dropbox Core API in Javascript

问题描述

我正在研究一个简单的Chrome扩展，需要将文件上传到用户的保管箱文件夹。我正在使用下面提到的简单的AJAX请求上传文件，但是它适用于扩展名为 .txt，.json，.c等的文件。 code> mime type 类型为 text / plain 或类似类型，但所有其他类型的文件，如PDF，图像文件等被损坏并生成空白内容。

 函数startUpload（）
 {
 var folderPath = $（this）.closest（'tr'）。attr（'path'）+'/'; 
 var file = $（＃upload_file）[0] .files [0]; 
 if（！file）{
 alert（没有选择要上传的文件）; 
返回false; 
} 
 
 var reader = new FileReader（）; 
 reader.readAsText（文件，UTF-8）; 
 reader.onload = function（evt）{
 uploadFile（folderPath + file.name，evt.target.result，file.size，file.type）; 
 
 
 $ b $ //函数将文件上传到文件夹
函数uploadFile（filepath，data，contentLength，contentType）{
 var url = https://api-content.dropbox.com/1/files_put/auto\"+filepath; 
 var headers = {
授权：'Bearer'+ getAccessToken（），
 contentLength：contentLength，
}; 
 var args = {
 url：url，
 headers：headers，
 crossDomain：true，
 crossOrigin：true，
 type：'PUT'， 
 contentType：contentType，
 data：data，
 dataType：'json'，
成功：函数（数据）
 {
 getMetadata（filepath.substring （0，filepath.lastIndexOf（ '/'）），createFolderViews）; 
}，
 error：function（jqXHR）
 {
 console.log（jqXHR）; 
} 
}; 
 $ .ajax（args）; 
} 
  

解决方案

code> reader.readAsTextFile（文件，UTF-8）。如果该文件不是文本文件，则会误解内容。我认为你需要 reader.readAsBinaryString 或 reader.readAsArrayBuffer 。 （我还没有自己测试过。）

编辑

这个我自己，我发现 readAsArrayBuffer 是你需要的，但是你也需要添加 processData：false 作为一个选项到 $。ajax 来防止jQuery将数据转换为表单提交中的字段。

确保使用 dataType：'json'正确解析服务器的响应。

I am working on a simple chrome-extension that needs to upload files to the user's dropbox folder. I am using the simple AJAX requests as mentioned below to upload files, however it works for files with extensions such as .txt, .json, .c, etc i.e. files whose mime type is of type text/plain or similar type but all other file types such as pdfs, image files etc get corrupted and produce blank contents. What am I missing in uploading the files the correct way.

function startUpload()
{
    var folderPath = $(this).closest('tr').attr('path')+'/';
    var file = $("#upload_file")[0].files[0];
    if (!file){
        alert ("No file selected to upload.");
        return false;
    }

    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        uploadFile(folderPath+file.name,evt.target.result,file.size,file.type);
    }
}

//function to upload file to folder
function uploadFile(filepath,data,contentLength,contentType){
    var url = "https://api-content.dropbox.com/1/files_put/auto"+filepath;
    var headers = {
        Authorization: 'Bearer ' + getAccessToken(),
        contentLength: contentLength,
    };
    var args = {
        url: url,
        headers: headers,
        crossDomain: true,
        crossOrigin: true,
        type: 'PUT',
        contentType: contentType,
        data : data,
        dataType: 'json',
        success: function(data)
        {
            getMetadata(filepath.substring(0,filepath.lastIndexOf('/')),createFolderViews);
        },
        error: function(jqXHR)
        {
            console.log(jqXHR);
        }
    };
    $.ajax(args);
}

解决方案

I believe the issue is reader.readAsTextFile(file, "UTF-8"). If the file isn't a text file, this will misinterpret the contents. I think you want reader.readAsBinaryString or reader.readAsArrayBuffer. (I haven't tested it myself.)

EDIT

After testing this myself, I found that readAsArrayBuffer is what you need, but you also need to add processData: false as an option to $.ajax to prevent jQuery from trying to convert the data to fields in a form submission.

Also be sure to use dataType: 'json' to properly parse the response from the server.

这篇关于使用Javascript中的Dropbox Core API将文件上传到Dropbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！