Cloudinary Image Upload - the easiest way - mern stack
Vložit
- čas přidán 27. 07. 2024
- We are going to teach you how to upload image in cloudinary in base 64, without any extra steps, or over complicated code, it will be very easy to follow.
👉 - Delete easily image in cloudinary: • Cloudinary delete imag...
👉 - Cloudinary upload multiple images - MDB Carousel example - MERN Stack: • Cloudinary upload mult...
👉 Cloudinary update image in backend - mern stack: • Cloudinary update imag...
👉 Github link: github.com/emmannweb/mernstac...
👉 Membership: / @emmannweb
☕ Buy me a coffee: www.buymeacoffee.com/codingac...
CZcams TUTORIALS
- Worpdress Tutorial: • Wordpress tutorial - h...
- Custom post type and taxonomy filter: • Custom post type with ...
- Cloudinary CRUD operation: • Cloudinary update imag...
- HTML and CSS Website design tutorial from scratch: • html and css website d...
- MERN Stack from scratch: • mongodb express react ...
- MERN Stack with Redux Toolkit: • Redux Tutorial / Redux...
Cloudinary Image Upload - the easiest way - mern stack
CODING ACADEMY is a programming channel that aim to teach programming stuff in a simple way.
If you are looking for Wordpress tutorial, React, MongoDB, ect this is the right channel for you.
Don´t forget To Subscribe and Share with other Friends
Subscribe To Coding academy : / @emmannweb
You Can Follow on Facebook :
CODING ACADEMY is an online media that was created to teach programming to any person around the world who feel the need to learn programming. We teach in a simple way and make it easy to understand.
Our community ( CODING ACADEMY) fans greatly appreciate this initiative,
#coding academy #Wordpress #coding
Amazing video! I was stuck for a long time before watching this
Thank you. Glad to hear it!
Thanks, Brother. Much appreciation for you.
Thank you so much! You're welcome.
Very nice and easy to know, thanks so much 😊
thank you so much!
Thanks bro i was struggling to upload for over 8 hrs thank you very much
You're welcome!
supportive video & easy to know! Thanks brother
Glad you liked it!
thank you for this tutorial!
You're so welcome!
nice video thank you. I think you should describe more about the last user interface but totally I got the idea and worked with me
Thanks for the idea! But could elaborate better? did you suggest that i give a better look on the user interface?
@@emmannweb yes it wasn't clear how you make the requests to your backend from client side .. so it was clear for when you were working on vscode .. but when you used the user browser I couldn't get it. But anyway it solved my problem .. 🥰🥰🥰🥰
@Dev mentor okay... Happy to hear that!
Thanks making devs life easy ❤❤
My pleasure 😊
nice video thank you It worked
Awesome! Thank you!
This is amazing
Thank you so much!
My G, God bless you
Thank you so much bro!
Very cool!
One more subscribed.
Awesome! Thank you.
Thankyou sir, your code is helped me
Great 👍
i love you bro!
thank you, love you too bro
Gracias!
De nada!
Life Saver Dude
You're welcome!
Lovely video! Simple and easy. May I ask the purpose for storing a public_id in the image? is the URL not enough for displaying the image on the frontend? Thanks!
Thank you so much! Well, the "public_id", you would use it, for instance, if you want to delete an image. Application example: github.com/emmannweb/blog-mern-app/tree/main
check this project (front an back)
I am having this error "Missing required parameter - file"while trying to add a photo to cloudinary from Postman while testing it "Missing required parameter - file"
Thnks Eng
you're welcome!
Hello, Very cool, what change would I have to make to upload multiple images?. Nice tutorial, thanks.
Your backend api that has the image field, you'll set it as array of ojects: [{}]; in your input file you'll add "multiple" as attribute. Your image state will be also array: const [images, setImages] = useState([]);
const onChange = e => {
const files = Array.from(e.target.files)
files.forEach(file => {
const reader = new FileReader();
reader.onloadend = () => {
setImages(oldArray => [...oldArray, reader.result])
}
reader.readAsDataURL(file)
})
}
This video is the answer to your question: czcams.com/video/GEE0jNxC8Gw/video.html
Thank you for this video can you provide the link for the react form project?
github.com/emmannweb/mernstackproject
so we don't need to use multer at all here ?
Exactly, we don't need to use multer in this case. If I would use multer, i won't use cloudinary vice-verca. Multer is very popular and it's known to save images locally. As i like more flexibility and portability, I opt for cloudinary.
Well done chap, any chance of knowing how to upload an array of images into cloudinary and mongodb instead?
Well, we already did a video about that: czcams.com/video/GEE0jNxC8Gw/video.html
Great! did you experience and CORS error when you deployed this project?
Not at all. Because i have added this line in package.json in frontend folder : "proxy":"host: YOUR_BACKEND_PORT". in localhost: "proxy": "localhost:8000" for ex. If 8000 is your backend port.
@@emmannweb ok, I will do just that. I hope it will resolve the cors error I am getting from cloudinary. Thank you
still experiencing the CORS error, although i am going through a different approach in uploading the files but it works on my local machine
@@toyinatofarati5512 do you have cors package installed in backend and helmet?
if so, in your backend server file, add: app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "https: data:"]
}
})
)
for CORS: app.use(cors());
it should work, unless you missed something.
Other consideration, if it works on localhost, you're almost there, in your package.json, "proxy": "localhost:BK_PORT", replace localhost by your server IP. and restart it again.
@@emmannweb thank you for your time I will do as you have said, if it doesn't work out I might share my GitHub link
if i add more tan 100 pictures then it become slow ??? when storing imges in mongodb then it become very slow
Well good question, i always advice that as developer we need to know all possibilities to upload images but also be able to make good choice is one of our job as developer. Sure, you would have a higher payload from the json reponse that could lead to a bad experience of the user.
HEY ! im uploading the image from my local files , and posting it using axios to cloudinary
but im getting error like this:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.
im worried that Cloudinary accept url of image , but when i console logged on image i got an alien huge massive data of leters. those are no way url to image
Hi, In this tuto, the image is converted to Base64, cause Cloudinary support that format, maybe you missed something, the code is still working. I would suggest you to console.log what you'll send to backend and also console.log in backend what you received from frontend, so that you know exactly what's going on.
Hello sir, thank you for uploading this video,, it is very useful
Although I encountered a problem
In my post method, I used the same way as you did where I make a const result = await cloudinary.uploader.upload
but it seems to not be working, because when I check my console it kept throwing to my catch error. I dont know why because I tried a lot of solutions but still it doesnt work
Now my image base64 string does not include the data:image/jpeg;base64 but I tried adding them to my image string but it still does not work.
Perhaps is there something wrong with my configuration or anything? Should the CLOUD_KEY and the other config variables have the " " as how we copied from the cloudinary?
I really don't understand why my const result = await cloudinary.uploader.upload does not work, I tried to console.log under this function to check if it works but it does not output my log so I'm certain the problem is from that function
please help thank you :)
Sorry for delay, you have few things to consider, when you're dealing with trouble first of all, is to download the code base to compare your code with,. Secondly it could be your configuration file with the values that come from .env file, recently i'm using the same code
in this video lesson: czcams.com/video/_FJMRSlHh8k/video.html it works really well. Other factor, in your package.json in frontend folder, you should add a "proxy": "localhost:8000", 8000 will represent your choosing backend port, if yours is 9000 you put it. Verify it in my cod base. There is no secret,i think you can do it.
How can I display images from a specific folder in cloudinary
To display images from a specific folder, as i understand your question, you should create your specific folder before, as i showed you in the video. Since you have pre-configured your specific folder in the backend API, you don't need to worry about them. It will display automacally, from that particular folder, once you make the API call.
do you know how to automatically rename the file before upload? just asking.
I think it's possible but i didn't implement it yet. You'll need extra logic to name it randomly or with unique name and increment the value.
How to change temp files location? I'm using a serverless read-only server which allow write only one location. How can I set cloudinary to store on that location ? The default location isn't working
Could you be more specific, i mean with more details on the stacks you're using. However to find your implementation type and the way you should do it check this link: cloudinary.com/documentation/image_upload_api_reference#explicit, in that Doc you'll find implemenation for PHP, Ruby, Java etc.
@@emmannweb I'm using node and cyclic.sh server when I get the image from frontend cloudinary create temp file in local environment before uploading to cloudinary storage. I want to change the location of that temp files
@@bappirahman3294 ok i get it, did you use other dependency like multer ? etc., in my opinion after the configuration of Cloudinary in the backend, it doesn't require a temp file (i think it's optional). The file name coming from the frontend to backend should exist exactly the same. Other consideration, before sending the image file with convert it to a string in base64, i-e if you can send your text fields in the backend from the frontend(you don't need extra configuration), it supposed to work, i think. All the data like text and image are sent to backend like string. I hope you get it!
@@emmannweb I used multer but I removed it as a dependency and uninstalled it but still I'm getting write error
@@bappirahman3294 if your configuration is correct according to what we've showed in this video it should work. However, in your form before sending the data to the backend console.log them to check if all fields have a value same thing with the image field and verify its name front and back. 2) Probably if you're using Morgan package as middleware, check if your endpoint is reached 3) To enable image of a certain size to be uploaded, use this example : app.use(bodyParser.json({limit: '100mb'}));
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
limit: '100mb',
extended: true
}));
I got an error
Which says: MISSING REQUIRED PARAMETER - FILE
PLEASE HELP ME❤️❤️
1) Seems like the image was not uploaded, check the image field name (front and back),
2) before sending the request, use console.log to check if you have all the fields value.
3) Compare the github project files, to verify what you miss.
Can I do this in wordpress, is it possible if any one know themn please reply
This implementation is for Nodejs App, but Cloudinary support many programming languages, check their documention. With Wordpress you can do it via plugin or custom code following their documention on that matter.
@@emmannweb brother can you tell me?, which process is this called of upload my wordpress images to cloudinary
Even from the frontend
@@qamarzaman-qz cloudinary.com/documentation/wordpress_integration
wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/
I never used them but this should give you a starting point.
What do I do if I have a payload too large error?
good question. try to this snippet in your backend server API:app.use(bodyParser.json({limit: '100mb'}));
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
limit: '100mb',
extended: true
}));
@@emmannweb I did that but still it's showing the same error
@@abhishaianandaraj.j6045 show your code
@@emmannweb const app = express();
app.use(express.json());
app.use(bodyParser.json({limit:'100mb'}));
app.use(bodyParser.urlencoded({extended:true,limit:'100mb'}));
app.use(cors({
origin:"*",
methods:["GET","POST","PUT"],
"Content-Type":"application/json",
}));
if i post a large file(an image)it shows a cors error also. but for small files, it works normally
Please can I get the source code?
Github link: github.com/emmannweb/mernstackproject
How many years have you been learning to code ?
About 7 years.
@@emmannweb damn what's your age now
You did not use multer?
No, i'm not. It's not mandatory. But If you want to save your images in your project folder you could do so.
@@emmannweb Ok.
where is the complet proj
This tuto was to show how to deal with images.
Screen is not clearly visible
you could check you internet connection. i double check on my side, i saw it's fine.
I found "OK" very irritating. Sorry. Like it was repeated for million times.
can you be more specific?
@@emmannweb try to reduce your expression "OK" when talking.
@Shura Stun get it thank you.
@@emmannweb and 'I mean' as well...
@@alexvolkov529 sorry guys, i'll try my best
I am getting this error on POSTMAN "Unknown API key '777252576991944'," while trying to upload photo
According to you error, seems like you have a problem with your Cloudinary credentails. Double check them. Don`t forget to put them with their correct name in .env file.
I have done that correctly @@emmannweb