How to upload images and files to Azure Blob Node.js

Question

I have node.js application with frontend in Angular I need to upload files and images to Azure blob I have created container and setup the environment according to MS documentation (https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-nodejs )

the v12 version.

My functions works for creating and uploading the created file to Azure blob, I could not figure how do I upload the posted file from the client to Azure Blob, below is my code in Node.js TypeScript

  import * as formidable from 'formidable';
  import * as fs from 'fs';

  const { BlobServiceClient } = require('@azure/storage-blob');
  const uuidv1 = require('uuid/v1');
  const dotenv = require('dotenv');
  dotenv.config();

class BlobController {

    private AZURE_STORAGE_CONNECTION_STRING = process.env.CONSTRINGBlob;

   constructor(router) {
    router.post('/file', this.uploadFile.bind(this));
  }
 //----Get Lookup tables dynamically-----------//
 async uploadFile(req, res) {

    const blobServiceClient = await BlobServiceClient.fromConnectionString(this.AZURE_STORAGE_CONNECTION_STRING);
    // Create a unique name for the container
    //const containerName = 'quickstart' + uuidv1();
    const containerName = blobServiceClient.getContainerClient('mycontainer');
    console.log('\t', containerName.containerName);
    // Get a reference to a container
    const containerClient = await blobServiceClient.getContainerClient(containerName.containerName);
    let form = new formidable.IncomingForm();
    form.parse(req, async function (err, fields, files) {
        const blobName = 'test' + uuidv1() + files.file;
        // Get a block blob client
        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
        console.log('\nUploading to Azure storage as blob:\n\t', blobName);
        // Upload data to the blob
        const data = 'Hello test';
        const uploadBlobResponse = await blockBlobClient.upload(data, data.length);
        console.log("Blob was uploaded successfully. requestId: ", uploadBlobResponse.requestId);
    });
 }
}

module.exports = BlobController

could anyone help me on how can I upload files posted to Azure blob using Node.js

Gaurav Mantri Gaurav Mantri · Accepted Answer · 2020-03-01T06:21:41

You were almost there :).

Please change your following code:

form.parse(req, async function (err, fields, files) {
        const blobName = 'test' + uuidv1() + files.file;
        // Get a block blob client
        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
        console.log('\nUploading to Azure storage as blob:\n\t', blobName);
        // Upload data to the blob
        const data = 'Hello test';
        const uploadBlobResponse = await blockBlobClient.upload(data, data.length);
        console.log("Blob was uploaded successfully. requestId: ", uploadBlobResponse.requestId);
    });

to:

  form.parse(req, async function (err, fields, files) {
    const file = files.file;
    const blobName = 'test' + uuidv1() + files.file;
    const contentType = file.type;
    const filePath = file.path;//This is where you get the file path.
    const blockBlobClient = containerClient.getBlockBlobClient(blobName);
    const uploadBlobResponse = await blockBlobClient.uploadFile(filePath);
  });

How to upload images and files to Azure Blob Node.js

1 Answers