Tengo una pregunta sobre el módulo react-file-drop . Puede ver una demostración de este módulo funcionando aquí . También le proporciono el código de muestra importante aquí:
import React from 'react'; import { FileDrop } from 'react-file-drop'; import './Demo.css'; export const Demo = () => { const styles = { border: '1px solid black', width: 600, color: 'black', padding: 20 }; return ( <div> <h1>React File Drop demo</h1> <div style={styles}> <FileDrop onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)} onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)} onFrameDrop={(event) => console.log('onFrameDrop', event)} onDragOver={(event) => console.log('onDragOver', event)} onDragLeave={(event) => console.log('onDragLeave', event)} onDrop={(files, event) => console.log('onDrop!', files, event)} > Drop some files here! </FileDrop> </div> </div> ); }; El problema al que me enfrento actualmente es que no sé cómo filtrar los datos de entrada que coloco en el contenedor. Por ejemplo, deseo que el módulo solo acepte datos .csv o .jpeg y todo lo demás sea denegado. ¿Crees que hay una manera de archivar esto y si es así, cómo?
Debería poder manejar eso en la devolución de llamada onDrop:
onDrop={(files, event) => { const csvFiles = files.filter(file => file.name.endsWith('.csv')); console.log('onDrop!', csvFiles, event); }}Puede validar los archivos en la función onDrop.
export const Demo = () => { const styles = { border: '1px solid black', width: 600, color: 'black', padding: 20, } const onDrop = (files, event) => { if (files[0].type !== 'text/csv' || files[0].type !== 'image/jpeg') { alert('Only CSV and JPEG files are allowed') return } // do something with the file } return ( <div> <h1>React File Drop demo</h1> <div style={styles}> <FileDrop onDrop={onDrop}>Drop some files here!</FileDrop> </div> </div> ) }Para varios archivos, puede crear una matriz de tipos de archivos permitidos y verificar si algunos de los tipos de archivos no están en la matriz de tipos permitidos.