Estoy tratando de hacer una carga de varias partes a AWS S3 desde mi interfaz React.JS con aws amplify.

Usando el marco Ionic v5.

Necesito subir hasta 150 imágenes a la vez.

Tengo aws amplificar configurado en mi archivo de configuración y archivo de índice.

Sigo recibiendo un error: Error: Unsupported body payload object

¿Cuál sería la causa de esto?

 import React, { useState, useEffect, useRef } from "react"; import { IonButton, IonButtons, IonInput, IonBackButton, IonContent, IonHeader, IonList, IonItem, IonItemGroup, IonLoading, IonItemDivider, IonLabel, IonPage, IonTitle, IonToolbar, IonAlert, IonRadio, IonRadioGroup, IonListHeader, IonSlide, IonSlides, IonIcon } from '@ionic/react'; import { LinkContainer } from "react-router-bootstrap"; import { API, Storage } from "aws-amplify"; function JobInfo(props) { const file = useRef(null); function handleFileChange(event) { file.current = event.target.files[0]; } async function handleSubmit(event) { event.preventDefault(); setShowLoading(true); try { const attachment = file.current const filename = `${job.JobId}-${file.name}`; const stored = await Storage.put(filename, file, { contentType: file.type }); return stored.key; } catch (e) { alert(e); } setShowLoading(false); } var centerText = {textAlign: "center"} let today = new Date().toDateString(); let start = new Date(date).toDateString(); return( <IonPage> <IonHeader> <IonToolbar> <IonButtons slot="start"> <IonBackButton/> </IonButtons> <IonTitle>Upload Images</IonTitle> </IonToolbar> </IonHeader> <IonContent className="ion-padding"> <div style={{display: "flex", justifyContent: 'center'}}> <IonItem> <IonInput name="file" multiple="true" id="file" type="file" onIonChange={(e) => handleFileChange}></IonInput> </IonItem> <IonButton expand="block" color="primary" strong="true" size="default" type="submit" onClick={handleSubmit} >Upload</IonButton> </div> <IonLoading isOpen={showLoading} onDidDismiss={() => setShowLoading(false)} message={'Please Wait...'} duration={6000} /> </IonContent> </IonPage> );