Azure Blob Storage

React hook to upload, get files, get loading status from Azure Blob Storage


useUploadFile.tsx
import { useCallback, useState } from 'react';
import { BlobServiceClient } from '@azure/storage-blob';

const containerName = 'sample-container';
const sasToken = process.env.NEXT_PUBLIC_STORAGESASTOKEN;
const storageAccountName = process.env.NEXT_PUBLIC_STORAGERESOURCENAME;

export const useItem = () => {
  const [items, setItems] = useState([]);
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const [blobs, setBlobs] = useState([]);

  const getBlobsInContainer = async (containerClient) => {
    const returnedBlobUrls = [];

    for await (const blob of containerClient.listBlobsFlat()) {
      returnedBlobUrls.push(
        `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}`
      );
    }

    return returnedBlobUrls;
  };

  const uploadFileToBlob = useCallback(async (file, newFileName) => {
    setLoading(true);
    if (!file) {
      setMessage('No FILE');
    } else {
      const blobService = new BlobServiceClient(
        `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
      );

      const containerClient = blobService.getContainerClient(containerName);
      await containerClient.createIfNotExists({
        access: 'container',
      });

      const blobClient = containerClient.getBlockBlobClient(newFileName);
      const options = { blobHTTPHeaders: { blobContentType: file.type } };

      await blobClient.uploadData(file, options);

      const blobs = await getBlobsInContainer(containerClient);
      setBlobs(blobs);
      setMessage('uploaded');
    }
    setLoading(false);
  }, []);

  const getBlobs = useCallback(async () => {
    setLoading(true);
    const blobService = new BlobServiceClient(
      `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
    );

    const containerClient = blobService.getContainerClient(containerName);

    const blobs = await getBlobsInContainer(containerClient);
    setBlobs(blobs);
    setLoading(false);
  }, []);

  return {
    uploadFileToBlob,
    getBlobs,
    items,
    message,
    loading,
    blobs,
  };
};

See all posts