He implementado con éxito la adición de múltiples imágenes haciendo clic en el botón del browser button . Mi problema es cuando quería arrastrar imagen/imágenes. Abre una nueva pestaña. ¿Cómo evito que se abra? Ya puse e.preventDefault() pero aún se está abriendo.
Codesandbox está aquí HAGA CLIC AQUÍ
<Paper elevation={4} className={classes.mainContainer}> <div className={classes.dropzone} style={{ border: "2px dashed #000000" }} onDragOver={(e) => e.preventDefault()} onDrop={(e) => uploadImage(e.currentTarget.files)} > <div> </div> <div> <h3 className={classes.dragHereText}>Drag & Drop Images here</h3> <p className={classes.or}>or</p> <Button size="small" variant="contained" component="label" color="primary" > <input type="file" accept="image/*" multiple className={classes.uploadInput} onChange={(e) => uploadImage(e.currentTarget.files)} /> Browse files </Button> </div> </div> </Paper>En primer lugar, también debe evitar el incumplimiento en el controlador onDrop. Además, el evento de onDrop es diferente del evento onChange, por lo que deberá manejarlo de manera diferente. Aquí hay un ejemplo:
const handleDrop = (e) => { // Note: preventDefault is on nativeEvent e.nativeEvent.preventDefault() if (!e) return; // Note: files are under nativeEvent.dataTransfer const files = e.nativeEvent.dataTransfer.files; const fileList = Array.from(files); const images = fileList.map((image) => ({ imageName: image.name, imageFile: image })); console.log(images); };Y pasa el evento así:
<div className={classes.dropzone} style={{ border: "2px dashed #000000" }} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleDrop(e)} >Espero que la siguiente respuesta te ayude.
Verifique el siguiente código de sandbox, esta solución funciona bien para mí ...
solución de trabajo
https://codesandbox.io/s/react-hook-form-materialui-forked-n6r5l?file=/src/App.js