1<label class="image-upload-container btn btn-bwm">
2 <span>Select Image</span>
3 <input #imageInput
4 type="file"
5 accept="image/*"
6 (change)="processFile(imageInput)">
7</label>
1postFile(fileToUpload: File): Observable<boolean> {
2 const endpoint = 'your-destination-url';
3 const formData: FormData = new FormData();
4 formData.append('fileKey', fileToUpload, fileToUpload.name);
5 return this.httpClient
6 .post(endpoint, formData, { headers: yourHeadersConfig })
7 .map(() => { return true; })
8 .catch((e) => this.handleError(e));
9}
1class ImageSnippet {
2 constructor(public src: string, public file: File) {}
3}
4
5@Component({
6 selector: 'bwm-image-upload',
7 templateUrl: 'image-upload.component.html',
8 styleUrls: ['image-upload.component.scss']
9})
10export class ImageUploadComponent {
11
12 selectedFile: ImageSnippet;
13
14 constructor(private imageService: ImageService){}
15
16 processFile(imageInput: any) {
17 const file: File = imageInput.files[0];
18 const reader = new FileReader();
19
20 reader.addEventListener('load', (event: any) => {
21
22 this.selectedFile = new ImageSnippet(event.target.result, file);
23
24 this.imageService.uploadImage(this.selectedFile.file).subscribe(
25 (res) => {
26
27 },
28 (err) => {
29
30 })
31 });
32
33 reader.readAsDataURL(file);
34 }
35}