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

 

<input type=”file”>

 

Add the Event,

 

<input type=”file” (change)=”onFileUpload($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.

 

export class AppComonent {
onFileUpload(event){
Const file = event.target.files[0]
}
}

 

 

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,

 

<input style=”display: none” type=”file” (change)=”onFileUpload($event)” #selectFile>
<button (click)=”selectFile.click()”>Select File</button>

 

“#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.

 

<input style=”display: none” type=”file” (change)=”onFileUpload($event)” #selectFile>
<button (click)=”selectFile.click()”>Select File</button>
<button (click)=”OnUploadFile()”>Upload</button>

 

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

 

<div class=”image-preview” >
<img [src]=”imagePreview” >
</div>

export class AppComonent {
selecetdFile : File;
imagePreview: string;

onFileUpload(event){
this.selecetdFile = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
this.imagePreview = reader.result;
};
reader.readAsDataURL(this.selecetdFile);
}
OnUploadFile() {
//Upload file here send a binary data
this.http.post(‘yourdomain.com/file-upload’, this.selectedFile)
.subscribe(…);
}
}

 

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

 

 Quote - Banner-Blog

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

 

export class AppComonent {
selecetdFile : File;
onFileUpload(event){
this.selecetdFile = event.target.files[0];
}
OnUploadFile() {
//Upload file here send a binary data
this.http.post(‘yourdomain.com/file-upload’, this.selectedFile)
.subscribe(…);
}
}

 

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

 

OnUploadFile() {
//Upload file here send a Form data
const uploadFormData = new FormData();
uploadData.append(‘myFile’, this.selectedFile, this.selectedFile.name);
this.http.post(”yourdomain.com/file-upload’, uploadFormData)
.subscribe(…);
}

 

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  info@agiratech.com. 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 info@agiratech.com