Announcements
Known issues updated. Learn more

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

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

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

 

 

Reply
Loading...
Developer & API Discussions

Have a question? Our Dropbox Community is here to help you find an answer!
You won’t have to wait too long for a reply, but why not learn more about the Community while you’re here.

Not the right discussion for you? Find out what else our Community has to say about Developer & API Discussions.

Or, search our Help Center for even more.

Who's talking
Top contributors to this post