CODEWITHSUNDEEP
javascriptnode.js
rottenCoderSo
rottenCoderSo

Reputation: 151

Formidable file upload is uploading the file

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:

  1. Create a new folder
  2. cd into that folder
  3. Open a terminal and copy&paste this npm init -y
  4. copy&paste npm install express formidable
  5. Create app.js and paste this code
var 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);
  1. create 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>
  1. Go to http://localhost:3000/ and try it out

You'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.

Upvotes: 2

Views: 2511

Answers (1)

rottenCoderSo
rottenCoderSo

Reputation: 151

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.

Upvotes: 2

Related Questions