Scribd
Upload
54 views30 pages

Express File Upload: #Node - Js Express Notes

The document discusses file uploading in Node.js using Express and the Express FileUpload package. It explains how to install Express FileUpload, configure it in an Express app, access file properties, and handle file uploads. Specific steps covered include creating a form to select a file, accessing the file object from the request, and moving the uploaded file to a directory on the server.

Uploaded by

Rohit Kumarr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views30 pages

Express File Upload: #Node - Js Express Notes

The document discusses file uploading in Node.js using Express and the Express FileUpload package. It explains how to install Express FileUpload, configure it in an Express app, access file properties, and handle file uploads. Specific steps covered include creating a form to select a file, accessing the file object from the request, and moving the uploaded file to a directory on the server.

Uploaded by

Rohit Kumarr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Express

File Upload

#Node.js Express Notes


Express FileUpload
File Upload
 FileUpload is used to Upload Any File on Server Like Images,PDF etc.

Akash Technolabs www.akashsir.com


3
Install NPM
 Create New Express Generator Project
 Install Express Fileupload Package
 https://www.npmjs.com/package/express-fileupload

 npm install --save express-fileupload

Akash Technolabs www.akashsir.com


4
Steps
 Create New Project
 Install Express-Fileupload
 npm install --save express-fileupload

 Include Package in App.js


 const fileUpload = require('express-fileupload');

 Use Fileupload in Express app.js


 app.use(fileUpload());

Akash Technolabs www.akashsir.com


5
Get Information of File Using
 To Get All File Data use req.files.
 console.log(req.files);

 Your input's name field is foo: <input name="foo" type="file" />


 To Print Specific File Data Use req.files.filename
 console.log(req.files.foo);

Akash Technolabs www.akashsir.com


6
File Properties
 req.files.foo.name : "car.jpg"
 req.files.foo.mv : A function to move the file elsewhere on your server
 req.files.foo.mimetype : The mimetype of your file
 req.files.foo.data : A buffer representation of your file, returns empty buffer in case
useTempFiles option was set to true.
 req.files.foo.tempFilePath : A path to the temporary file in case useTempFiles option was
set to true.
 req.files.foo.truncated : A boolean that represents if the file is over the size limit
 req.files.foo.size : Uploaded size in bytes
 req.files.foo.md5 : MD5 checksum of the uploaded file

Akash Technolabs www.akashsir.com


7
Form
 Form method must be post with enctype="multipart/form-data“

Akash Technolabs www.akashsir.com


8
Create New form.ejs
<html>
<body>

<form method="post" action="/formprocess" enctype="multipart/form-data">


File :<input type="file" name="file123">
<input type="submit">
</form>

</body>
</html>

Akash Technolabs www.akashsir.com


9
Load Form
router.get('/', function(req, res, next) {
//Form Name
res.render('form', { title: 'Express' });
});

Akash Technolabs www.akashsir.com


10
File Upload Code
router.post('/formprocess', function(req, res, next) {
//File Upload Code
console.log(req.files.file123); //Print all File Information
var myfile = req.files.file123; //File Object
var myfilename = req.files.file123.name; //Get File Name
//File Upload Code
myfile.mv('public/'+myfilename, function(err) {
if (err)
return res.status(500).send(err);
//res.send('File uploaded!');
});
});

Akash Technolabs www.akashsir.com


11
Akash Technolabs www.akashsir.com
12
const fileUpload = require('express-fileupload');

Akash Technolabs www.akashsir.com


13
app.use(fileUpload());

Akash Technolabs www.akashsir.com


14
Akash Technolabs www.akashsir.com
15
Akash Technolabs www.akashsir.com
16
Akash Technolabs www.akashsir.com
17
Akash Technolabs www.akashsir.com
18
Akash Technolabs www.akashsir.com
19
Akash Technolabs www.akashsir.com
20
Akash Technolabs www.akashsir.com
21
Akash Technolabs www.akashsir.com
22
Task
 Allow only JPG,PNG and GIF Files only
 2 MB File Size Restriction

Akash Technolabs www.akashsir.com


23
Wait….
 Solution is in Next Slide….

Akash Technolabs www.akashsir.com


24
Upload Specific File Content
if(req.files.file123.mimetype=="image/jpeg")
{
myfile.mv('public/upload/'+myfilename, function(err) {
if (err)
return res.status(500).send(err);
res.send('File uploaded!');
});
}
else{
res.send('File Sorry!');
}
https://www.freeformatter.com/mime-types-list.html

Akash Technolabs www.akashsir.com


25
File Upload 2MB Allowed
if(req.files.file123.size < 2 * 1024 * 1024)
{
myfile.mv('public/upload/'+myfilename, function(err) {
if (err)
return res.status(500).send(err);
res.send('File uploaded!');
});
}
else{
res.send('Max File size 2 MB Only');
}

Akash Technolabs www.akashsir.com


26
Get Exclusive
Video Tutorials

www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now

Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET

Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info

Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar

+91 99786-21654

www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com

You might also like