how to show complete image after uploading in angular code example
Example 1: angular image upload
<label class="image-upload-container btn btn-bwm">
<span>Select Image</span>
<input #imageInput
type="file"
accept="image/*"
(change)="processFile(imageInput)">
</label>
Example 2: angular image upload
class ImageSnippet {
constructor(public src: string, public file: File) {}
}
@Component({
selector: 'bwm-image-upload',
templateUrl: 'image-upload.component.html',
styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {
selectedFile: ImageSnippet;
constructor(private imageService: ImageService){}
processFile(imageInput: any) {
const file: File = imageInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event: any) => {
this.selectedFile = new ImageSnippet(event.target.result, file);
this.imageService.uploadImage(this.selectedFile.file).subscribe(
(res) => {
},
(err) => {
})
});
reader.readAsDataURL(file);
}
}