How To File Upload Using Node.js

WebSolutionStuff | Jul-26-2021 | Categories : Node.js

Hello Guys,

In this example, we will learn how to file upload using node.js. In this tutorial I will give you simple example of node js with express js file upload with multer. we can use Multer module for file uploading to the server. Multer is a node.js middleware which is used for handling multipart/form-data, which is mostly used library for uploading files.

Visit Multer Package : Install Multer Module

So, example of file upload in node js and express js using multer. let's start.

Step 1 : Create Node App

In this step create node application using below command

mkdir express_js_file_upload

cd express_js_file_upload

npm init

Read Also : Laravel 8 Google Bar Chart Example

Step 2 : Install Embedded JavaScript templates (ejs)

In this step we install ejs using below command

npm install ejs

Step 3 : Install express.js in App

Now install Express in the express_js_file_upload directory and save it in the dependencies list. For example:

$ npm install express --save

Step 4 : Install multer in App

In this step install multer using below command. Also you can visit the link Install multer module.

npm install multer

Read Also : Image Upload in Summernote Editor Using Laravel

Step 5 : Create File_upload_form.ejs

in this step create File_upload_form.ejs in views folder. and copy below code in the file.

<!DOCTYPE html>
<html>
<head>
	<title>How To File Upload Using Node.js - Websolutionstuff</title>
</head>
<body>
    <h1>How To File Upload Using Node.js - Websolutionstuff</h1>   
    <form action="/uploadFile" enctype="multipart/form-data" method="POST">      
        <span>Upload File: </span>  
        <input type="file" name="pic" required/> <br>
        <input type="submit" value="submit"> 
    </form>
</body>
</html>

Step 6 : Create index.js file

now create index.js file in your app directory. and copy below code in index.js file

const express = require("express")
const path = require("path")
const multer = require("multer")
const app = express()
    
app.set("views",path.join(__dirname,"views"))
app.set("view engine","ejs")
    
var storage = multer.diskStorage({
    destination: function (req, file, cb) {          
        cb(null, "uploads")
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + "-" + Date.now()+".jpg")
    }
  })
       
const maxSize = 1 * 1000 * 1000;
    
var upload = multer({ 
    storage: storage,
    limits: { fileSize: maxSize },
    fileFilter: function (req, file, cb){
           
        var filetypes = /jpeg|jpg|png/;
        var mimetype = filetypes.test(file.mimetype);
  
        var extname = filetypes.test(path.extname(
                    file.originalname).toLowerCase());
        
        if (mimetype && extname) {
            return cb(null, true);
        }
      
        cb("Error: File upload only supports the "
                + "following filetypes - " + filetypes);
      } 
 
}).single("pic");       
  
app.get("/",function(req,res){
    res.render("File_upload_form");
})
    
app.post("/uploadFile",function (req, res, next) {
         
    upload(req,res,function(err) {
  
        if(err) {            
            res.send(err)
        }
        else {            
            res.send("Successfully Image uploaded..!")
        }
    })
})    
app.listen(3000);

and your file structure like below image

File Structure