I've been trying to make this work since yesterday and yet I cannot find a guide/tutorial that either I can follow or that works.
I'm trying this guide https://medium.com/@ShiyaLuo/simple-file-upload-with-express-js-and-formidable-in-node-js-d734d248d615 but when I hit the upload button nothing happens. I'll resume the steps:
npm init -ynpm install express formidableapp.js and paste this codevar express = require('express');
var formidable = require('formidable');
var app = express();
app.get('/', function (req, res){
res.sendFile(__dirname + '/index.html');
});
app.post('/', function (req, res){
var form = new formidable.IncomingForm();
form.parse(req);
form.on('fileBegin', function (name, file){
file.path = __dirname + '/uploads/' + file.name;
});
form.on('file', function (name, file){
console.log('Uploaded ' + file.name);
});
res.sendFile(__dirname + '/index.html');
});
app.listen(3000);
index.html and copy&paste this code<!DOCTYPE html>
<html>
<head>
<title>Simple Upload Example</title>
</head>
<body>
<form action="/" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple>
<input type="submit" value="Upload">
</form>
</body>
</html>
http://localhost:3000/ and try it outYou'll see the input file and the upload button, once you select the file(.jpg) you click the button and what's supose to happen is to upload the file in the upload folder but it doesn't happen, is it just me or something is missing there? because that's pretty much the same code you'll find in many sites and youtube tutorials.
I found the solution, I learned that you had to replace the current filepath value with the new one in the File Object, which is given by file.path = __dirname + '/uploads/' + file.name; but here's the problem, the name of the variable was filepath instead of path, and the name of the file was originalFilename instead of name, I'll show you, look at this:
form.on('fileBegin', function (name, file){
console.log(file)
file.path = __dirname + '/uploads/' + file.name;
});
I took this from the original code above. Do you see that console.log(file) ? this is what it shows in console:
PersistentFile {
_events: [Object: null prototype] { error: [Function (anonymous)] },
_eventsCount: 1,
_maxListeners: undefined,
lastModifiedDate: null,
filepath: 'C:\\Users\\CAMPES~1\\AppData\\Local\\Temp\\826f34463d178155ab6434e00',
newFilename: '826f34463d178155ab6434e00',
originalFilename: 'aaa.jpeg',
mimetype: 'image/jpeg',
hashAlgorithm: false,
size: 0,
_writeStream: null,
hash: null,
[Symbol(kCapture)]: false
}
We can see the name of the variables are filepath and originalFilename, so the portion of the code above must look like this
form.on('fileBegin', function (name, file){
file.filepath = __dirname + '/uploads/' + file.originalFilename;
});
And the rest of the code remains the same and that's it, I'm not sure whether this thread should be deleted, but I'll leave this here just in case someone needs it.