Files Uploaded Via AJAX to Azure Cloud Storage are corrupted

Question

I am using dropzone.js to upload files to an Azure Cloud Storage Bucket.

The files are uploading to the bucket but when I download them they are corrupted.

My dropzone is setup as follows:

var printDropzone = new Dropzone("#printDropZone", { method: 'post', maxFiles: 1 });

printDropzone.on('sending', function (file, xhr, formData) {

    xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
    xhr.setRequestHeader('Content-Length', file.size);
});


printDropzone.on('processing', function (file, xhr) {
    $.ajax({
        url: '/api/sas',
        type: 'GET',
        async: false,
        success: function (response) {
            var timeStamp = Math.floor(Date.now() / 1000);
            upload = timeStamp + '-' + file.name;
            printDropzone.options.url = response.HostingSite + '/' +upload + response.Token;
            printDropzone.options.method = 'put';


        }
    });
});

The Request looks like this:

Accept:application/json
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:23684
Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryALPTivVAxkgUv5lv
DNT:1
Host:somehost.net
Origin:http://localhost:2130
Referer:http://localhost:2130/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
x-ms-blob-type:BlockBlob
X-Requested-With:XMLHttpRequest

I have looked everywhere. I am not uploading in chunks, and everything seems to be there, but no matter what type of file I upload it is corrupted with I re-download it.

What is your sever technology? If .Net you are better off implementing a normal upload and have the server do the Azure storage. This way is also more secure as no storage information is visible in the client-side. — Gone Coding
Thanks @TrueBlueAussie but the requirements are for me to build this client side using dropzonejs — w3bMak3r
Are you downloading them from the azure portal or some other way? Wondering if your download is what is flawed instead of the upload — greg_diesel
Did you ever find a solution to this? I'm seeing possibly the same issue using DropZone.js and Azure. When I try to view my uploaded images, they're corrupted. — Kris

Alex Kilty Alex Kilty · Accepted Answer · 2016-04-14T10:39:33

Try setting multipart to false.

printDropzone.on('processing', function (file, xhr) {
    $.ajax({
        url: '/api/sas',
        type: 'GET',
        async: false,
        success: function (response) {
            var timeStamp = Math.floor(Date.now() / 1000);
            upload = timeStamp + '-' + file.name;
            printDropzone.options.url = response.HostingSite + '/' +upload + response.Token;
            printDropzone.options.method = 'put';
            printDropzone.options.multipart = false;
    }
});

Files Uploaded Via AJAX to Azure Cloud Storage are corrupted

1 Answers