通过Ajax上传到Dropbox时文件损坏

Question

I'm trying to use the Dropbox API to send files to a specific Dropbox folder via a web interface using Ajax.

Here is my code:

function UploadFile(token, callback) {

    var fileName        = $('input[type=file]')[0].files[0].name,
        fileData        = new FormData($('#file-upload')[0]),
        dbxHeaderParams = {
            'path': '/' + fileName,
            'mode': { '.tag': 'add' },
            'autorename': true
        };

    $.ajax({
        url: 'https://content.dropboxapi.com/2/files/upload',
        type: 'POST',
        headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/octet-stream',
            'Dropbox-API-Arg': JSON.stringify(dbxHeaderParams)
        },
        data: fileData,
        processData: false,
        contentType: false,
        success: function(result) {
            console.log('NICE BRO');
            callback();
        },
        error: function(error) {
            console.error(error);
            callback();
        }
    });

}

This code works: files are uploaded to my Dropbox folder and i can open them. They even have the right name and (almost) the right size. But the problem is that they are all corrupted because some lines are added during the process.

Here is an example: if I want to upload a .txt file containing this:

harder better faster stronger

Once uploaded on my Dropbox, it will looks like this:

-----------------------------2308927457834
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain

harder better faster stronger
-----------------------------2308927457834--

I assume this is why I can't open files like images. I've tried several solutions but none of them can solve this. What am I doing wrong ? Thanks !

Answer 1

Seeing the relevant pieces of the HTML would be useful, but it looks like the issue is that you're supplying a FormData object to the upload call, as opposed to the File .

Try replacing this line:

        fileData        = new FormData($('#file-upload')[0]),

with this:

        fileData        = $('input[type=file]')[0].files[0],