How To File Upload Using Node.js

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

In this example, we will delve into the process of performing file uploads using Node.js. This tutorial will provide you with a straightforward demonstration of file uploads in Node.js, specifically with Express.js and the Multer module.

We'll use the Multer module, a widely-used Node.js middleware, to handle multipart/form-data, making it the go-to choice for file uploads in web applications. By the end of this tutorial, you'll have a clear understanding of how to implement file uploads, enhancing the functionality of your Node.js applications

Visit Multer Package : Install Multer Module

So, an 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 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 create File_upload_form.ejs in the views folder. and copy the 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 an index.js file in your app directory. and copy 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.

File Structure

Note: create an uploads folder in the app to store files.

 

Step 7: Run index.js file

run index.js using the below code

node index.js

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

How To File Upload Using Node.js

 

You May Also Like:

Recommended Post
Featured Post
How to Get Random Record in Laravel 10
How to Get Random Record in La...

Here you will learn how to get random records from DB in laravel using the inRandomOrder() method. Explore an...

Read More

Nov-10-2023

Laravel 9 Foreach Loop Variable Example
Laravel 9 Foreach Loop Variabl...

In this article, we will see laravel 9 foreach loop variable example. Laravel provides a simple blade template...

Read More

Jul-22-2022

How To Install PHP CURL Extension In Ubuntu
How To Install PHP CURL Extens...

In this article, we will focus on the installation process of the PHP cURL extension in Ubuntu 22.04. The PHP cURL exten...

Read More

Jul-21-2023

Laravel 9 Socialite Login With Twitter Account
Laravel 9 Socialite Login With...

In this article, we will see laravel 9 socialite login with twitter account. Many websites provide different t...

Read More

Nov-12-2022