Uploading multiple images using angular and send them to api - html

Question

im using angular as front-end and trying to upload 2 images and then send them as a string to OCR API,
here is my code
let reader:FileReader = new FileReader();
let image = new Image();
var file;
for (var i = 0; i < imgFile.target.files.length; i++){
file = imgFile.target.files[i]
reader.onload = (e: any) => {
image.src = e.target.result;
image.onload = rs => {
//console.log(reader.result);
this.fileString = image.src;
};
};
reader.readAsDataURL(file)
}
the problem is I cant send the files to the API , as I don't know how to get the image data as a string to send them together
what can I do?

Answer 1

Plenty of examples, but you need an upload service with the correct Backend URL to the API, this one can do any file type. Just filter out the file type you dont want in the upload function
POST /upload Upload a file
GET /files Get a list of files
GET /files/[filename] Download a file
src/app/upload.service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class UploadService {
private serverUrl = 'http://localhost:8080';
constructor(private httpClient: HttpClient) { }
upload(file: File): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append('file', file);
const request = new HttpRequest('POST', `${this.serverUrl}/upload`, formData, {
reportProgress: true,
responseType: 'json'
});
return this.httpClient.request(request);
}
getFiles(): Observable<any> {
return this.httpClient.get(`${this.serverUrl}/files`);
}
}
Create and MultiImageUploadComponent.ts
import { Component, OnInit } from '#angular/core';
import { UploadService } from 'src/app/upload.service';
import { HttpEventType, HttpResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
export class UploadComponent implements OnInit {
selectedFiles: FileList;
progressInfos = [];
message = '';
fileInfos: Observable<any>;
constructor(private uploadService: UploadService) { }
}
ngOnInit(): void {
this.fileInfos = this.uploadService.getFiles();
}
selectFiles(e): void {
this.progressInfos = [];
this.selectedFiles = e.target.files;
}
uploadFiles(): void {
this.message = '';
for (let i = 0; i < this.selectedFiles.length; i++) {
this.upload(i, this.selectedFiles[i]);
}
}
upload(idx, file): void {
this.progressInfos[idx] = { value: 0, fileName: file.name };
this.uploadService.upload(file).subscribe(
event => {
if (event.type === HttpEventType.UploadProgress) {
this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.fileInfos = this.uploadService.getFiles();
}
},
err => {
this.progressInfos[idx].value = 0;
this.message = 'Could not upload the file:' + file.name;
});
}
your HTML template
<div *ngFor="let progressInfo of progressInfos" class="mb-2">
<span>{{ progressInfo.fileName }}</span>
<div class="progress">
<div
class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
attr.aria-valuenow="{{ progressInfo.value }}"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: progressInfo.value + '%' }"
>
{{ progressInfo.value }}%
</div>
</div>
</div>
<label class="btn btn-default">
<input type="file" multiple (change)="selectFiles($event)" />
</label>
<button
class="btn btn-success"
[disabled]="!selectedFiles"
(click)="uploadFiles()">
Upload
</button>
<div class="alert alert-light" role="alert">{{ message }}</div>
<div class="card">
<div class="card-header">List of Files</div>
<ul
class="list-group list-group-flush"
*ngFor="let file of fileInfos | async"
>
<li class="list-group-item">
{{ file.name }}
</li>
</ul>
</div>
You can call it like so from your app, where <app-upload> is your directive/component above
<h1>{{ title }}</h1>
<div class="container">
<app-upload></app-upload>
</div>
Make sure the OCR API is wired up to the services to invoke & POST