Multiple file upload with progress indicator| Laravel Livewire 3 from Scratch

welcome to episode 32 of the tutorial series Live War 3 from scratch my name is William Juma in this episode I want us to handle multiple file uploads and I also want us to have an upload indicator that you'll be able to just show the progress of our upload so we will have a progress indicator implementation also so let us go ahead and look at what we are supposed to do I'm going to create a component so let me just clear this because it's displaying poorly so I'm going to run PHP Artisan makech Live Wire I want to call our component multiple multiple uploads like that I'm going to hit enter it's going to create our component I want us to go to our web.php and create the routes for that and so I'm going to just copy this route here and replace and we are going to call it multiple hyphen uploads like that and here also for the class we are going to call it multiple uploads like that I also want us to import the Live Wire class above here and again the name is multiple uploads like that so basically now once we have it like that we can actually be able to access our component if I run Local Host 8000 SL multiple hyphen uploads you can be able to access our component I want us to open the bled view for this component and be able to do some modifications I want us to change this name here and call it uh multiple file upload like that and then I need to have a form here form which will close it like that and then inside our form we are going to have an input but let me have a div with a class of um MB 3 to just give it some little bit of styling we will close that div and inside here is where I want us to have our input so input input type is a file and then the we need to have wire model wi model in this case I'm going to call it files then of course we can give it a class of form control hyphen control like that and then I want it to I want it to have the multiple attribute to just ensure that it can allow us to be able to pick several files from our machine not just one file so I believe that is that and then I also wanted to have an ID sometimes when you reset a form in live where once the upload has been done and then you're resetting the form you you remain with either the name of the file that you had uploaded previously or maybe even the number of files that are in the in the upload so for us to be able to delete that I want to pass an ID here which I want it to be unique that is the only idea that I have so here what we are going to have is a files we call it files then we can be able to pass in the ID uh at property which I'm going to set in our live work class so we have files and then the ID so the ID we try and ensure that it's different at every instant and once we able to achieve that we will be able to be resetting our form very nicely now I want us to have a button and here I want to call this button upload like that and then we want to give it a class over BTN BTN primary like that and then I also want to have wire submit here where we will be submitting our form to the method so in this case our method I want to call it upload file remember in Live Wire upload is a reserved word you cannot be able to use it so you can be able to add something in front of it to be able to just uh make it look nice so basically this is what we have I also want to just size my form a little bit I'm going to add a class here of offset hyphen 3 column six to just make whatever it is that we have look nice I'm not going to refresh because it's going to give us the error for ID and I want to go to our live uh class that is multiple file upload I open it and here I want to import the attribute with file uploads so live wire with with uh file uploads like that and then I can be able to use that attribute here so we can have use uh with file uploads like that and then now I want us now to go ahead and set our properties so in this case we we are going to have two properties only the first one is um so public files is the files property the one that will be holding our files and I'm going to set it on empty array and then there is this ID public ID which this one we are going to just use to increment it to give our input a different ID every single time I also want to do validation and I'm going to do um the validation using the rule attributes so I'm going to import use Live Wire uh attributes rule like that then obviously now for our files I can be able to pass a rule here and so you have hash and then square brackets and then Rule and inside here I want us because we are we we are checking the rules for an array we are going to have an array here which we going to call files and then we are going to check for anything inside the array so I'll just put files and then put a star in front of it and this one is supposed to be inside quotations like that and then now we can be able to put our validation rules here so the first thing I want it to be a file and then I want I want it to be required so if we click upload without um having anything uploaded or in other words anything picked from our machine it should be able to give us an error and I want it to be having a Max of 10 24 that is 1 MB and I think that is good enough I want us to work on saving so here we are going to have public uh function upload I think it was small upload file like that and then inside here we can be able to maybe check our validations so we can be able to just call this uh validate that way and then on top of that now we can be able to Loop through our files and be able to upload so in this case I have an for a for each uh loop so for each in this case um we are checking for the files so this uh files as file so uh plural to singular and then we can be able to go ahead and save our file so we going to have file and this is the property that now has our single file and then we can have store and then inside here we can pass the the folder with which we want to save our files so let me just save it in files that will be good enough of course you can be able to pass the folder where you want to save it after that I want to reset the files in other words to remove the files from the property so in this case I can say this uh reset and I want to reset files so you return it to an empty uh array and then I also want to increment the ID so this ID in this case we will have we will have Plus+ to just increment it then we can have session uh Flash and we are going to pass in our status let us say success and then we can be able to say files because now in this case we're targeting to save a little bit more than one file so files saved successfully like that then of course I need to give the ID an initial value of one so in this case we can say uh we can say ID is equal to one like that so basically that is what we have on this side I need to go to our Live Wire class to be able to I mean our Live Wire component to be able to handle the session message but here as you can see we are having this is a code that we have in upload file so let me go back to our blade file and I want us to handle two things to be able to handle the session message and also be able to handle validation so the session message I can uh maybe we can be able to display it above form so here we can say at if session and inside here we can pass success and then we can have at end if like that and here inside here we have a div div with a class of um of alerts alert success and then inside here we can pass our session message so here we can have session success like that and that you be able to handle for us the session messages I want to refresh and see how it looks like ah we we having a very nice this uh form I also want to implement um the loer so in this case the progress bar which will indicate for us that our files have been uploaded successfully and to do this I'm going to just go to the liveware documentation so liveware lal.com my internet is having issues let me try and see what I can be able to do about that and in our in the Livewire documentation I am looking at uh storing uploaded files and we are looking at progress indicators so if you can be able to check you can be able to get whatever is that I'm going to uh copy so here we have a div and here is it's it's just an Alpine component that is used to display a progress indicator so I'm not going to create one since we have one that is already implemented for us here we are going to use it for now and what I want us to do I want to have it uh inside where we have the form so here I'm going to have it here and so this is the opening tag for our div and I would like to close it at the end where we have the button so I'm going to close our div here like that but of course we need to also pass in our progress indicator which I'm going to put it here so I want us to have a div with a class of mb3 again MB iph 3 and inside here is where I would like to put our progress indicator now and so we can go and copy it here and this is what we have so we are we are showing when we have anything uploading we will show this indicator so let me just copy and paste inside here now you can see we are having uh the hooks that we are listening to we are listening to when it's uploading at the initial we are setting it to false and then now when we start uploading we can be able to set it to true and then when we finish uploading we set it to false and then we can be able to have the progress that is passed by event. detail. progress and then of course now we will be showing that uploading uh uh property in this case so let me save and then refresh we see what we have now I can be able to refresh and then I want us to choose several files from my file F from my machine without any consideration because in this case we are not specifying the the the mem types and whatever so all those I want to upload all of them and as you can see when we uploading we are having the indicator there when I click upload now you can see file saved successfully and then then that means we have been able to upload all the files without an issue this is the end of this tutorial episode if you have not subscribed to my Channel Please Subscribe if you like the video don't forget to give it a thumbs up I also encourage you to share this video and you can also be able to comment if you have a question in the comment section thank you very much

Channel: LaraPhant

Views: 1,483

Keywords: livewire components, livewire 3, laravel, livewire forms, validation, livewire 3 validation, form objects livewire 3, file upload, file download, 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, multiple file uploads

Id: Z7gFpuXvgq4

Length: 16min 58sec (1018 seconds)

Published: Mon Oct 16 2023