使用 Javascript 将大文件上传到 Azure Blob

Question

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.

Answer 1

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.

Answer 2

Azure released Storage JavaScript client library for browsers. https://azure.microsoft.com/en-us/blog/new-azure-storage-javascript-client-library-for-browsers-preview/

Guide and samples are here: https://dmrelease.blob.core.windows.net/azurestoragejssample/samples/sample-blob.html

Also a simple demo here to upload a blob to a container using SAS token. https://authinazuread.azurewebsites.net/storage.html

It's all client side javascript, so files are not transferred to server. It supports chunked upload and works well with large files.