Child Item

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

Hi,

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

Find more posts tagged with

Developers

Comments

Greg-DB

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