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