Uploading files to Azure cloud server via API in JavaScript

We can upload files to the Azure server through API ‘PUT’ request in JavaScript. Follow the steps:

  1. Set up a remote server location in Azure Cloud Server. This can be done through the ‘Microsoft Azure Storage Explorer’ application by creating a blob container.
  2. Generate the upload link with the authorization parameter for the ‘Blob container’.
  3. In the javascript code import the ‘axios’ library to send the ‘POST’ request to the Azure server.
  4. A successful file upload will return the status ‘201’. Refer to the following code for file upload:
import axios from 'axios';
..........
let baseUploadURL = "https://a3files.blob.core.windows.net/"
let urlPath = baseUploadURL + "?sv=2021....";//Add Authorization Parameters
let headers =
    {
        'x-ms-blob-content-type': fileType,
        'x-ms-blob-type': 'BlockBlob',
        'x-ms-meta-uploadedby': userId,// Optional
        'x-ms-meta-related_record_id': relatedJobRecordId,// Optional
        'x-ms-meta-appversion': appVersion,// Optional
    };
await axios.put(urlPath, files[i], {headers}).then(res => { // Storing file content as binary in file[i]
    console.log("Response", res);
    if (res.status === 201) {//Status: Created
        console.log("Successfully uploaded the file");
    }
}).catch(res => {
    console.log("ERR", res);
    alert("File upload failed. Please try uploading file again\n" + res);
});

Leave a comment

Your email address will not be published. Required fields are marked *