Upload a File object to azure storage from react js / node js

Question

I am trying to browse a file and upload it to azure storage account directly from react js / node js application. Tried with couple of modules 'azure-storage' and '@azure/storage-blob'. I can create/upload a blob with some content manually and upload it to azure storage account, but I don't find a way to upload the File which is selected through 'browse - choose a file (input type=file).

Please suggest me a good approach.

The following is sample code: Here 'file' is a File object browsed through material-ui-dropzone -- DropzoneArea

import {BlobServiceClient, StorageSharedKeyCredential} from '@azure/storage-blob';

const sharedKeyCredential = new StorageSharedKeyCredential(azureStorageAccount, azureStorageAccessKey);
const serviceClient = new BlobServiceClient(
  // When using AnonymousCredential, following url should include a valid SAS
  `https://${azureStorageAccount}.blob.core.windows.net`,
  sharedKeyCredential
);

let containerExists = false;
for await (const container of containerIter) {
  if (container.name === containerName) {
    containerExists = true;
    break;
  }
}
const containerClient = serviceClient.getContainerClient(containerName);
if (!containerExists) {
  const createContainerResponse = await containerClient.create();
  console.log('Container was created successfully', createContainerResponse.requestId);
}

// below working fine
const content = 'samle content';
const blobName = 'sample.txt';
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const uploadBlobResponse = await blockBlobClient.upload(content, content.length);
console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);

// NOT WORKING : here file is a File object
const blobName = file.name;
console.log(blobName);
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const uploadBlobResponse = await blockBlobClient.uploadBrowserData(file);
console.log(`Upload block blob ${file.name} successfully`, uploadBlobResponse.clientRequestId);

Thanks in advance.

Answer 1

You can read this blog first.

Upload to Azure Blob Storage with React

I looked at the document and tried it again. The gif animation below should be the result you want.

I quoted the official sample code, because there are requirements for some dependent versions, which cannot be used directly after downloading. I fixed this problem and uploaded it to my own github, you can download it .

When you need to use it in your project, please read the source code carefully and modify the configuration.