Uploading an image using Angular

Reading Time: 2 minutes

Hi Everyone,

From the day I started writing the code of How to upload files using Angularjs and spring mvc, many started asking me to write up for uploading in Angular ( Don’t call it as Angular 2, Angular 4 etc. Its just called Angular ). So I am writing this post of uploading an image using Angular. I am going through here like how to upload a blob object here.

Lets start…

Before going in detail, lets ask ourself – what are the image sizes we will allow the user to upload? An image with 500MB size? Or an image with HD quality? If your requirement is any of the above then you should not upload those images as blob in your DB. Instead upload that in your server and store the end point in your database. But if you want a person to upload an image but no need of big size or high dimension images like a small thumbnail then creating a blob will be a good one.

Now we are on the point. We cant restrict a person to upload image of a particular width and particular height ( Sounds bad right!! ). We need to convert the image into the size we need. This can be done by the following simple Javascript code.

Now lets have a look at the javascript code.

We have 4 important functions here.

  1. init – Setting the output quality here. We are checking for output quality from user, if not present then making by default as 80% of original quality ( Hope it is a good one )
  2. photo – Will take the original file and read it a readAsDataURL. Its simply to fetch the file and create a data url for that particular file
  3. resize – Here we are creating a canvas and putting the image into it and then resizing the image to the output quality we mentioned. This will make it better than others.
  4. output – We are now converting the canvas to blob using this and passing it to the calling method

Now you are ready to create a blob file out of it. Now we need to know how to make use of the above resize.js file.

Here we are.. It is very simple than ever. In angular (2 and above don’t forget) do the following in your component.ts.

Note: Make sure you added the resize.js in your assets folder and given the reference to your angular-cli inside scripts array.

Now we need to just call this method from the html.

< input type="file" id="filePicker" (change)="handleFileSelect($event)" required >

Thus now we got a simple blob object which we can just save it in your database and render it inside [src] as needed.

A simple code to render the image from blob that we generated

< img [src]="img.src" alt={{img.caption}} >

here img.src will have blob url starting with data:image/jpg;base64

Thanks for watching this now you will know how to upload blob using angular. Comment when you get to know any more details. 🙂

Share this and subscribe us to get more example snippets in angular. 🙂


Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

You may also like...

Leave a Reply

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