Upload Files In NodeJS Express (Very Simple Example)

Welcome to a quick tutorial on how to upload files in NodeJS Express. So you may have just started with Express, and wondering how to handle file uploads? Well, it really isn’t too difficult, here is a very simple example – Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

QUICK SETUP

Run npm i express express-fileupload to install the required modules, and create an uploads folder.

 

 

PART 1) EXPRESS SERVER

// (A) INITIALIZE
// (A1) LOAD REQUIRED MODULES
const path = require("path"),
      express = require("express"),
      fileUpload = require("express-fileupload");

// (A2) EXPRESS + MIDDLEWARE
// https://www.npmjs.com/package/express-fileupload
const app = express();
app.use(fileUpload());
 
// (B) EXPRESS HTTP
// (B1) UPLOAD PAGE
app.get("/", (req, res) => res.sendFile(path.join(__dirname, "/2-upload.html")));
 
// (B3) MANAGE UPLOAD
app.post("/upload", (req, res) => {
  // (B3-1) UPLOADED FILE & DESTINATION
  let upfile = req.files.upfile,
      updest = __dirname + "/uploads/" + upfile.name;
 
  // (B3-2) MOVE UPLOADED FILE
  upfile.mv(updest, err => {
    if (err) { return res.status(500).send(err); }
    res.send("File uploaded!");
  });
});
 
// (C) GO!
app.listen(80);

Yes, that is all we require on the NodeJS script.

1. Self-explanatory. We are just loading the required modules, and setting Express to use the file upload module.
2. Define / to serve the HTML file upload form, and /upload to handle the file upload itself.
3. Don’t think this needs any explanation.

 

 

PART 2) HTML UPLOAD FORM

<form action="http://localhost/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="upfile" required>
  <input type="submit" value="Upload!">
</form>

Finally, this should not require any explanation either – It’s just your “regular HTML upload form”.

 

 

RESTRICTING FILE TYPES

<input type="file" name="upfile" accept="image/*" required>

In the HTML, we can easily impose an accept="FILE TYPE" restriction.

// ALLOWED FILE TYPES
const allowed = ["image/jpeg", "image/png", "image/gif"];
 
// SAVE UPLOAD ONLY IF ALLOWED FILE TYPE
if (console.log(allowed.includes(upfile.mimetype))) {
  upfile.mv(...);
} else { res.send("NOPE"); }

But the HTML file type restrictions are not reliable – Anyone who knows how to work with the developer’s console can easily mess with it. So, it’s still safer to implement checks on the server side.

 

 

LINKS & REFERENCES

• How to upload files in Node.js and Express – Atta
• Express File Upload – NPM
• Upload Files Into Database – Code Boxx