Upload image in Angular. Most of the people might be familiar with the topic and some might think what is there look upon 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 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 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 implementing 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 the 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 it 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.

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 a result, Your libraries will not hold an excessive amount of space while uploading files. On the 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.
For more angular related blogs check out our largest blog repository to get the 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 the best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web application development to meet your business requirements. For any queries reach us via info@agiratech.com