Estoy tratando de codificar una carga de arrastrar y soltar, pero no llego a ninguna parte con el mecanografiado de reacción. Tengo un ejemplo de trabajo, pero el problema está en las herramientas de desarrollo de Google, no muestra ningún archivo.

Aquí está el código

 import { IoCloseSharp, IoChevronForward } from "react-icons/io5"; import { GoCloudUpload } from "react-icons/go"; import { DragEvent, SyntheticEvent } from "react"; type props = { onClose: any; }; const AccountActionsModal = ({ onClose }: props) => { const onDropFile = (e: DragEvent) => { e.preventDefault(); const f = e.dataTransfer as DataTransfer console.log(f.files); }; return ( <> <form> <div className="AAFileInput"> <label htmlFor="Picture" id="AAFileUpload" onDrop={onDropFile} onDragOver={(e) => { e.preventDefault(); }} onDragEnter={(e) => { e.preventDefault(); }} > <GoCloudUpload size={40} /> <br /> Upload File <br /> <span style={{ color: "grey" }}>Drag and Drop</span> </label> <input type="file" name="Picture" id="Picture" /> </div> </form> </> ); }; export default AccountActionsModal;

Puede ver que registro la lista de archivos, pero no hay archivos en la consola. Muestra 0. He buscado respuestas, algunos dicen que se trata de un error en las herramientas de desarrollo. porque cuando registro solo el evento, también muestra 0 archivos.

 FileList {length: 0}

Por favor, ayúdame a resolver esto.