Simple File Upload with Express.js and Multer in Node.js

A couple of years ago I wrote a blog post on how to upload a file with formidable. I had the chance to write the upload function again, and found multer to be much easier to use. Here’s another beginner example.

This example saves your file into the file system.

Read the multer documentation to do different kinds of uploads.

1. Setup

Install those modules into your Node project with

npm install --save express multer

2. Code

app.js

const express = require('express');
const multer = require('multer');
const upload = multer({
  dest: 'uploads/' // this saves your file into a directory called "uploads"
}); 

const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// It's very crucial that the file name matches the name attribute in your html
app.post('/', upload.single('file-to-upload'), (req, res) => {
  res.redirect('/');
});

app.listen(3000);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Multer Upload Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <form action="/" enctype="multipart/form-data" method="post">
      <input type="file" name="file-to-upload">
      <input type="submit" value="Upload">
    </form>  
  </body>
</html>

3. Run

Go to localhost:3000 to try it out.

23 thoughts on “Simple File Upload with Express.js and Multer in Node.js”

  1. Hello Shiya,

    I’m currently working on a project where I need to upload a file to a local directory and store it. I followed your tutorial in a separate project and it worked perfectly. I then tried incorporating it into my own project and I cannot seem to make it work. This is most likely due to the architecture of my project so I tried following the documentation on multer’s page and still have gotten no where. At this point, I am completely lost on where to go from here and was wondering if you could be of any help? I have a git repo for my project – I can send the URL if you are interested in helping. If not, I understand as you are probably very busy.

    Thanks,
    Aric

    Reply

        1. the main files to pay attention to would be server.js, public/partials/apply.html, public/app.js, directives/index.js. I believe those are the main relative files for it

          Reply

    2. Hey. This seems to be working for me.
      But after uploading a file to the local directory I want to upload that to my DB (MongoDB).

      For Uploading file to MongoDB, I’ve been using “csvtojson” module and it works fine with me.

      Now I want to perform both operations, i.e. to store a file in the local directory as well as DB.

      Separately they perform their operation great, but after combining it does not seems to be working. Can anyone here help me?

      Reply

  8. i used ur code but the problem ist in my application i can only upload pdf but in the case i can upload everything that i want how ich can manage it that only pdf are uploaded?

    Reply

  9. hi thanks for this, how would I use multer or formidable without express to send this file to another third party server rather than consume the file in my node.js ?

    I mean the code base in the project I’m working on already has another framework in place to talk to the end server and it needs the body to be a buffer or a string.

    Sorry for the beginner or concussing question, I’m really lost.

    Reply

  10. 2 days. 2 days of solid Google searching before I finally got a working prototype. I did start from searching for uploading from react to AWS S3; but now I have a better understanding to build on and learn from. Thank you!

    Reply

  14. Hi All,
    When i upload the file on local machine it works fine, But when i upload on server it uploaded, but not complete file.

    Reply

Leave a Reply to reza Cancel reply

Your email address will not be published.