How to upload image in React Node and Mongo db using MULTER | Node JS + MULTER | Upload & Retrieve
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2023
- Hello Guys,
Check out this amazing cloud platform:
ZEGOCLOUD SDK provides easy video call SDK, voice call SDK, live streaming SDK and chat SDK for real-time interaction.
Get ZEGOCLOUD SDK for 10,000 free mins: bit.ly/3OznGu6
Pre-built UIKits in low codes: bit.ly/3SN4Ja1
Create docs sites with Docuo now: bit.ly/3SOF5S0
Top 10 video conferencing SDKs for you: bit.ly/3Sx6mHg
#zegocloud #uikits #sdk #api #react
In this tutorial I have shown you that how can you upload an Image from react to mongo db by creating an api in node js + multer and fetch it again and show it to your React Js application.
Thank You.
GitHub Link:
github.com/the-debug-arena/mu...
Node Js and Mongo Db tutorial.
• #1 Explanation about h... - วิทยาศาสตร์และเทคโนโลยี
thank you soo much for this video for me very helpful..lot of thanks
Thanks guru ji
Good Job! Thank you!
Our pleasure!
thank you but its not working for me , the bug started when i put the url front in multer stockage , can i have help plz ?.
Thank you!
You're welcome!
amazing bro
You can checkout for pdf also
Amazing video but if you had saved it like baseurl/filename in database instead of getting it from local dir (src/images) that will be very helpful.
Since both Base64 image file and regular image file have data type of String in MongDB, can we display both images at the same time using the same schema?
Right now I'm able to upload both Base64 and regular filename to MongoDB using the same Schema.
It would be great if there is some codes to check if the image is stored as filename or Base64 in MongoDB and display them properly.
You can check my other video on the same but using multer. In that I am storing image name only
@@thedebugarena Thanks again for replying.
I have more questions.
If you deploy the project onto the internet, where will the actual images be stored? on their server's storage disk?
and on the Register page, you hardcode Admin secret key. Isn't security risk? The server that store your code will have access to this key?
And the secret key will be able to update? Let' say someone accidentally finds out the secret key and you want to change it. What would you have to do?
I'm just curious.
ok Bro, thanks image done..now make video for pdf file upload or download or video upload or play in mern stack wtih next.js
Sure will try
Video is out you can check
Thanks for the video this seems to be great for working in local. In the case of deploying to a host, is there a way we can get photos uploaded somewhere so that way we can pass the url of the image? All done from within the app? Like upload image in frontend, backend gets it uploaded to a third party, creates a url , and then adds that url to mongodb .. when we call mongodb it will have url of images which we can then map through and show
Yes while hosting also we can use multer and it works. But, there is one more solution which totally suits your requirement is using cloudinary. You can upload image there it will return url and then you can store that in mongo db. Very soon I will be posting video on this but you can checkout others.
Do it fast bro@@thedebugarena
Hey im getting this error Uncaught ReferenceError: require is not defined. why is it not defined or do i need to install some packages for that . Im using src={require(`./images/${data.image}`)} Please help at 16:45 part of your video
Ideally it should work. I don't know why it is giving you error but still try this solution
sir i want to upload pdf file or video then video play and pdf file download
How to Validate form-data before using Multer ?
bhai mere pass frontend me ja ker image save ni ho rhii..?
Disk storage is not working after deployment
Suppose we get image outside the project folder using API then what should I do
Then we might have to use an external package which will allow this
The solution is given in my next video in which i have shown how to upload pdf
what will happen if i host my website will the uploads folder still contain the images for particular user or how does it work
There you have to manage the folder structure accurately but it works there
how to manage that folder structure please tell me
@@thedebugarena
@@LukmaansStack While hosting there are few things we have to do 1) To whatever folder you are adding the image it should have access to read and delete. 2) You have to specify proper location to upload the image.
Bro mene frontend & backend ke liye alg se folder bana rakhe hai 2, and backend me index.js hai java multer laga hai and fronted wale folder me react hai.
Problem: Multer destination cb(null, ".../fronted/src/component/") frontend path dalne per image phoch nahi rahi hai image folder me.
Please help ❤️
In that case you can put them in same folder or you have to use some external package to achieve them
@@thedebugarena yes unfortunately now I'm using all the fronted and backend in same folder 🥲
@@marvelworld5210 Ohhh luckily now I got the best solution of this also in my next video I will show that
how about my backend and react app is in the different directory?
You can do this by creating a static folder in your backend where you can store any files that can be accessible for anywhere.
bro in backend while store , what should define the path name for storing the images after deployment
After deployment if your backend folder is at same location then same code should work. You can access the folder like this './uploads'. But if your both the folder is at different location then we can do like this: Suppose your image is getting uploaded into "Uploads" folder at the backend using multer then in app.js we can add this line "app.use("/uploads,express.static("uploads")) this will make your uploads folder static and it can be accessed from anywhere. Then in your react you can access image using location like "localhost:5000/uploads/file.jpg". In place of localhost you can pass your url.
For better understanding you can watch this video th-cam.com/video/Fvp6EDIPSCU/w-d-xo.htmlsi=hPijFFEHqPgO4M1w at timeline 17:38
@@thedebugarena tnx bro ,you're a lifesaver!
I'm doing the same but it says require is not defined when I write require in my img tag.
Are you writing in{}
@@thedebugarenayes
If you deploy the project onto the internet, where will the actual images be stored? on their server's storage disk? can anyone answer this please
Yeah bro
Yes it will be stored on Server's storage disk.
no need to use buffer as a datatype while we store an image to mongodb ???
Yes you can change your datatype to buffer but string is also doing the job so I used that.
how can we my backend app name is backend and frontend app name is frontend , how can we give image folder location in backend in place of upload file .. will it work , please let me know
Yes it will work. If you are having two different folders at different location then you might have too work hard and use some External package to achieve that
i have a form which consist of personal details and image .How to set mongodb schema for this type of data.Can we send text and image data at a time to server
Yes you can in this in schema we have added only image you can add other things too. In front-end store all the different values like name, image etc in their particular state and on submit send them all to backend. It will work
@@thedebugarena can you please make a video on that type of form too
bro try both axios and and browser fectch api got same api error 404 page not found.. any help
Dm me on instagram
is we can't save entire image in mongodb in binary form ?
We can store in base 64 check previous video in that I have done using base 64.
@@thedebugarenai think it just encode the filename but he ask about the is it possible to upload a image direct with out any create folder like upload
bruh, your grammar is a disaster💀💀, this is the first time i see a person using “is” and “can’t” at the same time💀💀.
@@afifnusada4712 sorry about that. Will improve.
What if i want to host this app. Now it will not work right?
Yes it will work. While hosting you just have to give that folder read and write access.
what if frontend is at another place how to tell backend to use src
In that case what we can do is Suppose your image is getting uploaded into "Uploads" folder at the backend using multer then in app.js we can add this line "app.use("/uploads,express.static("uploads")) this will make your uploads folder static and it can be accessed from anywhere. Then in your react you can access image using location like "localhost:5000/uploads/file.jpg".
For better understanding you can watch this video th-cam.com/video/Fvp6EDIPSCU/w-d-xo.htmlsi=hPijFFEHqPgO4M1w at timeline 17:38.
will this work fine when we deploy it.
We will have to configure it properly but it should work
bhai here uploads folder is automatically made or have to made
Both will work
I got network error: axios error how can I fix it
check endpoint
bro same this work with next.js full stack make video?
Dm me on instagram
@@thedebugarena what mean this?
how can i send 2 or more images in array
I input tag there is option of multiple by using that you can select multiple image but In backend you will have to modify according to that
@@thedebugarena please tell me also that
where is your code
Hello can u please help me I get stucked🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
Dm me on instagram
bhai deploy bhi krne ka bana deta 🥲
Pleas share source code in github repasetory
github.com/the-debug-arena/multer-image-upload.git