Tengo un formulario de carga de imágenes que realiza una solicitud de publicación a un punto final/carga del nodo. Allí, mi app.js solicita una variable de archivo del formulario y luego (usando Multer) empuja ese archivo a un directorio de cargas especial.
<form id="form" action="/upload" method="POST" enctype="multipart/form-data" > // when formBtn is changed (file selected) declare file var and submit formBtn.addEventListener("change", function () { // file that is requested in app.js const file = this.files[0]; form.submit() }); Estoy tratando de agregar la funcionalidad de arrastrar y soltar. En Body, agregué <body ondrop="dragHandler(event);"> que llama a la función dragHandler ondrop y pasa al evento. La función dragHander() evita la acción predeterminada (abrir una imagen en el navegador), verifica que lo que se soltó era un archivo, define el archivo y envía el formulario.
function dragHandler(event) { var file; event.preventDefault(); if (event.dataTransfer.items) { if (event.dataTransfer.items[0].kind == "file") { file = event.dataTransfer.items[0].getAsFile(); form.submit; } else console.log('not a file'); }Debido a que el archivo colocado no se cargó en el formulario, la solicitud de publicación (realizada por el formulario) no contiene la variable de archivo y no devuelve esa información a app.js. ¿Cómo podría insertar mi variable de archivo (en dragHandler) en el formulario para que pueda transferirse correctamente a app.js?
aplicación.js:
app.post("/upload", (req, res, next) => { upload(req, res, (err) => { if (err) { console.log("err: " + err); } else { // req.file is undefined when dropped in if (req.file == undefined) { console.log("file is not defined"); } else { console.log(req.file); } } }); });