Upload BlockBlob to Azure Storage using React

Question

I haven\'t been able to get a working example. My following example tells me that the createBlockBlob method is undefined.

Note: I\'ve also tried createBlockBlobFromLoca

Answer 1

I see you were using Azure Storage SDK v2 for JavaScript to upload file in React from Browser to Azure Blob Storage. There is a similar SO thread How to upload folder into azure automatically? which I had answered with a completed code in JavaScript. I think it can help you to write React code and make it works in Browser.

According to your description and codes, I have some suggestions for you while using Azure Storage JS SDK v2.

1. Based on my experience, there are some incompatible with Node.js and browser. So you can not use createBlockBlobFromLocalFile method in browser to upload files.

2. Please refer to the document Azure Storage JavaScript Client Library Sample for Blob Operations to import azure-storage.blob.js in your HTML file for blob operations as below.

   <script src="azure-storage.blob.js"></script>
   

   or an online version.

   <script src="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script>
   

3. Then, you can use createBlockBlobFromBrowserFile method in browser.

Meanwhile, a new version of Azure Storage JS SDK is v10 which seems to improve compatibility, that you can pay attention to its APIs marked with "ONLY AVAILABLE IN NODE.JS RUNTIME" or "ONLY AVAILABLE IN BROWSERS" for differences between Node.js and browsers runtime.

Hope it helps.

.

Answer 2

Here are some differences between storage JS v2 and V10 SDK regarding browser scenarios support:

1. V10 support browser scenarios with npm package and classic single JS bundle file; V2 only supports browser usage with classic single JS bundle file like Peter Pan's sample.

2. V10 doesn't support SharedKeyCredential in browsers, while V2 supports.

So, if you are building a React Web APP and importing storage SDK using npm dependency. Please use V10. Also please don't use account name and key in browsers, because it's not safe.