How to Upload Image From NativeScript App to Azure Blob Storage
In todays blog we will see how we can upload an image from NativeScript mobile app using nativescript-camera plugin and upload the image to Azure Blob Storage.
First we need to have a Azure Subscription to create a storage account. If you are not having Azure Subscription you can create Azure Subscription for free .
Once we have the Subscription we can access the Azure Portal and create a storage account.
With Azure Storage Account we can create Blobs, Queues, Tables and File Shares. For our example we are going to use the Blob Service. In order to use Azure Blob Service we would need to create a container. We would need to select the Public Access Level as Container.
After creation of container, we need to assign a Access Policy for our container with allowed permissions.
The next step is to create a Shared Access Signature for our Blob Service. This would provide us with the blob service url, with signatures which we would require to access from our mobile app. This way we can manage the access to the Blob Storage. The signatures which are generated will be valid only until the Start and End Date selected as part of the generation process.
Once we click Generate SAS and connection string, we will be provided with a list of urls. For our scenario we need to grab the Blob Service url.
https://testbasfileupload.blob.core.windows.net/?sv=2017-11-09&ss=bfqt&srt=sco&sp=rwdlacup&se=2018-10-11T03:21:12Z&st=2018-10-10T19:21:12Z&spr=https&sig=EJpm3xlSqmIQy%2BT%2Bx3t5ZIKI18A7%2Fde3Kb9EXuxQDg8%3D
Using the above we can construct the url which is required to be mentioned in our mobile application.
https://testbasfileupload.blob.core.windows.net/testcontainers/myblob/’+this.picName+”?sv=2017-11-09&ss=bfqt&srt=sco&sp=rwdlacup&se=2018-10-11T03:21:12Z&st=2018-10-10T19:21:12Z&spr=https&sig=EJpm3xlSqmIQy%2BT%2Bx3t5ZIKI18A7%2Fde3Kb9EXuxQDg8%3D”
The above url contains the container name and the blob folder as “myblob”. The image captured using “nativescript-camera” will be assigned a unique picture name in our application using the Data and Time.
//Generating Unique Image Name Using Time. vard=newDate(); vart=d.getTime(); this.picName="Upload"+t.toString()+".jpg";
We will be using the “nativescript-background-http” plugin to upload the image captured in the device to Azure Blob Storage by using the PUT operation of above Blob Service Url.
Below is the code snippet to create the request format.
const bghttp = require("nativescript-background-http");
constsession=bghttp.session("file-upload");
//url should have the blob url with container name and blob name along with image name.
//Query string should have the key generated from SAS from Azure Blob Storage Url
constrequest =
{
url:"Blob Service url with SAS Signature",
method:"PUT",
headers:
{
'cache-control':'no-cache',
'x-ms-blob-content-disposition':'attachment;',
'x-ms-meta-m2':'v2',
'x-ms-meta-m1':'v1',
'x-ms-blob-type':'BlockBlob',
'Content-Type':'application/octet-stream',
'File-Name' :this.picName,
'x-ms-date':'2018-10-10', //Provide date
'x-ms-version':'2018-03-28'
},
description:"{ 'uploading': '"+this.picName+"' }"
};
consttask=session.uploadFile(this.picture, request);
task.on("complete", (event) => {
console.log("Uploaded `"+this.picture+"`");
});
task.on("error", event=> {
console.log(event);
console.log("Could not upload `"+this.picture+"`. "+event.eventName);
});
In order to post request to Azure Blob Storage we need to pass the headers in the request as per the above code snippet. These are mandatory required parameters on a minimum.
More details about Azure Blob Service PUT url can be found here.
We can find the code in the below github repository.
The sample has been tested in Android Emulator. Minor changes would be required to make the sample work in IOS. Details of changes can be found in the NPM nativescript-camera documentation.
We can find more details about nativescript-camera in below links.
NPM nativescript-camera Documentation
This post has been inspired by the following code sample taken from NativeScript – MarketPlace sample – Using Camera to take a Picture by Shiva Prasad.
Happy Reading !!!
Feel free to post your comments.
baskarrao.wordpress.com 