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

 

 

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

 

 

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

Note : create uploads folder in app for store files.

 

Step 7 : Run index.js file

run index.js using below code

node index.js

 and after run this command you will get output like below screenshot.

How To File Upload Using Node.js

 

You May Also Like :

Featured Post




Follow us
facebooklogo github instagram twitter