cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox here.

Discuss Dropbox Developer & API

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Dropbox does not decode the file properly after uploading from XHR in javascript

Dropbox does not decode the file properly after uploading from XHR in javascript

sk01
New member | Level 2

Hi,

I followed the link- https://blogs.dropbox.com/developers/2016/03/how-formio-uses-dropbox-as-a-file-backend-for-javascrip... to upload a file. After it is uploaded, content is corrupted or giving [object Object]

here is my code -

var file = event.getParam("files");
        var xhr = new XMLHttpRequest();
        var dropboxToken='accessToken';
        xhr.upload.onprogress = function(evt) {
            var percentComplete = parseInt(100.0 * evt.loaded / evt.total);
            // Upload in progress. Do something here with the percent complete.
            console.log('completed percentage=  '+percentComplete);
        };
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                var fileInfo = JSON.parse(xhr.response);
                // Upload succeeded. Do something here with the file info.
                console.log('fileinfo after successful upload--'+JSON.stringify(fileInfo));
            }
            else {
                var errorMessage = xhr.response || 'Unable to upload file';
                // Upload failed. Do something here with the error.
            }
        };
        
        xhr.open('POST', 'https://content.dropboxapi.com/2/files/upload');
        xhr.setRequestHeader('Authorization', 'Bearer ' + dropboxToken);
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
            path: '/' +  file[0].name,
            mode: 'add',
            autorename: true,
            mute: false
        }));
      
        xhr.send(file[0]);
1 Reply 1

Greg-DB
Dropbox Staff

The code from that blog post expects `file` to be a JavaScript `File` object.

I'm not sure what the `event.getParam` does in your version of the code, but it appears it's not retrieving the actual `File` object, and so is instead just uploading the string representation "[object Object]" of whatever object it is returning.

You should instead make sure `file` is a `File` object. For example, that might look like this, if listening to the onchange event for a file input with the id "fileInput":

 

var fileInput = document.getElementById('fileInput')
var file = fileInput.files[0];

 

 

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
What do Dropbox user levels mean?