none
Cannot upload using Jquery

    Question

  • Hi,

    I would like to upload a file into my storage using Jquery that already set with the SAS Blob credential URL that I got. Here is my code:

    $("#button5").click(function(){
    					
    					var file = document.getElementById("myFile").files[0];
    					
    					console.log(file);
    					console.log(file.size);
    					var url = 'https://mystorage.blob.core.windows.net/httpnotificationstep/Incoming/97109bda-4c77-4949-933e-16f46a7e693b/video2.mp4?sr=b&sp=w&sig=RQQUZzUHaBTWkllizHLEOmrYJIx85zqPYk5mQr2Y1mk%3D&sv=2015-07-08&se=2017-02-17T14%3A47%3A37Z';
    					$.ajax({
    						url: url,
    						type: "PUT",
    						processData: false,
    						data: file,
    						beforeSend: function (xhr) {
    								xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
    								xhr.setRequestHeader('Content-Length', file.size);
    								xhr.setRequestHeader('Content-Type', 'video/mp4');
    								alert("start")
    							},
    						success: function (msg) {
    								console.log(file);
    							}
    						});
    
    
    			});

    But, it is always failed. This is the error that I got:

    Is there anyone ever experienced this before ?

    Thank You


    Adityo Setyonugroho



    • Edited by Adityo Setyonugroho Friday, February 17, 2017 1:15 PM credential
    • Edited by Md Shihab Sunday, February 19, 2017 5:25 AM To hide storage account name
    Friday, February 17, 2017 1:14 PM

Answers

All replies

  • You need to enable CORS Support for Azure Storage services. Also, as per the error from the screenshot, you may refer and take note of the File.lastModifiedDate being deprecated.
    Sunday, February 19, 2017 5:29 AM
  • Hi,

    Thanks for your reply. I will try to enable CORS in my Azure Storage. But, something odd is bugging me. I use the same method to upload using urllib python. It is work, but not with Jquery, here is my python:

        opener = urllib2.build_opener(urllib2.HTTPHandler)
        request = urllib2.Request('https://mystorage.blob.core.windows.net/myblobcontainer/Incoming/' + str(genGUID) + '/video2.mp4?'+str(sas_blob_video), data=open('C:\\Users\\azure\\Desktop\\myvid\\video2.mp4', mode='rb'))
        request.add_header('x-ms-blob-type', 'BlockBlob')
        request.add_header('Content-Type', 'video/mp4')
        request.add_header('Content-Length', os.stat('C:\\Users\\azure\\Desktop\\myvid\\video2.mp4').st_size)
        request.get_method = lambda: 'PUT'
        opener.open(request)

    I will tell you as soon as possible after I am trying to enable CORS in my blob, Thanks.


    Adityo Setyonugroho

    Monday, February 20, 2017 3:40 AM
  • If your files are images, video or any kind of media asset then Cloudinary can be a relevant solution for this case.
    You can use Cloudinary's jQuery file upload plugin, this plugin enables multiple file selection, drag and drop support, progress bars, validation and storage for your files. You can find more information here. http://cloudinary.com/documentation/jquery_integration
    Monday, June 12, 2017 7:57 AM