cant set content-type to uploding blob using react and '@azure/storage-blob'

Question

i have generated image from canvas and im uploading it to azure storage .. the problem is that the content type is always "application/octet-stream" and i need it to be "image/png" for using the url of the file.. this is what i tried but no luck .. thanks in advance

  private blobUploader(){

const account = "acuontname";
const sas = "SAS_STRING";


const url = `https://${account}.blob.core.windows.net${sas}`;

const blobServiceClient = new BlobServiceClient( url);

const containerName = "containerName";
const dataURI = this.canvasCompRef.current.getOutputBase64();
async function main() {
  const containerClient = blobServiceClient.getContainerClient(containerName);
  const content = dataURI.split('base64,')[1];
  const blobName = "newblob" + new Date().getTime() + ".png";

  let blockBlobClient = containerClient.getBlockBlobClient(blobName);
  blockBlobClient.setHTTPHeaders({blobContentType:'image/png'});
  const buffer = new Buffer(content, 'base64');
  const uploadBlobResponse = await blockBlobClient.upload(buffer, buffer.byteLength);
  // we are running it in browser
  console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);
}

main();

}

Answer 1

Change your code like below, it works for me.

let blockBlobClient = containerClient.getBlockBlobClient(blobName);
const blobOptions = { blobHTTPHeaders: { blobContentType: 'image/png' } };
const buffer = new Buffer(content, 'base64');
const uploadBlobResponse = await blockBlobClient.upload(buffer, buffer.byteLength, blobOptions); 
console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);