Multiple Image Uploader Using Node Express & MongoDB
Vložit
- čas přidán 27. 07. 2024
- In this video, we are going to learn how to create this beautiful node image uploader project using node express and MongoDB.
In this project, we're gonna upload images in the MongoDB database and display them on the template.
We gonna learn :
* We will learn how to work with MVC patterns to create large projects.
* We gonna see how to follow the programming principle.
* You will also understand how to work with the Handlebars template engine.
* How to store images in the MongoDB database. As well as we gonna store all the images in the upload folder of the server.
* You gonna learn how to make a backend API for this project. And you will learn a lot more than this.
I will explain each and every step to make you feel more comfortable.
So let me show you the demo of this project.
This is a beginner-friendly tutorial. So if you want to be a full stack developer this is the right tutorial for you.
Follow me to take a step ahead to be a full stack developer.
Checkpoints:-
Introduction: 00:00
Project Setup: 01:50
HTTP Server: 04:51
View Engine: 09:04
Template Design: 15:06
API: 27:46
Multer Module: 31:57
MongoDb Connection: 46:13
Schema: 55:25
Fetch Images: 01:13:17
GitHub Repo:
github.com/akashyap2013/Image...
Comment us if you have any question or
👉 Support Me on Patreon 😊:
/ dailytuition
Udemy Courses:
www.udemy.com/user/akshay-kas...
👉 Follow us:
/ akki.2013
👉 Learn More From Our Website:-
www.dailywebtuition.com
More Videos:
**************************************************************************
📹 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
• Complete Mobile Shopee...
**************************************************************************
📹 Complete Portfolio Website with Bootstrap - HTML/CSS
• Complete Portfolio Web...
**************************************************************************
📹 Complete Responsive Blooger Website Using HTML/CSS
• Complete Responsive Bl...
**************************************************************************
📹 Create a Shopping Cart Using PHP and Mysql
• Create Shopping Cart U...
**************************************************************************
📹 Asp.net Registration Form Design with Validation Part - 1
• Asp.net Registration F...
**************************************************************************
📹 Complete CRUD Operation with PHP MySql Database
• Complete CRUD Operatio...
**************************************************************************
📹 What is Node.js? How to install it?
• What is Node.js? Only ...
**************************************************************************
📹 PHP Complete Registration & Login System Using MySQLi - Complete Guide
• PHP Complete Registrat...
**************************************************************************
📹 Hosting WordPress Website with Free Hosting
• Hosting Wordpress Webs...
**************************************************************************
📹 Bootstrap Grid System The Complete Guide - In Action
• Asp.net Registration F...
**************************************************************************
Node Tutorials:-
👉 What is Node? Node For Beginners - 01
• What is Node? Learn Wi...
👉 Installing Node Node For Beginners - 02
• Installing Node With E...
👉 How to use REPL? Node For Beginners - 03
• How To Use REPL ( Read...
👉 Node Script Execution - Node For Beginners - 04
• Working With Node Scri...
👉 Working With Modules - Node For Beginners - 05
• Working With Module - ...
👉 What is NPM? - Node For Beginners - 06
• What is NPM ( Node Pac...
👉NPM Script & Type of Packages - - Node For Beginners - 07
• NPM Scripts & Type of ...
👉How To Use NPX In Node - Node For Beginners - 08
• How To Use NPX In Node...
👉Package Versions & Uninstalling Packages - Node For Beginners - 09
• Package Versions & Uni...
👉 What is Event Loop - Node For Beginners - 10
• What is Event Loop - N...
👉 Understanding Callback Functions - Node For Beginners - 11
• Understanding Callback...
👉 Working with Promises - Node For Beginners - 12
• Working with Promises ...
👉 Asynchronous Code With Async & Await - Node For Beginners - 13
• Asynchronous Code With...
👉 How to Create HTTP Server In Node - Node For Beginners - 14
• How to Create HTTP Ser...
👉 Making HTTP Request - Node For Beginners - 15
• Making HTTP Request - ...
👉 HTTP POST Request - Node For Beginners - 16
• Creating HTTP POST Req...
👉 Working With Files - Node For Beginners - 17
• Working With Files - N...
Attribution
Background Music: www.bensound.com
Images: www.freepik.com/vectors/school
If you have any question please comment me on my video or you can write it on channel discussion.
Thank You...! 🙏
Two minutes into this video and I already know you must have been really good at explaining this. Love your delivery!
Honestly this is a great course, I was almost giving up on where to find how to do this before I saw this course.. You're the best man!
Most welcome 😊
Hello sir
I am facing this error when I upload images to the database == "err": "cannot create a new collection -- already using 504 collections of 500"
you did what i want!
thank you so much!!
I really appreciate your work! Thank you so much, man!
Most welcome keep supporting
Thanks for this video, it helps a lot.
Thanks. Keep it up 👍👍👍
Thank you ! Great video. You are an excellent teacher !
Thank you 😊
Thank you very good and meaningful video 😍😍
Thanks for this super useful video
awesome!! thanks man
Great explanation
Thanks .keep it up
First one seeing this video. Love you channel! Thanks for uploading this helpful videos!
Most welcome 😊
اريد الحل؟؟؟؟؟؟؟
am reaaly enjoying watching this tutorial. your code is really clean and your explanation is truly clear and crisp🙌🏻👏🏻🔥
Thank you
You're on fire 🔥
Love this project and created step by step 😍😍
Thanks
did you complete the prject??
Man, anyone know the vscode theme and font that Daily Tuition used? It's so nice !
You taught the whole thing so painstakingly, I loved the way you showed every tiny detail. You should make udemy courses or your own courses so that we could learn more. God bless you, sir.
I am working on it ☺️
Thanks
Thank you so muchhhhhhhhhhhhhhhhhhhhhhhhh
Hi Guy you are good all the best
Hi, Followed each step but my bootstrap card is not finding the image? Can you help out?
37:07 instead store = multer({ storage: storage }) you can write store = multer({ storage }); It's a truncated write form
👌👍
Hi!! Excelent content, I understand at least the 80% of the content, but I'm traying to create my own implementation of this. My question is, In postman what's the field name to share the images files? In all the tests at the moment it response with a "unexpected field" error. I'm getting without options.
@Daily Tuition I am facing this error when I upload images to the database == "err": "cannot create a new collection -- already using 504 collections of 500"
Sir there one Error : in 9:59 you have written hbs({....})so some typo error will be occurring that hbs is not a function. it should be hbs.engine
can you please help me i am not able to fetch the image in react. please help me.
Can you please help me out to store and display images in react and mongodb
sir this video was really good ,but make the same tutorial for ejs instead of hbs.
I love the way you teach, every thing clean and easy to understand.. Thanks a lot for your time and hard work to share your knowledge
Most welcome 😊
This is an amazing tutorial ,thank you so much,
Can you please tell me why we changed the images into base64? Will it increase the database size? Or cause problems with the 16MB document limitation of mongoDB?
Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON. there is a need to encode binary data that needs be stored and transferred over media This is to ensure that the data remains intact without modification during transport.
@@DailyTuition thank you for your reply i appreciate it💙
Hey I'm working with ejs instead of hbs. Could you pls tell me how to use async and await in ejs? Its giving SyntaxError: Unexpected identifier. Please let me know.
Could you please show me the code
hi sir , i have a question the image should it be type String , coz am using data:buffer and its saying undefined on my image schema
Means it is not getting that store image. Make sure you insert it properly and fetch it.
hi nice video, can you send me the delete function for this ? :) for the router and collection
Hello Akshay, in the controller function ( exports.uploads), when you are trying to catch the empty upload, I think it doesnt work because an empty array evaluates to a truthy value. At least on my end it was not working and I had to check the length. Cheers
Yes we have to check length. I think I forgot to add that in a hurry.
how to Get file name from base64 string , you did it for picture can we use it for files like pdf
Yes you can
wwith your video in my machine your code are not work hbs extension is correct. what you wrote.
hello sir,i wanted to implement this project but i am getting stuck in the display part 1:15:48
i am gating TypeError: hbs is not a function
What if the image not string this is object contains 3 child object inside full, thumb and medium how can you do?
I would interate it with condition
Will it work , when I use ejs instead of handle bars.?
Yes it is but you have to change some syntax
What about having the user build folders and move the files
That's also good
Sir please make best image search system for node.js important image from mongodb database
ITs show error when we uplaod image UploadModel is not a constructor , why its show
Plz show me the code
we are storing images in mongodb database in the end, so do we need multer anymore?
No. You don't need it
Hey awesome video, but, i have a question, what if i want to make a button, that if you click it, it deletes the image or file
That's easy. Just delete the record from the database to do that
Hello, you did just great I appreciate it, but I have a question I am trying to use sharp to resize the images and change their formats the problem is that when I add it nothing happens can you help me with adding it to my project please?
I think you are missing the path. Show me the code
@@DailyTuition thank you so much I fixed it, and I really love your explanation you did an amazing job wish to see you as one of the greatest channels on CZcams
Thank you
@@DailyTuition most welcome
Hello Sir that's a nice piece of video and very insightful. But can I save the images to cloudinary without saving them in the upload folder and still be saved in the database? I mean uploading multiple images. But I'm using React
Use image data hash value or image to store it in the database
@@DailyTuition Please I'm a bit new to these so could you please write a sample of the code for me please??
Can somebody please help to upload multiple images to mongodb database using cloudinary? I’m using react and nodejs as backend
I have a little problem....please resolve it.....i have made all this to backende with controller and gallery page name dgallery...and after that I want to display images from mongodb to frontend page named gallery page....so how can i achieve this...please help....
Store images in the mongo database. Fetch all the images and display it. But make sure you store images url instead of direct image.
hey i follow you video last two days its show error {"error":"Cannot Upload images.jpg Something Missing!"} how to fix it can you help me
This is user define message means the problem is in the try block. Try to read the complete error to solve this problem
If anyone having referenceError: uploads is not defined . Replace destination property by this piece of code. - destination: 'uploads'.
I'm working with mern i stuck on image upload to nodejs and serve that image back to client when i'm working with admin dashboard, now watching your video i know how to upload image, but how can i get those image and display back to product UI on react, on Mongo i'm only store file path to public folder in react folder ( react folder => root folder for front end, separate from backend folder which is for backend), never touch backend folder. Need your help please, thanks in advance for concerning my problem !
You have to identify the images path and create an api to fetch data. Use that api to get images from the database
@@DailyTuition first of all, thank you so much for the response, i really appriciate it, i'll note your solution. I find a way today may i ask you if its OK or not: in node server i serve images folder as static resources using express, and i've tried i can successfully get all the images in that folder which is completely outside of frontend folder. If this solution is not good, i'll switch to your way.
No. That's good
@@DailyTuition thank you my teacher !
@@hoangcuongtran4606 hey brother can you help me out with this. How to store and display multiple images in MERN please
@DailyTution I have an issue, My images are saved into mongoDB , but when tries to fetch, no image is shown
. Could you help me?
Plz check your data of mongodb
It may be missing
use semi-colon (;) after contentType variable in index.hbs instead of colon(:). this was my mistake and it worked for me
hello
I am facing this error when I upload images to the database == "err": "cannot create a new collection -- already using 504 collections of 500"
I am first
Hi, mate!
I have problem with upload image into mongodb server. Locale alright, but then upload subsequent image error occurs. Apparently It 11000 error, cause i get error: `Duplicate ${files[index].originalname}. File Already exists! `. I tried with your github repository application, but it was same problem.
Could your help me?
Thanks.
I have a instagram Id akki.2013 message me there and send a close screenshot I will see you there
What if we want to upload just 1 image only
That's also you can do
Awesome do you have plans on making videos on Nest.js
Yes. I am going to make a course on it
sir can we use python Artificial intellegence in Node js,
please reply me
Yes
@@DailyTuition can u make video in it
I will
@@DailyTuition thank you sir
app.engine('hbs',hbs({
^
es/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
[nodemon] app crashed - waiting for file changes before starting...
when we try its show same error how to resolve can you help me
Make sure you have hbs install in node module folder
thank for your response my bug is solve, if have any support system they will we contact us like any group and discord server,so provide us,they will be helpful for us
Don't have right now but soon it's available
Sir make this tutorial for ejs also please
Ok
@@DailyTuition i hope it will be soon sir, thank you
This is a very nice video, does someone know how to change also the text and not just the image?
I can help you
@@DailyTuition thanks I just saw you comment, I'll contact you tomorrow thru Patreon, thanks.
@@DailyTuition I send you a message trhu Patreon.
Let me check
hello sir,i wanted to implement this project using ejs but i am getting stuck in the display part 1:15:48 how can i use the (each image) and (each this) in ejs .please help and please try to give a code example
Should I make a ejs tutorial?
@@DailyTuitionit would be good but if you just provide the ejs code for the hbs files and pin it in the comment section it would be great as i have seen that many guys in the comments have the same issue.
@@DailyTuition it is an urgent issue so i think just the index.ejs code will be enough,as everything else is same and making a new video maybe time consuming for you
You have to convert the object in to json and use for loop to iterate over it. for(var i=0; i
@@DailyTuition
Hi so i convert some aprt of ur code to ejs for displaying the images
1)
2)
3)
4)
Instead of uploading the image to folder i want the image to be saved directly to the database how can i do it??
When you inspect the image src attribute you can find the image hash value or you can say image binary code. Use that to store image in the database
@@DailyTuition so you're saying i don't have to put multer storage code i just have to put the code which I'll get at the time of posting and i can iteratie in the object and can find the image hash value and put it directly into the database??
Yes.
Will u make authentication system in jwt and also in passport js
Please
I will upload that tutorial soon
@@DailyTuition your work is amazing, I understand everything, I need authentication video, thank you
I am getting an error TypeError: hbs is not a function
I think you are missing handlebar library. Make sure you add it
bro tera problem solve huva ky
Can we perform curd of image in mongo without storing in upload folder directly???
Yes. But that will increase the database size
🤓
sir please provide the ejs code for just the index hbs part
Yes sir this is very much needed .we are not being able to implement the (each) loop part in ejs .it would be wonderful if you comment the code and pin it in the comment section. We are all from the same college and tomorrow we have to submit this.
same problem sir pls provide the ejs code for index hbs
Guys. Convert the object onto json and use for loop to interate over it.
for(var i=0; i
@@DailyTuition sir its again showing error
@@DailyTuition replace dot with .
first
I am first
@@creative460 no
Hi
I sent you some request on your mail. Can you plz reply me.
Rajkumar
npm i express-handlebars
npm ERR! code ETARGET
npm ERR! notarget No matching version found for minimatch@^5.0.1.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\hp\AppData\Local
pm-cache\_logs\2022-04-14T07_45_32_079Z-debug.log
Im facing this issue while installing handlebars, Someone assist me pls.
Use this npm install express-handlebars
@@DailyTuition same error persists sir.
If anyone having referenceError: uploads is not defined . Replace destination property by this piece of code. - destination: 'uploads'.
hello sir,i wanted to implement this project but i am getting stuck in the display part 1:15:48
What is the error?
@@DailyTuition the image is not getting displayed