How To Upload Image In Angular Using Typescript
Angular Web Development

Image Upload In Angular Using Typescript

Upload image in Anguar. Most of the people might be familiar with the topic and some might think what is there look up on the familiar topic since we have been using various third party packages to get it done but the question is how we can implement it without using Third party packages? To obtain this, Fortunately, This blog is aimed to serve about the file or image uploading process using Typescript and without depending on the third party packages.

Basically, we all know the basic steps for uploading images in all the programming languages. From the same track, Listing down the three primary steps for uploading.

  • Upload a file
  • Preview the image
  • Send the selected file to the server or save to the specific folder


Upload A File

The following HTML element will help to select a file from your browser folder


Add the Event,


With this dom element $event will initialize the selected file, Now In the Typescript file(app.ts), we could get the access to the file by using the following function.


As you wish, either you can send the selected file to the server or save to the particular folder

As of now, many developers will prefer to hide the input file element by implement the following code so let’s see how to hide the input element first,


“#selectFile” is a reference variable to input file element. After clicking on the button, the input file will change the event and the action will get initiated.

You could also add one more button if you want to upload the selected file to the server. So, you can directly pass it to the server by using this below method.


Preview the image before sending to the server using File Render On Load.


Next, With the typescript file you can handle the upload process.


We can Send the Selected file to Server or any specified folder using HttpClient API.


If you want to send the Form data to server then use the following code,


Finally, the selected file has been uploaded to your server.

As the result, Your libraries will not hold excess amount of space while uploading files. In other hand, Some third party packages will have certain restrictions or protocols to follow whereas in typescript we were free from those limitations and we can easily achieve it with less effort.

You can also read about How to make Your Angular Application SEO Friendly Using Pre Render  and don’t forget to try these effective Tips To Optimize your Angular Application To Increase The Website Speed. 

For more angular related blogs check out our largest blog repository to get latest updates on Angular. For inquiries reach us via If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via

The following two tabs change content below.


An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

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

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call