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.

   or an online version.

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.

.