Upload Image To Azure Storage Using React

Introduction

In this article, we will learn about uploading images to azure. You can use the Azure Storage SDK for JavaScript in your React app to upload images to Azure Storage. As we all know, Azure is a comprehensive cloud platform offering over 200 innovative products and services to help you bring new ideas to life. It allows you to build, operate, and manage your applications across a variety of environments, including multiple clouds, on-premises, and the edge, using the tools and frameworks of your choice. Whether you're looking to solve current challenges or create new opportunities, Azure provides the resources you need to succeed. Okay, let's move on.

Here's an example of how you can implement image upload to Azure Storage in a React UI

Image upload to Azure Storage in React UI

Step 1

Create React app

Then run our Project

Step 2

Create a Storage account and Container

Step 3

Create a form with an input field for the image file.

import React, { useState } from "react";

function ImageUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = event => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <input type="file" onChange={handleFileChange} />
    </form>
  );
}

export default ImageUpload;

Step 4

Install the Azure Storage SDK.

npm install @azure/storage-blob

Step 5

 In your React component, import the Blob client.

import { BlobServiceClient } from "@azure/storage-blob";

Step 6 

Create an instance of the Blob client using the connection string for your storage account.

const blobServiceClient = new BlobServiceClient(
  "connection-string-to-your-storage-account"
);

Step 7

Create a function that uses the SDK to upload the image to Azure Storage.

import { BlobServiceClient } from "@azure/storage-blob";

async function uploadImage(containerName, file) {
  const blobServiceClient = new BlobServiceClient(
    "connection-string-to-your-storage-account + sas tokken"
  );
  const containerClient = blobServiceClient.getContainerClient(containerName);
  const blobClient = containerClient.getBlobClient(file.name);
  const blockBlobClient = blobClient.getBlockBlobClient();
  const result = await blockBlobClient.uploadBrowserData(file, {
    blockSize: 4 * 1024 * 1024,
    concurrency: 20,
    onProgress: ev => console.log(ev)
  });
  console.log(`Upload of file '${file.name}' completed`);
}

Step 8

Now we see how to get Shared Access Signature(SAS). Open your storage account and right-click your Container 

Then copy your query string.

Step 7

Add a submit button to your form that calls the uploadImage function when clicked.

import React, { useState } from "react";

function ImageUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = event => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = event => {
    event.preventDefault();
    uploadImage("your-container-name", file);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload Image</button>
    </form>
  );
}

export default ImageUpload;

Then run your project

Then choose the file and click the upload button and see your storage account.

Summary

In this article, you learned how to upload images and create a SAS token also. Please use the comments section if you have any clarification.