Create a blob by uploading data from a browser (ReactJS)

upload.js

/*
https://www.npmjs.com/package/@azure/storage-blob
npm install @azure/storage-blob
OR
yarn add @azure/storage-blob
Remember to set up the CORS rules for your storage https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-javascript-client-libraries#setting-up-storage-account-cors-rules
*/

const { BlobServiceClient } = require("@azure/storage-blob")

async uploadFile (file) {
  const STORAGE_ACCOUNT_NAME = 'myapp'
  const CONTAINER_NAME = 'avatar'
  // for browser, SAS_TOKEN is get from API?
  const SAS_TOKEN = '?sv=2019-02-02&ss=bfqt&srt=sco&sp=rwdlacup&se=2019-11-28T11:42:50Z&st=2019-11-26T03:42:50Z&spr=https,http&sig=qlpvozk6j2qOrvJGQPsIcQEHcIz3xIM6c8EHRg0fKFo%3D'
  const sasURL = `https://${STORAGE_ACCOUNT_NAME}.blob.core.windows.net/${SAS_TOKEN}`

  const blobServiceClient = new BlobServiceClient(sasURL)
  const containerClient = blobServiceClient.getContainerClient(CONTAINER_NAME)

  const filename = file.name.substring(0, file.name.lastIndexOf('.'))
  const ext = file.name.substring(file.name.lastIndexOf('.'))
  const blobName = filename + '_' + new Date().getTime() + ext
  const blockBlobClient = containerClient.getBlockBlobClient(blobName)
  const uploadBlobResponse = await blockBlobClient.uploadBrowserData(file)
  console.log(`Upload block blob ${file.name} successfully`, uploadBlobResponse.clientRequestId)
}

handleFilesAdd (files) {
  if (files.length) {
    const file = files[0]
    this.uploadFile(file)
  }
}

Thanks for sharing!

Hi I want to upload the Media Blob , Can you help me where should I place the file and how should I call