In my case , I got only last photo from form data. I want all photos to send backend.
my.ts.component file,
await Promise.all(blobUrls.map(async (blobUrl) => {
const blob = await fetch(blobUrl).then(fetched => fetched.blob());
this.formData = new FormData();
this.formData.append('file', blob);
}));
const { url } = await this.service.uploadFile(this.clientId, this.formData, uuidv4())
.toPromise().catch(err => {
this.cliApiService.handleErrorMessage(err);
throw err;
});
In service.ts,
uploadFile(client_id: string, formData, filename: string): Observable<any> {
const options = this.generateFormOption(true);
const queryUri = `${this.apiEndpoint}${this.apiPath}/storage/upload/${client_id}/${filename}`;
return this.http.post<any[]>(queryUri, formData, options);
}
In flask,
storage_image_file_request.add_argument('file', location='files', required=True)
class ImageUploadResource(BaseResource):
@ns_storage.marshal_with(storage_image_url_message)
def post(self, client_id: str, filename: str):
args = storage_image_file_request.parse_args()
files = args.get('file')
I want to send all formData, and also want to fetch all formData in flask. Now ,I get only one photo even I upload two photos.
By declaring like this can solve my problem.
export class myComponent implements OnInit {
formData = new FormData();
await Promise.all(blobUrls.map(async (blobUrl) => {
const blob = await fetch(blobUrl).then(fetched => fetched.blob());
this.formData.append('file', blob);
}));
}