locked
Image upload from HTML5 and Javascript RRS feed

  • Question

  • I have been struggling with this since a week. 

    No tutorial on the web was able to help me.

    Here is what i am trying to do. I am trying to upload an image via HTML5 . I am confused on how i should send the image as. Should i send it directly the response from HTML5 File reader API or i should convert it to a blob and send it? I am able to upload text data. But when i upload image data. They won't turn up .

    Saturday, October 18, 2014 7:05 PM

Answers

  • You should send the data you read from File API. So in your code above, you should send the data in "requestData" variable. I wrote a blog post some time ago about uploading large files using HTML 5, jQuery and Shared Access Signature which you may find useful: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/

    Relevant code from that blog post:

    var reader = new FileReader();
     
            reader.onloadend = function (evt) {
                if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                    var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
                    var requestData = new Uint8Array(evt.target.result);
                    $.ajax({
                        url: uri,
                        type: "PUT",
                        data: requestData,
                        processData: false,
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                            xhr.setRequestHeader('Content-Length', requestData.length);
                        },
                        success: function (data, status) {
                            console.log(data);
                            console.log(status);
                            bytesUploaded += requestData.length;
                            var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
                            $("#fileUploadProgress").text(percentComplete + " %");
                            uploadFileInBlocks();
                        },
                        error: function(xhr, desc, err) {
                            console.log(desc);
                            console.log(err);
                        }
                    });
                }
            };

    Hope this helps.

    Sunday, October 19, 2014 12:20 PM

All replies

  • Hi,

    I understand that you are using Azure storage to store images in Azure. Please check this that talks about  console application that uploads an image to Azure, and then creates an HTML file that displays the image in your browser that might be helpful.

    Regards,

    Shirisha Paderu

    Saturday, October 18, 2014 9:01 PM
  • You should send the data you read from File API. So in your code above, you should send the data in "requestData" variable. I wrote a blog post some time ago about uploading large files using HTML 5, jQuery and Shared Access Signature which you may find useful: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/

    Relevant code from that blog post:

    var reader = new FileReader();
     
            reader.onloadend = function (evt) {
                if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                    var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
                    var requestData = new Uint8Array(evt.target.result);
                    $.ajax({
                        url: uri,
                        type: "PUT",
                        data: requestData,
                        processData: false,
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                            xhr.setRequestHeader('Content-Length', requestData.length);
                        },
                        success: function (data, status) {
                            console.log(data);
                            console.log(status);
                            bytesUploaded += requestData.length;
                            var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
                            $("#fileUploadProgress").text(percentComplete + " %");
                            uploadFileInBlocks();
                        },
                        error: function(xhr, desc, err) {
                            console.log(desc);
                            console.log(err);
                        }
                    });
                }
            };

    Hope this helps.

    Sunday, October 19, 2014 12:20 PM