How To File Upload Using Node.js

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

So, let's see the file upload in node js express, node js express js file upload, node js file upload using multer, how to upload file using node js, file upload node js multer, multer file upload example node js, multer file upload in node js.

Visit Multer Package: Install Multer Module

Step 1: Create Node App

In this step, we will create node application using the 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 the below command

npm install ejs

 

Step 3: Install express.js in App

Now, we will install Express in the express_js_file_upload directory and save it in the dependencies list.

$ npm install express --save

 

Step 4: Install multer in App

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

npm install multer

 

 

Step 5: Create File_upload_form.ejs

In this step, we will create File_upload_form.ejs in the views folder. and add the below code in the file.

<!DOCTYPE html>
<html>
<head>
	<title>How To File Upload Using Node.js - Techsolutionstuff</title>
</head>
<body>
    <h1>How To File Upload Using Node.js - Techsolutionstuff</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 an index.js file

Now, create an index.js file in your app directory. and add the below code in the 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 the below image

node_js_file_structure

Note: create an uploads folder in the app for storing files.

 

Step 7: Run the index.js file

Now, run index.js using the below code.

node index.js

 


You might also like:

 

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS