In this article we are going to discuss about showing a preview image while uploading. This can be achieved by using very less code. Let's check below example
Preview image while uploading
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<div>'
+ '<input type="file" (change)="showPreviewImage($event)">'
+ '<img [src]="localUrl" *ngIf="localUrl" class="imgPlaceholder">'
+ '</div>',
})
export class AppComponent {
localUrl: any[];
constructor() { }
showPreviewImage(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (event: any) => {
this.localUrl = event.target.result;
}
reader.readAsDataURL(event.target.files[0]);
}
}
}
While clicking on showPreviewImage method we are taking the selected image url and assigning to localUrl. We can a show a preview image and upload the selected file/image to backend as well. Check this link for that: - File upload and send data to backend. Here I have used *ngIf to hide the preview image section until it is available. You can do more things using Angular 4 ngIf. Check the difference between Angular 2 ngIf and Angular 4 ngIf here.
We are done. You can use css to improve the look and feel. In this article we have discussed about showing a preview image while uploading.
Related Info
1. File/Image upload validation- Angular 4
2. File/Image upload and send data to backend
3. Rating star component - Angular 4
4. Date filtering and formatting - Angular 4
how would I turn this into a multiple image field with multiple previews?
ReplyDeleteYes that is possible, but I haven't yet written about it.
DeleteIs there any way to rotate the image to vertical without using css?
ReplyDeletehow to adjust size of the image?
ReplyDelete