Upload files to Dropbox using a Dropbox Core API in Javascript

Question

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

user94559 · Accepted Answer · 2015-03-27 04:32:54Z

3

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.

edited Mar 27, 2015 at 4:32

answered Mar 26, 2015 at 21:14

user94559

60.3k6 gold badges108 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bawejakunal Over a year ago

I tried using the arraybuffer instead of readAsText but that further worsens the problem as the file size shown is zero in that case, at least with readAsText it shows a non-zero file size although incorrect many times. Using a readAsArrayBuffer won't be useful because in the end it also stores the data as a string.

bawejakunal Over a year ago

yes I did, it behaves exactly like readAsText because the return type of both methods is string

bawejakunal Over a year ago

This article claims to have solved the problem, could you help me understanding it completely ?

groot Over a year ago

after wasting hours, the combination of readAsArrayBuffer, dataType: 'json' & processData: false saved me. Thanks smarx!!

Collectives™ on Stack Overflow

Upload files to Dropbox using a Dropbox Core API in Javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related