Uploading Images & Videos in Laravel with Cloudinary - Dev Hints

as a web developer handling media and assets is a crucial part of an application's infrastructure here's the good news Cloud andary provides an easy way to store images videos and other files so that when used you get a variety of other features out of the box image optimization AI analysis and generative fill among others which can help deliver these assets in an easier scalable and more effective way so why don't we check it out so the cloudinary laravel SDK has an incredible amount of useful features that not only provide ways of extracting how you upload files through laravel and then into Cloud andera but also gives you easy ways of using laravel's facades out of the box to just upload those images to Cloud Ander and then gives you easy ways of retrieving those files in the future what we're going to look at the day is the ability to upload files using the cloudinary SDK specifically this store on cloudinary method right here so we're going to use Lille and live wire to use a form to upload a file in this case an image and then use this method helper store on cloud iner using the LEL cloudinary SDK and upload it to cloudinary so that we can then later retrieve that image and display on the page now of course there's other ways to interact with Cloud Ander using the lville SDK that they provide we can attach the files directly to a Lille eloquent model which is incredibly useful especially if that model is always going to have a file attached to it of some sort or we can upload files via a cloud inary widget that they provide for us out of the box but for this video we're going to be taking a look at the store oncloud inary method and then how to use the files that we store and display it to our users currently we have a dashboard view for our user to be able to add a product using a product form this as simple as adding a name adding a description a price and then uploading this particular image that can be used to associate to that product in this form we're submitting to the add product method we're taking the image and storing it to our public folder now let's use cloudinary to hook it up to this product form so that any of our users who upload an image store that image directly on cloudinary where we can deliver that image in a way that is applicable to that user not only will we be able to optimize that image but we'll be able to utilize image attributes when we're displaying that image to our users if we were to take a look at the products table we see that we have a image URL and then an image public ID these are going to be useful to us as we store this image from cloudinary after we uploaded it to cloudinary in the product dashboard instead of just using the the image path and using the image URL with our asset storage facade what we're going to do is actually use the URL that is given to us by cloudinary after we upload it so first let's go ahead and upload the image to cloudinary store on cloudinary using the method that the larel cloudinary SDK provides on the products folder then since we need the image URL as well as the image public ID to be able to to retrieve that image when we're displaying it to our users we're going to use the method provided in that LEL cloudinary SDK and grab that to push to the database our URL is cloudinary image get secure path and our public ID is cloudinary image get public ID it's incredible that the larel cloudinary SDK provides these methods for us out of the box so that way we can retrieve an image and store these variables in our database for retrieval at later time now let's change the image URL the URL and the image public ID to public ID let's go ahead and save this and let's test this form out you can see that we have some neat loading attributes when we were uploading our image to Cloud iner since we have to wait a little bit for that image to actually be uploaded into cloudinary and we're not saving it to our local file what we're doing in our larl Livewire is saying that anytime we're waiting for that add product to complete we're just showing this adding new product skeleton let's go ahead and add another product and we can see that loading skeleton again because we're waiting for that cloudinary upload to go through and that second new hat has been uploaded to display the images we're using the X cloudinary image larel blade component that the larel cloudinary SDK provides out of the box this allows us to pass in the public ID and have cloudinary retrieve that image for us and that way we can use any kind of attribute that cloud Ander gives out of the box such as cartoonify we can see in our cloudinary media Explorer those images are being stored in the products folder and just like that we can use the cloudinary larl SDK to easily store images or any files in cloudinary and then retrieve them and deliver them to our users in any way shape or form we want now that we've tackled images why don't we take a look at how you can embed videos in HTML using Cloud andary's hosted video player

Channel: Cloudinary

Views: 437

Keywords: laravel upload image, laravel upload file, laravel upload file to storage, laravel upload, laravel upload image to storage, laravel upload video, laravel upload cloudinary, cloudinary laravel, cloudinary image upload laravel, laravel cloudinary

Id: k_k1UxIoQXs

Length: 5min 51sec (351 seconds)

Published: Tue Apr 09 2024