Upload Images - Laravel Livewire v3 Tutorial #episode 20

Hello friends Tony here now in this video I'm going to show you how to upload images with a live wire and I have created such a video with the version two which is similar to this one nothing has changed now uh I'm not going to add a new input to this form to upload images I have created if I open the vs code I have create the image model in migration and in this model I just added the protected fillable for name and path and also in the images migration added string name and string path okay now let's open the terminat and here I'm going to create a new uh Livewire component to create the out so I'm going to add the link or images here and when we navigate the images we're going to have similar to this one so we going to have form here and the we to display the images in here okay so let's say artisan make colon Live Wire and the name which I'm going to name it image index hit enter okay now let's open the web routes and register that route so after the route get uh tasks I'm going to say route get images okay and also say slash image I prefer this one and use the images index class and also say name images do index just here not images plural just image and we need to import the class okay so class imported if we see here and let's save and let's close now the link here we need to open the navigation blade so let's open the navigation blade inside the Livewire resources layouts and here we have this link I'm going to copy this and paste it for the images so just say images. index and also here I'm going to say images or photos what you can like what you like and now we have images here and if I click right now here we going to have the error here L page component layout view not found because it's going to look for components inside the components louts up but we don't have that and we need to open the image index and specify the layout in here which is layouts. app like this and now we can refresh and we have an empty page as I told you I want to have form to upload the image and then here we going to display the images so let's open the VSS code and here I'm going to define a property so let's say public dollar sign image or you can say a photo or what you like so let's say a photo here say photo okay and now let's save and let's open the blade and here I have prepared the stml so div and in this div is going to be with with 7 by 12 is going to we to display the images here 4X 12 I added the form with some classes and a div inside this div a label for upload image and an input type file and then I have used this x primary button and say upload let's save and let's see on the browser now yeah we have something like this here is the form and here we have images let's go here and now first of all I'm going to add in the form the wire submit okay when we click to that button I want to upload the image and I'm going to call Save method and for the input we're going to bind the photo property okay so let's say y colon model to Beal with the photo and we have type file here let's save and let's go and create the save method now in the image index class so here I'm going to say method uh Save which you can name what you like and what we need here is to store the to upload the image and we need to store also in the database in the migration and that's it but let's open here the storage up public right now we have empty here what I want to do is let's say for example I'll assign this photo not like this because I don't want to find that but I want to store this photo and you can uh read more in the LV documentation the store image to upload the image okay so here we have file uploads you just can search and see how we can upload the image so we can use this store and specify the directory also you can use the uh storage P file which is the same as the store also we have this store as and we specify the directory and the file name aled and I'm going to use this store as so let's open the vs code and set of store I'm going to say store ask and directory is going to be inside the images the file name now I want file name which is going to be so I'm going to say name to be with and not this photo get name we can use the uh laravel get original name so you can can here see here we can use this one but yeah let's just paste for now okay but you can see keep in mind that the get client original name and get client original extension methods are considered unsafe okay can use the has name if we want but I'm going to leave it like this and then in here I'm going say dollar sign name and also we I want to specify the disk so I'm going to say public and this stor is going to uh return as a path so let's say do sign path to be equal with this one and then we're going to use the image model and say create the image which is going to be sorry the name which going to be this name so let's say name and the path which going to be this path okay also in this photo we can add the validation but for now let's leave it like this okay I'm going to open also the database open the table plus here and here I have the images which is empty right now and also the storage is empty now let's go and try so here I'm with to refresh and let's choose a file I have here three files open this L PNG and we have this error so cannot handle file upload without Livewire with file upload straight so use with file uploads okay and you need to import that is the same we use for with pagination and now let's save and this try so refresh if I open this say upload nothing change now if I come here and refresh as you can see we have uh images and the name is l PNG and the path is images. p okay now let's open the vs code and in the storage public now we have the images uh let's Zoom it for you just to see we have images directory and here we have the l.png good but also you can see we have inside the app we have this Live Wire Das DMP so we can display also the image preview and let's see how we can do that in the project so when we upload the image we can show show also that image we are going to upload and as you can see in the live wi TMP we have this file which is uploaded okay and how we can show that if we go to the images image index and I'm going to zoom out now in here or right here I'm going to say or after this one let's see with a check if we have a photo sign photo and just let's add an image with some classes some we to a class with uh H and 18 and ha the same and I'm going to say also to be arounded MD and as a source we can use dollar sign photo and call the temporary URL method okay and let's close this now if I save this uh yeah we need to also close end if here and let's save let's open the browser refresh nothing change here if I choose the image and let's choose Live Wire open here we have the preview of the Live Wire let's choose another one vgs for example and now we have vgs here and updated the vgs let's say upload and we need to clean this but for now let's just see in here we have public images now we have two laravel and VI JS but in the TMP directory we have three which is the live L and VJs okay also if I open the table plus and refresh we have two uh images now let's add also validation and when we upload I want to clean this one as well so just work with that so for the error I'm going to say if we have the error for the photo and let's go tasks form I'm going to copy this and paste it inside here okay then in the image index on the public photo we can add the rule and for example I'm going to say I need to is need to be image but five and maybe Max of 10 24 okay we need to import this rule from the Live Wire attributes Rule and first of all here we need to call to assign this validate okay and then as I told you also I want to reset the photo so let's say do sign of this reset reset all not like this just reset and save and see now on the browser if I refresh okay let's say upload and the auto field must be an image let's choose the image and I'm going to choose Live Wire say open so enter display here and let's say upload okay now let's see the database if I refresh here we have larav Val pgs and live and also in the storage app public images we have L liveware and VJs okay friends that's it all about this video how to upload images with live wi which is very easy and also we can uh show a preview of all of image we are going to upload that's it all about this video now if you like such a video don't forget to subscribe to my channel like the video share with your friends and all the best

Channel: Code With Tony

Views: 1,817

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 10, laravel filament, livewire 3, livewire v3, laravel livewire v3, laravel livewire v3 tutorial, learn livewire v3, laravel livewire full course, laravel livewire full tutorial, tutorial, course, code with tony, Laravel Livewire v3 Tutorial, laravel for beginners, laravel livewire for beginners, livewire installation

Id: 71ok5nnj7pQ

Length: 14min 39sec (879 seconds)

Published: Tue Nov 14 2023