Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

848
Views
How can I send multiple blob files as FormData from Angular to backend (python flask)?

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.

enter image description here

enter image description here

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

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);
}));
}
about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!