I have an image upload form that makes a post request to a node endpoint /upload. There, my app.js requests a file variable from the form and then logs file to console.
<form
id="form"
action="/upload"
method="POST"
enctype="multipart/form-data"
> // when formBtn is changed (file selected) declare file var (for different functionality, not related to upload process) and submit
formBtn.addEventListener("change", function () {
const file = this.files[0];
form.submit()
}); I am trying to add drag and drop functionality. On Body I added <body ondrop="dragHandler(event);"> which calls function dragHandler ondrop and passes in event. Function dragHander() prevents default action (opening image in browser), verifies that what was dropped was a file, defines file, and submits the form.
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');
} Because the dropped in file was not uploaded to the form, the post request (made by the form) does not contain the file and does not pass that information back to app.js. How would I be able to push my file variable (in dragHandler) into the form so it could be properly transferred to app.js?
app.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);
}
}
});
}); 