angular image upload

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}