How to upload image with preview | Laravel Livewire 3 from Scratch

welcome to episode 31 of the tutorial series Live War 3 from scratch my name is William chuma in this episode I would like us to look at how to upload an image in Live Wire 3 and also preview the image before saving such that if the image is uh good we can be able to go ahead and save and if it we do not like whatever is that we see in the preview we can go ahead and discard so let us go ahead and do that I'm going to create a new component I'm going to run the command PHP Artisan Mech Live Wire then the name of our component I'm going to call it image upload I hit enter to create the component I also want to go ahead and create the routes for this component of ours because we are going to use it as a full page component so here I'm going to have upload image upload like that and then we will have a class here I'm going to call it I mean we going to pass in the image in our route image upload and then of course this route here there's a route that we called upload somewhere in this um episodes that you're working with so here I'm going to to have image upload and it's important for me to mention that the preview feature is only enabled for images so you cannot be able to preview a PDF image if you uploading or you cannot be able to preview an Excel or CSV file it's only reserved for images so let us go ahead and um visit our component so here I'm going to have Local Host 8 ,000 for/ image height F upload and of course we have uh something that looks like this so i' would like to go to that component and be able to create our inputs so in this case here maybe I can call this image upload and then this one as it displays on the desktop I want to have a class over offset 3 column six and then I want to have a single input here I'm going to have a div with a class of um mb3 and then we will close the div and inside here I want us to have our input input type file in this case s model let me call it image and then of course a class over from hyphen control like that we will close it and then after that I want us to have the buttons so maybe this one we can have it in in form input or we can leave it like that and then below here I want us to have two buttons and one of the buttons is um the button for resetting so button class uh BTN BTN let me have it as secondary and then the class I mean the name of this button I'm going to call it reset so for resetting the image and clearing it from our input then of course I want us to have another button maybe I can just go ahead and copy whatever is that you have here and this one you have it with a class of primary and then this one will be safe like that so if I'm to refresh we have our file looking like that and I think there's something so offset is three and then column six I think had forgotten that so now our values a little bit centered I would like to go ahead and uh be able to work on this one from our other side so I'm going to open the Live Wire class and you having image upload I'm going to create two methods here one of them I'm going to call reset public function reset let me call it reset image because we have uh in live where we have the reset method so if I use reset you might be able to have some confusion then of course the other one I want it to be it's not a must for us to have public function we can just even have function and then here we can also have function save so we have the two methods and inside the save I want us to do validations so this uh validate so in this case we validate our image and here we are going to have image because that is what we have called it and then what we are going to have here is that it's required and we can be able to pass the memes the meme types in this case um what we are going to have is uh PNG or all the image meme types so JPEG and we can have [Music] PNG we can have [Music] jpg even GI if and then I want us to have it to have a maximum size of uh 20 48 that is 2 MB and then of course we need to we close this one here we need to declare this property here so what I'm going to have is a public public image that's our property and now if we are to refresh I'm going to also do something on the buttons so let us go to our buttons let me move these a little bit down let's go to our buttons in our Live Wire view component and here this first button I want it to when we click it it goes to the method reset image image like that and then this other button when we click it we go ahead and do what save our image so I would like to attempt and see if we can be able to check the save method because at least we have validation there and it's good for me to be able to handle validation also so let me handle valid validation here first so what we going to have at error that error in this case image so any errors that arise from our property image at end error like that and then inside here what I'm going to do is to have a span the same way we have been doing it with a class over text danger like that and then we will pass the error message here so what we have here are craes and you're going to have message we going to save that so I want to try if we able to capture the ER errors so I'm going to click on Save and it says image required so meaning that one is working okay I also want us once we able to choose the image we be able to display the image above here so let me work on that what you're going to do you're just going to check if an image exists or if there's anything that has been set to our image property then we can go ahead and display it so let me just below the title I want to have at at if image at if image image and then going to have at end if and then what I want us to pass in here is um our image so in this case we will have IMG and then SRC and then of course we can be able to pass in the image from our temporary URL so we will have image and then then temporary URL like that you be able to display our image of course we can be able to pass the width and height of what we want to see so what I want us to have we can be able to pass here a width over maybe 500 and a height of 500 I don't know how it to display but we will try and see what happens so let us go ahead and see if we're able to pick an image and attempt to upload it so choose file and I just want to choose one of uh the images that I use in um as my thumbnail for YouTube and you can see we are having an error and this is because we have not been able to include the with file uploads because if you read the error what it says is you cannot handle without Live Wire with file file uploads trait so we need to include it so let us go to our class and up here I want us to use Livewire with file uploads like that and I need to also just have it here so here we can have use with file uploads like that and then we can go ahead and refresh and then now we can try to upload it again it's just an image here and now we are waiting for the preview and you can see it's uh being displayed in the dimensions that I did put so 500 by 500 is um I think not the best maybe we can change this depending with the kind of image that you are display you can be able to do a work around the dimensions that uh you pass here so maybe for the width we can have it as um as uh maybe 500 and the height we can do maybe maybe the width yes the width the height we can do 300 something of that sort maybe such that it displays a little bit nicely so again choose and then we have that open and then now it's displaying like that I think not very bad and you can be able to do the size to make it even a little bit smaller than whatever it is that we have here that is good enough I want us to attempt now and um work on reset because sometimes you may upload an image and then you don't like it and you want to reset so you will click this method and then it'll be able to reset the image for you so let us go to our Livewire class and be able to work on the reset image and what I want us to do when we are resetting the image I want us to just reset the image so maybe I want to just run this uh reset just like that but of course this you have issues I I'm I'm doing it like this such that you can be able to notice the limitations that you're going to face when we do like when we do it like that so I have my image I have opened it then once I open it it's going to display and once it displays when I click reset the image goes and I think this one is resetting perfectly because I was trying it somewhere else and once we were resetting the file was not being reset the link was remaining uh visible here so I think um that is that but let me do the intervention that not withstanding so if you want to reset the image and also remove the the link so sort of like the image link then maybe we can go ahead and reset the image alone and then we can have another property we can pass an ID to our input so in this case public I want to have ID so public ID another property and we can set the initial value to one and then now here we will also have this ID and then we can increment it to wherever it you go it doesn't really matter so you just increment it by one or something of that sort and this one you be very helpful for us I want us to go to our view component and be able to add that ID so here I want to pass an ID and since we want it to be unique I want it to be upload and then I can be able to pass my ID here like that so that you be able to handle that when we reset we are also able to reset even the the file name that usually is in that input field the one that appears here where we have where we choose our file so that is that I want us to be able to now go ahead and save our file so in this case what we are going to have is um in our save method and I think this one we did even in the previous tutorial but let me just go ahead and do that so in our save method inside our Live Wire class image upload I want us to after we do validation I want us to save so we can say this image remember we have a property called image that is why I'm calling this so This Image store and we can say where we want it stored so maybe my uh maybe we can say nice uh photos let me just say that because I know my photos I have a folder probably because of a previous tutorial but it doesn't matter whatever it is that you want to save you can save and I want us to just have session message so in this case we can have session Flash and what we have here is um success and then we can be able to pass that file saved also for when we reset the file we can be able also to just pass a session message and here what I can have as we increment and we do every other thing here we can say image image reset like that and so in this case what it means is that we have not been able to save this image we just reset it and I would like to just handle the session message on this side there's one thing that I'd like to talk about currently if we click on reset image I want us to see if um there's anything that is going to happen nothing is happening I think that one is okay but I as I was working on on this I also found out that there is a possibility that you can be able to get errors when you click reset image so I want to just show this button when we actually have an image selected so I want to just go to our to our view in this case and we can be able to for the first for the SEC for the first button for resetting the image I want us to have at if and here we have image so if we have an image then we can be able to uh have this button otherwise we do not want to have the button so basically if I refresh now that button is not visible and it will only be shown when we have an image selected so now you can see the image is being shown in the reset button so when I click reset now the image is discarded like that and so I think that is good enough maybe I can be able to just do one more thing and handle the session messages this is something that we have done in various episodes and it doesn't harm to maybe just repeat such that at least we have some feedback and see that our work is working very fine so session so we checking for session success and then we are having end if at end if like that and here we can have a diff with uh with a class of alert success like that and we can be able to pass in our session success here like that so basically that is what we can do to be able to just handle that and now if I'm to refresh and then select an image the same image that we are selecting it is previewed if I click reset now it's saying image reset in our flash message if I select it and now say uh save file saved and also when our file has been saved I think it is pro proper if we still perform a reset and that we can be able to just go to our uh method so let me just uh go to our Live Wire class and maybe what we can do we can just call this reset image method so as we do the session flash we can also go ahead and just call the method so we can say this and then reset image like that can call this other uh method this one here such that we'll be able to do the same so let me attempt to refresh I'm going to just use the same image and then we are going to click open and then I'm going to say save and now everything is being reset perfectly if we go to our files and then storage um yes storage app we have a folder called photos if I open this we have two images if I open an image you can see the same specific image is the one that is being displayed this is the end of the tutorial episode if you have not subscribed to this channel I ask that you may please subscribe I also ask that you if you like the video you can be able to give it a like and also engage Us in the comment section thank you very much for your support and following this tutorial up until this point

Channel: LaraPhant

Views: 1,257

Keywords: livewire components, livewire 3, laravel, livewire forms, validation, livewire 3 validation, form objects livewire 3, file upload, file download, navigation livewire 3, lazy loading, pagination, modal, same form for create and update, loading states, calculator full app, livewire 3 events, infinite scroll, dirty states, transitions, writing javascript code, dynamic inputs, dynamic bootstrap modal, prevent accidental deletion, sweet alert, image preview

Id: XShPq1ybUWE

Length: 25min 5sec (1505 seconds)

Published: Sun Oct 15 2023