Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Upload Largefile to Azure Blob using Javascript

I have seen few examples where a file is transferred to server side and then uploaded to Azure Blob Storage.
But I have files with size in few GBs.
Is there a way I can upload a file directly to Azure Blob Storage using Client Side scripts instead of doing it from Server Side to save time.

like image 668
Srinivas Avatar asked Nov 12 '13 17:11

Srinivas


People also ask

How do I push data to Azure blob?

Using Azure Data FactoryCreate and schedule a pipeline that downloads data from Azure Blob storage. Pass it to a published Azure Machine Learning web service. Receive the predictive analytics results. Upload the results to storage.

How do I upload files to Azure blob storage using API?

Upload contents of a folder to Data Box Blob storage To get your account key, in the Azure portal, go to your storage account. Go to Settings > Access keys, select a key, and paste it into the AzCopy command. If the specified destination container does not exist, AzCopy creates it and uploads the file into it.

How do I use a SAS URL to upload files to Azure blob storage?

If you'd rather use a SAS token to authorize access to blob data, then you can append that token to the resource URL in each AzCopy command. For example: 'https://<storage-account-name>.blob.core.windows.net/<container-name><SAS-token>' .


1 Answers

Updating my answer, now that CORS is supported in Windows Azure Storage and the OP has not accepted any answer :).

Yes, it is possible to upload large files directly from your browser to Windows Azure Storage. You may find these steps useful:

  1. First create a Shared Access Signature URL (SAS) with at least Write permission on the blob container in which you wish to upload the files. Since you're uploading large files, I would recommend keeping SAS expiry time to be long enough.

  2. Next enable CORS on your storage account. If you wish to do it programmatically, you may find this post useful: http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/. If you want to use a tool, my company has released a Free tool to do just that. You can read more about this tool and download from here: http://blog.cynapta.com/2013/12/cynapta-azure-cors-helper-free-tool-to-manage-cors-rules-for-windows-azure-blob-storage/.

  3. I wrote a blog post some time back on uploading very large files into blob storage which you can read here: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/. Once CORS is enabled on your storage account, code mentioned in the blog should work just fine.

Actually there's a way though there are some preconditions/caveats.
  1. Because CORS is not supported in Blob Storage just yet, your HTML and JS file need to be present in same blob storage account. They should be in a public blob container.
  2. Since you're uploading large files, they would need to be split into chunks less than 4 MB in size. HTML 5 has a File API which can split the file into chunks but not all browsers support this feature.
I wrote a blog post some time ago about uploading large files using pure JavaScript and Shared Access Signature. You can read that post here: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript.
like image 74
Gaurav Mantri Avatar answered Sep 19 '22 00:09

Gaurav Mantri