0

I want to upload an image to Azure Blob Storage using React.

I've tried a lot of examples and none of them work.

The one that seemed the best was this one but still didn't manage to get it working on React.

What I'm trying right now is to use the createContainerIfNotExists method just to test and the error is Cannot read property createBlobServiceWithSas of undefined

My code is the following:

import AzureStorage from 'azure-storage';

const account = {
  name: 'x',
  sas: 'x',
};

const blobUri = `https://${account.name}.blob.core.windows.net`;
const blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, account.sas);

export const createContainer = () => {
  blobService.createContainerIfNotExists('test', (error, container) => {
    if (error) {
      // Handle create container error
    } else {
      console.log(container.name);
    }
  });
};

export default createContainer;
18
  • Could you please tell me your error message? Commented Oct 29, 2019 at 3:01
  • Besides, could you please provide your test code? Commented Oct 29, 2019 at 5:46
  • @JimXu edited the post to show my actual code Commented Oct 29, 2019 at 8:57
  • have you added <script src="scripts/azure-storage.blob.min.js" charset="utf-8"></script> in your html page? Commented Oct 29, 2019 at 9:03
  • 1
    According to my research,Azure storage V2 only supports browser usage with classic single JS bundle file. So you need to refer to the js file. If you still just use the sdk, I suggest you use Azure storage SDK v10. For more details, please refer to github.com/Azure/azure-sdk-for-js/tree/master/sdk/… and stackoverflow.com/questions/56514478/…. Commented Oct 30, 2019 at 8:44

1 Answer 1

1

According to my research, because you develop A React application, we can not use the createBlockBlobFromBrowserFile method. We just can use the method in the browser. For more details, please refer to the document. enter image description here

According to the situation, I suggest you use the other method(such as uploadStreamToBlockBlob) to upload image with V10 sdk. For more details, please refer to https://learn.microsoft.com/en-us/javascript/api/@azure/storage-blob/?view=azure-node-latest

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.