Day -3 NativeScript Post Series

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.

Storage1

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.

Storage3

After creation of container, we need to assign a Access Policy for our container with allowed permissions.

Storage4

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.

Storage2

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.

NativeScript- Docs

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s