cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Check out the Dropbox cheat sheet for getting started in 2021 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

New member | Level 2

Hi,

I followed the link- https:confused face:/blogs.dropbox.com/developers/2016/03/how-formio-uses-dropbox-as-a-file-backend-for-javascript-... 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

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

Dropboxer

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];

 

 

Polls
Are you starting new work habits this year?

Work Smarter with Dropbox

The way we work is changing. Share and discover new ways to work smarter with Dropbox in our community.

Sound good? Let's get started.
Who's talking

Top contributors to this post

What do Dropbox user levels mean?
Need more support?