Question 104498 in Azure Question posted in
The official documentation to get you started can be found here.

Azure Blob Storage Client Side Upload

For my node js project, I used an AWS S3 bucket and uploaded files from the front end using the AWS SDK.

Similarly, My file storage now needs to be migrated to Azure Blob Storage

Is there a way to upload directly to Azure Blob Storage from the client side?

Using Stack: Node Js (Javascript with EJS as Template engine)

I tried to build a bundle using browserify by passing the BlobServiceClient like this,

var { BlobServiceClient } = require("@azure/storage-blob");
window.BlobServiceClient = BlobServiceClient;

But its showing errors like TypeError: BlobServiceClient is not a constructor

In the end, I would like to replace the S3 bucket upload functions with Azure blob storage functions, and I would like to require the BlobServiceClient from "@azure/storage-blob" so I don’t have to change much code on the front end.

Please help with a solution to integrate the azure storage npm package into the browser.

Tags:

2

Answers


  1. 0

    I tried in my environment and successfully uploaded file in Azure blob storage using browser.

    Before starting you need to install two packages.

    1.npm install @azure/storage-blob
2.npm install parcel

    Index.js

    const { BlobServiceClient } = require("@azure/storage-blob"); 
const  selectButton = document.getElementById("select-button");
const  fileInput = document.getElementById("file-input");
const  blobSasUrl = "<your sas url >";

const  blobServiceClient = new  BlobServiceClient(blobSasUrl);
const  containerName = "test";
const  containerClient = blobServiceClient.getContainerClient(containerName);
const  uploadFiles = async () => {
try {
const  promises = [];
for (const  file  of  fileInput.files) {
const  blockBlobClient = containerClient.getBlockBlobClient(file.name);
promises.push(blockBlobClient.uploadData(file));
}
await  Promise.all(promises);
alert("Done.");
}
catch (error) {
alert(error.message);
}
}
selectButton.addEventListener("click", () =>  fileInput.click());

fileInput.addEventListener("change", uploadFiles);

    Index.html:

    <!DOCTYPE  html>

<html>
<body>

<button  id="select-button">Select and upload files</button>

<input  type="file"  id="file-input"  multiple  style="display: none;"  />

<script  type="module"  src="index.js"></script>

</body>
</html>

    package.json

    {

"name": "blob-quickstart-v12",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel ./index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"browserslist": [
"last 1 Edge version",
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 safari version",
"last 1 webkit version"
],
"dependencies": {
"@azure/storage-blob": "^12.12.0",
 "parcel": "^2.8.0"
 },
 "devDependencies": {
 "buffer": "^5.7.1"}
 }

    You can get the Blob SAS-URL by checking below image.

    enter image description here

    Console:

    enter image description here

    Browser:

    I copied the Url and pasted in browser it worked.

    enter image description here

    After uploading it reflects done in browser.

    enter image description here

    Portal:

    enter image description here

    Reference:

    Get started with Azure Blob Storage and JavaScript – Azure Storage | Microsoft Learn

    Login or Signup to reply.
  2. 0

    To use this client library in the browser, first you need to use a bundler. For details on how to do this, please refer to our bundling documentation

    https://github.com/Azure/azure-sdk-for-js/blob/main/sdk/storage/storage-blob/README.md?plain=1#L99

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search