Upload file to a specific Azure Storage container using Azure Function

bowlingh23
May 3, 2023
239 views
0 votes
2 Answers

Right now I am working on an API that allows customers to upload their files to their own containers. I provide them with a container name and a SAS Token, then they input this information through the API to upload to their container. The following is a snippet of my code, where "container" is the container name and "accessKey" is the SAS token they submit:

var bodyBuffer = Buffer.from(req.body);
var boundary = multipart.getBoundary(req.headers['content-type']);
var parts = multipart.Parse(bodyBuffer, boundary);  

const sasURL = "https://myaccountname.blob.core.windows.net/" + container + "?" + accessKey;
const containerClient = new BlobContainerClient(sasURL);
const blobName = parts[0].filename;
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const uploadBlobReponse = await blockBlobClient.upload(parts[0].data, parts[0].data.length);

Azure states that uploadBlobResponse is declared but its value is never read, but I don’t know how to fix that issue.

Answers

Chosen as BEST ANSWER
- bowlingh23
- May 4, 2023 at 4:07 pm
- 0 votes
0
After using a try/catch block to explicitly see what issues were in the code I found out that my BlobServiceClient was not properly defined. I created the blobServiceClient as a new BlobServiceClient first, then I created a new containerClient. The new upload code is shown below.
const sasURL = "https://myaccountname.blob.core.windows.net/" + container + "?" + accessKey; const blobServiceClient = new BlobServiceClient(sasURL); const containerClient = blobServiceClient.getContainerClient(container); const blobName = parts[0].filename; const blockBlobClient = containerClient.getBlockBlobClient(blobName); const uploadBlobReponse = await blockBlobClient.upload(parts[0].data, parts[0].data.length);

(Edit)

You might be getting 500 error due to authentication issue/sas url.
I have referred this document for creating CORS rule and SAS URL. Create the Javascript project and install the listed packages in the document.

Packages:

npm install @azure/storage-blob
npm install parcel

index.js file:

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  =  "container name";
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 file:

<!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"}
}

SAS URL :

Console: