0
141
ViewsArchivos de carga múltiple de React-dropzone que se combinan con metadatos adicionales
Mi objetivo es crear un módulo de carga así: 
Quiero cargar varios archivos con metadatos adicionales. si el tipo de archivo es una factura, también quiero adjuntar los resultados del selector de fechas. de lo contrario, solo archivo y su tipo. Además, quiero eliminar cada uno con el botón.
Intento hacer ese trabajo con este código: https://codesandbox.io/s/multi-upload-problem-3ofbk?file=/src/App.js
No puedo adjuntar las propiedades 'tipo' y 'seleccionador de fecha' al archivo, porque las asigné en otro componente para tener diferentes estados para cada entrada.
en lugar de obtener una matriz de objetos como este:
[ { File: { path: 'file1.jpg', name: 'file1.jpg', lastModified: '123123123', lastModifiedDate: '231312312', size: 123123123, type: 'image/jpeg', }, type_of_file: { docTypeSelect: 'invoice' }, date_of_file: { invoiceDateInput: [ 'Tue Sep 07 2021 18:05:47 GMT+0400', 'Fri Sep 10 2021 00:00:00 GMT+0400', ], }, }, { File: { path: 'file2.jpg', name: 'file2.jpg', lastModified: '123123123', lastModifiedDate: '231312312', size: 123123123, type: 'image/jpeg', }, type_of_file: { docTypeSelect: 'other' }, date_of_file: null, }, { File: { path: 'file3.jpg', name: 'file3.jpg', lastModified: '123123123', lastModifiedDate: '231312312', size: 123123123, type: 'image/jpeg', }, type_of_file: { docTypeSelect: 'image' }, date_of_file: null, }, ];todo registrandose aparte el uno del otro. ¿Cómo puedo resolver este problema y registrar todo como una matriz antes de enviarlo al backend? Mi mente está totalmente confundida con este problema :/ gracias de antemano.
1 answers
Answer question0
Tuve la oportunidad de hacer clic en su código, y parece que la complejidad se debe a que el componente FileList está separado de su componente Dropzone , y es un poco complicado intentar fusionar los datos de los dos componentes, a pesar de que tienen datos superpuestos. .
Si es posible, consideraría rediseñar como un componente. Aquí hay un borrador de código de cómo podría hacerlo.
const App.tsx = () =>{ return <FileList onFilesChanged=((listOfAllFiles) => console.log(listOfAllFiles)) /> } const FileList = (onFilesChanged) =>{ // regular File Objects const [uploadedFiles, setUploadedFiles] = useState([]); // your file metadata as a map const [fileDetailsList, uploadedFiles] = useState({}); const onDropDownChange = (fileId, value) => { // add the metadata in your map fileDetailsList[fileId].dropdownValue = value; } const onFinalUpload = () => { const allFiles = []; for(const file of files){ // get the metadata from the map const metadata = fileDetailsList[file.id]; const fileDetails = {file, ...metadata} // push the larger object allFiles.push(fileDetails); } // notify the parent component with all of our merged changes onFilesChanged(allFiles) } return ( <div> {/* React dropzone code*/} <input type="file" onFileUpload=((file)=>setUploadedFiles(uploadedFiles.concat(file)))/> <uploadedFiles.map((file)=>{ <p>{file.name} </p> <dropdown onDropdownChange=(file)/> }) <Button onClick={onFinalUpload}/> </div> ) }