File/Image Upload With Multer in Node js and Express – onlinecode
In this post we will give you information about File/Image Upload With Multer in Node js and Express – onlinecode. Hear we will give you detail about File/Image Upload With Multer in Node js and Express – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, in this article, we will explain to you how to file/image upload with multer in node js and Express. so in this example, we are using the multer npm package for image upload in node js. we can easily image or file upload using multer in node js.
What is multer in node JS?
A multer is one type of npm package and it is a Node.js middleware for handling files. it is used to file uploading in node js.
So you can follow the below step for node js multer file upload example.
Step 1: Create the Application Directory.First, we will open the command prompt and create the application directory in our directory. for this, you can follow the below command.
mkdir nodejs_upload_image cd nodejs_upload_image
Step 2: Install node js packagesIn this step, we will create a package.json file in your application directory and paste the below code in this file.
{
"name": "nodejs_upload_image",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"body-parser": "^1.19.0",
"multer":"^1.4.2"
}
}now, you can run below command for install packages.
npm install
Or, You can also install using the following command
npm install express multer body-parser --save
Step 3: Create Server filewe will create a server.js file in your application directory and paste the below code in this file. here we will load the npm package.
const express = require('express')
const bodyParser= require('body-parser')
const multer = require('multer');
const app = express();
const upload = multer({
dest: 'uploads/'
});
app.use(bodyParser.urlencoded({extended: true}))
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/uploadImage', upload.single('fileImage'), (req, res) => {
res.redirect('/');
});
app.listen(3000,function(){
console.log("Express Started on Port 3000");
});Step 4: Create the view file and upload directoryIn this step, we will create the index.html file for the upload of the image and create the uploads directory.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>File/Image Upload With Multer in Node js and Express - onlinecode</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="/uploadImage" enctype="multipart/form-data" method="post">
<input type="file" name="fileImage">
<input type="submit" value="Upload">
</form>
</body>
</html>Step 5: Run ApplicationNow, you can run your application following Url.
https://localhost:3000/
Hope this code and post will helped you for implement File/Image Upload With Multer in Node js and Express – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs