Upload Files to Azure Storage from Azure Function - Nodejs

Question

Currently I'm sending a file from Angular as a blob using formdata like so

  uploadFiles(file) {
    let testData: FormData = new FormData();
    testData.append('file_upload', file, file.name);
    console.log("TESTDATA", file);
    console.log(file);
    return this.http
      .post<{ message: string; listingId: string; creator: string }>(
        environment.azure_function_url + `/UploadFilesTest`,
        testData
      );
  }

I'm able to receive it in the azure function by following this answer in my azure function, but I'm not sure how to get from here to azure blob. I'm not sure what I would pass into blobService.createBlockBlobFromLocalFile to get the file to blob storage. I tried passing the parts and image variables but it keeps saying Parameter blob for function _createBlobFromLocalFile should be a non-empty string If I return the commented out code at the bottom then the frontend returns

which seems promising to me that I'm on the right track, butI just don't know how to get this to play nice with createBlockBlobFromLocalFile() function. I appreciate any help!

var multipart = require("parse-multipart");
var azure = require('azure-storage');
var blobService = azure.createBlobService(process.env.AZURE_STORAGE_AUCTIONIMAGESACCOUNT, process.env.AZURE_STORAGE_AZURE_STORAGE_AUCTIONIMAGESACCOUNT_ACCESS_KEY);

module.exports = function (context, req) {

  // encode body to base64 string
  var bodyBuffer = Buffer.from(req.body);

  var boundary = multipart.getBoundary(req.headers['content-type']);
  // parse the body
  var parts = multipart.Parse(bodyBuffer, boundary);
  console.log(parts)
  let image = [{ name: parts[0].filename, type: parts[0].type, data: parts[0].data.length }];
  // context.res = { body: { name: parts[0].filename, type: parts[0].type, data: parts[0].data.length, "TEST": "TEST" } };
  // context.done();
  // return;

  blobService.createBlockBlobFromLocalFile('auctionimages', image, 'image.png', function (error, result, response) {
    if (!error) {
      // file uploaded
    }
  });


};

Answer 1

If you want to save the blob as image in Azure blob storage, you want to set the blob content type by creating CreateBlockBlobRequestOptions when we upload file with the method createBlockBlobFromStream.

For example

const streamifier = require('streamifier');
const multipart = require('parse-multipart');
const azure = require('azure-storage');

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

  var filedata = parts[0].data;         // Image buffer data
  var filename = parts[0].filename;     // testImage.png
  console.log("parts[0].data");
  console.log(parts[0].data);
  console.log("parts[0].filename");
  console.log(parts[0].filename);
  const accountname ="blobstorage0516";
  const key = "eGier5YJBzr5z3xgOJUb+sn***7Csvgx75NwiOZE7kYLJfLqWBg==";
  const containerName="test1";
  const blobClient  =azure.createBlobService(accountname,key);
 # set blob content type
  var options = {
    contentSettings:{contentType: parts[0].type}
  };
  blobClient.createBlockBlobFromStream(containerName,filename,streamifier.createReadStream(new Buffer(filedata)), filedata.length,options,(err,result)=>{

    if (!err) {
        console.log("Image upload successful", result);

    } else{

      throw err;
    }
  })
  context.res = {
    // status defaults to 200 */
    body: "ok"
};
context.done();
};