Question

I’m having an issue trying to directly upload a file to azure blob storage. I am using ajax calls to send post requests to an ashx handler to upload a blob in chunks. The issue I am running into is the handler isn’t receiving the filechunk being sent from the ajax post.

I can see the page is receiving the post correctly from looking at the request in firebug,

—————————–265001916915724 Content-Disposition: form-data; >name=”Slice”; filename=”blob” Content-Type: application/octet-stream

I noticed the input stream on the handler has the filechunk, including additional bytes from the request. I tryed to read only the filechunk’s size from the inputstream, however this resulted in an corrupt file.

I got the inspiration from http://code.msdn.microsoft.com/windowsazure/Silverlight-Azure-Blob-3b773e26 , I simply converted it from MVC3 to using standard aspx.

Here is the call using ajax to send the file chunk to the aspx page,

var sendFile = function (blockLength) {
var start = 0,
    end = Math.min(blockLength, uploader.file.size),
    incrimentalIdentifier = 1,
    retryCount = 0,
    sendNextChunk, fileChunk;
uploader.displayStatusMessage();
sendNextChunk = function () {
    fileChunk = new FormData();
    uploader.renderProgress(incrimentalIdentifier);
    if (uploader.file.slice) {
        fileChunk.append('Slice', uploader.file.slice(start, end));
    }
    else if (uploader.file.webkitSlice) {
        fileChunk.append('Slice', uploader.file.webkitSlice(start, end));
    }
    else if (uploader.file.mozSlice) {
        fileChunk.append('Slice', uploader.file.mozSlice(start, end));
    }
    else {
        uploader.displayLabel(operationType.UNSUPPORTED_BROWSER);
        return;
    }
    var testcode = 'http://localhost:56307/handler1.ashx?create=0&blockid=' + incrimentalIdentifier + '&filename=' + uploader.file.name + '&totalBlocks=' + uploader.totalBlocks;
    jqxhr = $.ajax({
        async: true,         
        url: testcode,
        data: fileChunk,
        contentType: false,
        processData:false,
        dataType: 'text json',          
        type: 'POST',
        error: function (request, error) {
            if (error !== 'abort' && retryCount < maxRetries) {
                ++retryCount;
                setTimeout(sendNextChunk, retryAfterSeconds * 1000);
            }

            if (error === 'abort') {
                uploader.displayLabel(operationType.CANCELLED);
                uploader.resetControls();
                uploader = null;
            }
            else {
                if (retryCount === maxRetries) {
                    uploader.uploadError(request.responseText);
                    uploader.resetControls();
                    uploader = null;
                }
                else {
                    uploader.displayLabel(operationType.RESUME_UPLOAD);
                }
            }

            return;
        },
        success: function (notice) {
            if (notice.error || notice.isLastBlock) {
                uploader.renderProgress(uploader.totalBlocks + 1);
                uploader.displayStatusMessage(notice.message);
                uploader.resetControls();
                uploader = null;
                return;
            }

            ++incrimentalIdentifier;
            start = (incrimentalIdentifier - 1) * blockLength;
            end = Math.min(incrimentalIdentifier * blockLength, uploader.file.size);
            retryCount = 0;
            sendNextChunk();
        }
    });
};

Thanks so much for anything that can help me out.

Answer 1

Turns out on my webform, the input file tag was missing the enctype=”multipart/form-data” attribute.