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 :



Recommended Post


Featured Post







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×