Tengo un formulario para cargar imágenes y almacenarlas en localStorage con base64, luego mostrarlas en la página llamando al elemento. Cuando cargo las imágenes solo haciendo clic en la etiqueta (Ya que la entrada tiene un display none por CSS) TODO funciona perfectamente, el problema es cuando hago un onDrop, la consola me dice los siguientes errores:
Uncaught TypeError: Cannot read properties of undefined (reading '0')
si en el onDrop elimino el [0] de los e.target.files... obtengo el siguiente error
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
cuando el código es el siguiente:
// LOAD IMAGE FUNCTION const handleImage = (files) => { const fileReader = new FileReader(); fileReader.onloadend = () => { if (fileReader.readyState === 2) { setForm({ ...form, backdrop_path: fileReader.result }); } }; fileReader.readAsDataURL(files); setImage(true) return image }; // This function submits the form, it is the button function const onSubmit = (e) => { e.preventDefault(); const { title, backdrop_path } = form; if (title === '' || backdrop_path === '') return; const movie = { title, backdrop_path, }; localStorage.setItem('MyUploadedMovies', JSON.stringify(movie)); setFormComplete(true) }; //FUNCION REACT ONDROP const handleDragOver = (event) => { event.preventDefault() } const handleDrag = (evt) => { console.log(evt.currentTarget.id) } // This is the section that accepts the image in the form { image ? <ProgressBar/> : <div className='fileImgContainer' draggable={true} onDragOver={handleDragOver} onDragStart={handleDrag} onDrop={(e) => handleImage(e.target.files[0])} > <label htmlFor="imgfiles" className='fileImgLabel'> Agregá un archivo o arrastralo y soltalo aquí </label> <input className='fileImgInput' id='imgfiles' type='file' defaultValue='' accept='image/png,image/jpeg' onChange={(e) => handleImage(e.target.files[0])} /> </div> }Quiero aclarar que NO estoy usando NINGUNA biblioteca
const handleDrop = (ev) => { // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) for (let i = 0; i < ev.dataTransfer.items.length; i++) { // If dropped items aren't files, reject them if (ev.dataTransfer.items[i].kind === 'file') { const file = ev.dataTransfer.items[i].getAsFile(); handleImage(file) } } } else { // Use DataTransfer interface to access the file(s) for (let i = 0; i < ev.dataTransfer.files.length; i++) { handleImage(ev.dataTransfer.files[i]) } } }