Node.js Express Upload Image using Express-FileUpload Module

by

Nodejs express image file upload example; In thi tutorial,i am going to show you how to upload image and file in node js express using npm express-fileupload library.

express-fileupload is one of those simple express middleware available as an npm package. In this tutorial, you will learn how to handle file uploads with Node.js and Express backend and store uploaded files on the server using express-fileupload.

Upload Image using Express-FileUpload in Node.js Express Example

  • Step 1 – Create New Node Js Application
  • Step 2 – Install Express and FileUpload Library
  • Step 3 – Create index.js file
  • Step 4 – Create HTML Markup File Upload
  • Step 5 – Run Node js Express Image File Upload App

Step 1 – Create New Node Js Application

Open your command prompt and execute the following command on it to create a new node js application:

mkdir my-app
cd my-app
npm init

Step 2 – Install Express and FileUpload Library

Install express and fileupload library into your node js express application by executing the following command on command prompt:

npm i express express-fileupload
Recommended:-Angular 12 CRUD + Node.js Express + MongoDB Example

Step 3 – Create index.js file and Import Libraries

Create index.js and import the above installed libararies. So visit your app root directory and create route for showing image upload and store image into directory, as shown below:

const express = require('express');
const fileUpload = require('express-fileupload');
const path = require('path');
const app = express();

app.use(fileUpload({
    useTempFiles : true,
    tempFileDir : path.join(__dirname,'tmp'),
}));

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

app.post('/upload', (req, res) => {
    
    if (!req.files || Object.keys(req.files).length === 0) {
        return res.status(400).send('No files were uploaded.');
    }

    // Accessing the file by the <input> File name="t_file"
    let targetFile = req.files.t_file;

    //mv(path, CB function(err))
    targetFile.mv(path.join(__dirname, 'uploads', targetFile.name), (err) => {
        if (err)
            return res.status(500).send(err);
        res.send('File uploaded!');
    });
  
});

app.listen(3000, () => console.log('Your app listening on port 3000'));

The express-fileuplaod module object req.files.foo will contain the following:

  • req.files.foo.name: “car.jpg”
  • req.files.foo.mv: A function to move the file elsewhere on your server. Can take a callback or return a promise.
  • req.files.foo.mimetype: The mimetype of your file
  • req.files.foo.data: A buffer representation of your file, returns empty buffer in case useTempFiles option was set to true.
  • req.files.foo.tempFilePath: A path to the temporary file in case useTempFiles option was set to true.
  • req.files.foo.truncated: A boolean that represents if the file is over the size limit
  • req.files.foo.size: Uploaded size in bytes
  • req.files.foo.md5: MD5 checksum of the uploaded file
Recommended:-Angular 12 + Node js Express + MySQL CRUD Example

Step 4 – Create HTML Markup File Upload

Create html markup for file upload form; so visit your app root directory and create create file-upload.html file and add the following code into it:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <title>Node js EXPRESS Image Upload Tutorial</title>

  <style>
    .custom-file-input.selected:lang(en)::after {
      content: "" !important;
    }

    .custom-file {
      overflow: hidden;
    }

    .custom-file-input {
      white-space: nowrap;
    }
  </style>
</head>

<body>

  <div class="container">
   <form action="upload" method="POST" enctype="multipart/form-data">
    <div class="input-group">
      <div class="custom-file">
        <input type="file" class="custom-file-input" name="t_file" id="customFileInput" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select file</label>
      </div>
      <div class="input-group-append">
         <input type="submit" class="btn btn-primary" value="Upload">
      </div>
    </div>
    </form>
  </div>
</body>

</html>

Step 5 – Run Node js Express File Upload App

Open your command prompt and execute the following command to run node js express file upload application:

//run the below command

node index.js

Conclusion

Node js image file upload example tutorial; you have learned how to upload image file in node js express app using fileupload npm module.

Leave a Comment