*Upload file size
1. download nodejs and setup NPM in the terminal
/* open the terminal and run this command */
$ npm init -y
2. install some packages for node js
- $ npm install — save express express-file upload ejs
- $npm install –save touch
- $ npm install –save nodemon
3. then create files using mkdir in terminal
- $ touch app.js
- $ mkdir public
- $ mkdir temp
- $ mkdir views
4. OPEN the vs code throughout the terminal
- $ . code (then open vs code then show file)
5. open psckage.json and change script like this:
{
"name": "task-2",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon app.js"/* this is chend */(this change because it is automatically restart the sesrver)
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"ejs": "^3.1.10",
"express": "^4.19.2",
"express-fileupload": "^1.5.0"
}
}
6. open the views folder and create an index.ejs file
- in this file code the HTML and give the title for the file upload size limit like this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>file upload size limit </title> </head> <body> </body> </html>
7. style the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>file upload</title>
<style>
body{
display: grid;
place-items: center;
background-color: blueviolet;
}
</style>
</head>
<body>
<h1> file upload </h1>
</form>
</body>
</html>
8. then open app.js file and conect html and creat a sresver
const express = require('express')
const fileUpload = require("express-fileupload")
const path = require('path')
const app = express()
app.set('view engine', 'ejs')
app.listen(3000, () => console.log(" server on port 3000"))
- this is user created and run this program in the terminal
- $ npm start
9. then open index.ejs file and create a 2 form first is /singel and second is /Multiple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>file upload</title>
<style>
body{
display: grid;
place-items: center;
background-color: blueviolet;
}
</style>
</head>
<body>
<h1>File upload</h1>
<h3> singel fileUpload</h3>
<form action="/single" method="post" enctype="multipart/form-data">
<input type="file" name="mFile" id="" required accept="iemage/jpg, image/png, image/svg+xml, application/pdf"/>
<input type="submit" value="upload" />
</form>
<h3> multi fileUpload</h3>
<form action="/multiple" method="post" enctype="multipart/form-data">
<input type="file" name="mFiles" id="" required accept="iemage/jpg, image/png, image/svg+xml, application/pdf" multiple />
<input type="submit" value="upload" />
</form>
</body>
</html>
output:-
open browser and type: http://localhost:3000/
10. open the app.js and give the file size limit of only one MB.
app.use(fileUpload({
limits: { fileSize: 1 * 1024 * 1024 },/* this given only 1mb */
createParentPath: true,
safeFileNames: true,
preserveExtension: 5,
limitHandler: function (req, res, next) /* this is showing the request and respond handling for images */
{
Logger.warn("File size limit has been exceeded");/* this is error handling and show file size is above then 1MB */
},
abortOnLimit: false,
useTempFiles: true,
tempFileDir: './temp' /* this is give to path of temporary images folder because storage is more expensive,this is secondary part of storage */
}));
11. then open app.js, link the form and handle the error, giving the sum captions. complete the project
const express = require('express')
const fileUpload = require("express-fileupload")
const path = require('path')
const app = express()
app.set('view engine', 'ejs')
app.use(fileUpload({
limits: { fileSize: 1 * 1024 * 1024 },
createParentPath: true,
safeFileNames: true,
preserveExtension: 5,
limitHandler: function (req, res, next) {
Logger.warn("File size limit has been exceeded");
},
abortOnLimit: false,
useTempFiles: true,
tempFileDir: './temp'
}));
app.get('/', async ( req, res, next) => {
res.render('index');
})
app.post('/single', async (req, res, next) => {
try{
const file = req.files.mFile
console.log(file)
const fileName = new date().getTime().toString() + path.extname(File.name)
const savePath = path.join(__dirname, 'public', 'Uploads', filename)
if (file.truncated){
throw new Error('File Size is to Big...')
}
if ( file.mimetype !== 'image/jpg'){
throw new Error('only jpegs are supported')
}
await file.mv(savePath)
res.redirect('/')
} catch(error){
console.log(error)
res.send('sucessfuliy Uploading file')
}
})
app.post('/multiple', async (req, res, next ) =>{
try {
const files = req.files.mFiles
let promises =[]
files.forEach(file => {
const savePath = path.join(__dirname, 'public', 'Uploads' , file.name)
promises.push( file.mv(savePath) )
res.redirect('/')
promise.push(file.mv(savePath))
})
} catch (error) {
console.log(error)
res.send('error uploading file...')
}
})
app.listen(3000, () => console.log(" server on port 3000"))