File upload and download | Laravel Livewire 3 from Scratch

welcome to episode 8 of the tutorial series Live Wire from scratch my name is William Juma in this episode we will learn about uploading and downloading files using laravel lifeware I would like us to create file upload Livewire components and for us to be able to do that we are going to run the command in terminal so I would like to open another terminal we are going to run the command PHP artisan Mac liveware and then the name of our component in this case let me call it upload file or maybe we can just call it file upload like that and remember the word upload is a reserved word so you cannot be able to just use upload whether in your Properties or even with within your Glade wire class so here we have been able to create two files the class which is file upload and we have been able to create the view which is upload.plate I would also like to go ahead and also do a little bit more I like to create the models so in this case we can do PHP partition Mac model and sort of the model is the one that will be able to connect us to that the database in other words our table in the database and I would also want us to create the same so here we are going to have a model called file upload as you can see I'm only capitalizing the F and I want to tag migration such that we also create the migration file so let me do that so now we have file upload created and also the migration so inside here I would like to inside our models we will go to app models we have file upload model and then I want us to just allow Mass assignment and we are going to do that by doing protected fillable like that and then inside our table we will have the file name I do not know if I should call it title or name and then we should have file path just those two so part of the file is where we have stored the file the name of the file is whatever it is that we will type in our input now let us go ahead to our database migration so database is a folder then migrations and then we will scroll to the last migration here this one this one is our file uploads migration and I would like us to create two columns in this table so table string the data type for each of this is just stream and here we call it name and then of course we can be able to copy that and we will call this path like that where we have stored our file so basically that one is okay I would like us to go ahead and do our migration so I will just run the command PHP at his son migrate the reason why I'm also doing the table is because when we upload at least we have somewhere we show people when we are downloading but uploading does not require you to entirely have a table but if you are uploading what will be downloaded eventually you can have a table and show the files such that a user can be able to go ahead and download I would like us to go back to our Live Wire class the class that we created and we are going to do some few modifications to it so what we are going to do we are going to open Live Wire and then file upload this class here I would like to extend this a bit such that we can be able to see clearly the first thing that I have to import here and I will only import one thing I import the others if we have something to do with it so I can be able to use a trait called with file uploads so this is the one that under the hood does the upload for us so with file upload with file uploads and then of course I have to import the trade here so use Live Wire with file uploads and basically once we do that then we are almost set for us to be able to upload a file I want us to have two properties so the first property I'm going to call it name so public name and the next property that you have is a property that is called path so in this case the path of the file I would also like to have the rule validation we have learned about validation so if I do like this you can be able to understand if you have followed the previous tutorials so rule then we can put our rules here so the name should be required like that and then the path we can leave it like that but we also need to have another property which we are going to call file so let me declare it here public and this one is the one that now will handle our file you can call it anything I've decided to just call it file and let me put the validation rule and inside here we can be able to say that what we are uploading is a maybe a file and then the meme types we I want us to allow us to be able to upload PDF and we can also be able to upload a file ending with Doc in the file ending with Doc X these ones are just Microsoft Word files we can be able also to set a maximum upload because if you do not set this when somebody uploads a file you will have issues you might find that the memory is totally consumed and you will need to your app will break so basically this is what we have and because we are using the rule attributes we must imply we must import it so we can say use Live Wire attributes attributes rule like that you can save it so basically that will enable us to be able to use that rule I would like us to go to our view be able to do some modifications there and inside our view I would like us to have a form that we are going to use to to show to the user so here for the title maybe I can just type in here file upload like that and um inside here I would like us to have our form and so we can be able to I want to give this one a class of offset three and column six just to style our form a little bit to make it move towards the center then now we can have phone and close that form tag inside here we can have a div with a class of MB 3 we can be able to close this div too like that but I would like to copy this twice because we will actually be needing it for two inputs one of the inputs is the file name and then the other input will actually be the file so inside here I want us to have a label and you close it and we want it to have a class of form label remember when we started in our first episode we're actually using bootstrap so these classes that I'm putting here are bootstrap classes and here I want to just to just say name so in this case the name of the file or maybe I can call it file name whatever it is it you'd want to do with that then we have the input type is a text and then the class is a form control like that and then I think that is good enough so in fact instead of having this other one below here I just like to copy this and paste it here obviously we will need a button so button I will close it and then of course I want us to have a class over ptn vtn primary like that so that is our button and the name of the button is a save or upload like that maybe let me just call it safe or maybe submit doesn't really matter so we have our form I would like us to know how it displays so for us to be able to display a full page component we will be able to create a routing um route in web.php so this one I'm going to call it uploads upload maybe file upload and then the class is going to be actually the class that we have here what have we called it file upload class file upload like that and then of course we have to import that class here or else you'll be forced to write it full so here we are going to have it as file upload and this is just the name the way I have named it in my Live Wire class I mean the way I've named my Live Wire class just that so once we save this I think we can be able to look at our form so instead of looking at a drop down I would like us to look at file upload I don't know if I've written it singular plural yes so you can see it's just a nice form obviously I need to modify it and so let us go ahead and do that so inside here this first one is text this other input is a file so input type file and the name here is a file maybe file like that and then on top of that I would like this form to be submitted to a method called save so here we can have wire now we are doing Live Wire wire submit and we can have save like that in this input we can have wire model and I think we have an input a property called name and then this one here we can have um wire model do we have a property called file I also would like us to handle the errors so for us to be able to handle the errors we are going to just have it here at error so in this case if we have an error maybe I can use a div let me just wrap it with a div so you have a div and then inside here now we can be able to have our error so at error in this era we'll be having the belonging to name then if we have that we can have a span and then this panel you have a class of uh a lot maybe we can just have this text stranger and then we can have the name of our the error that you'll be passed in here so the error is passed in as message so we will have a message like that and then of course we have to end the error so at end Arrow like that so I will also copy this and also paste it here where we have file there and change this to five so after that now our form is is able to be submitted to the back end and I want us to handle saving the file so in this case after we were able to create our migrations I do not know if we were able to migrate let me just do that because it seems might have forgotten so terminal new terminal I just like to migrate our our tables PHP artisan migrate and actually what this will do is just that it is going to copy the newly created table nothing to migrate it seems I had migrated it before so that is okay now let us go to our file upload class and be able to have a method that we are going to use to save so public function save and now in this method what we are going to have we are going to now pass in our our form and be able to save it so what we are going to do we are going to first of all uh validate so you can say this validate remember we have already stated our rules so everything is fine if I attempt to submit maybe I can refresh and then attempt to submit now you can see the validation error errors already are being thrown thrown around now after that we can go ahead and save and for us to be able to save we can just upload the file so we can just say this um file this file store like that and we can say where we want to store our file so in this case I want us to store it in a folder called my files it is not yet created but um Lara will be able to create for us this file but since I want to get the path I can be able to store whatever it is that you are getting here in our Path property remember we are not passing the path properties so maybe from the form so this path like that so this path will be given by a story by this command we will be able to do two things for us if you save the file in my files and it will also give us that path such that we can be able to save it in the database then from there I can go ahead and uh use our model so in this case what is the name of our model it's called file upload file sorry file upload and now we can say create then inside here we can have an array of value so the first thing that we are creating is a name and the name value is found in this in the property name so we can refer it to as this name and then we have the path and the path we are going to refer it to us these path like that and so basically that you'll be able to save this file for us I would like to then go ahead and maybe flash a message so we can say session Flash a session message and here we can have it having a status you can even call it success but I will be doing a tutorial video on flash messaging so we will be able to talk about everything but this one I do not want to complicate it so much so we call it status file uploaded like that and then maybe we can be able to reset our form so we can have these resets but remember if we have it like this it will not be able to reset our file inputs maybe we can do a redirect such that it sort of does a Reload but I'm not at that point of talking about redirects I have a tutorial video which we will talk about that in detail Sona you want us to be able to handle our flash messaging in our view so in file upload view I would like us to handle flash messaging so maybe we can be able to put the session message immediately before the form and what we are going to have is that if session has a status a key called status do you be able to end this if like that and then inside here we can have a div with a class of a lot a lot alert success like that and then we can be able to close that div inside here we can be able to pass our status so in this case using the mustache braces you can have session status basically this will be able to display if our file is uploaded so let us attempt and see if we can be able to upload a file and I want to give it a name of file one just like that and then choose any file within my machine we actually have a file here called episode 8. I want to upload it submit and now when we submit uh we have not been able to import our model inside this class I had remembered but it's skipped my mind so inside our Live Wire class we need to have the file what do we call it yes the file upload model imported so we can say use app models file upload like that and that is the reason why we hit the error I do not know why I'm having an error it seems I'm having an error what is a problem good it seems I'm having a challenge between I play if I upload I'm having a challenge between the name that I gave my class in the name that I gave my model so it seems there is a conflict in this case I would like to do what now I would like to modify my model you create another model in this case some of these things usually actually happen so PHP artisan make model upload file upload file I'm creating a new model you tag the migration because now it seems we have an issue so with file uploads having an issue you cannot declare file upload because the name is already in use yeah it's the error that we are getting here so let me just comment out this app models as you can see it's possible for you to have a conflict within the naming so let me attempt again and be able to create a model called upload file now our model has been created together with the migration so again I'm going to now modify the new model so we will go to app models upload file now this one this one is what we have and in fact I can be able to just copy what we have here the protected fillable you can copy and then we put it in our model called upload file here now it seems is a model that we will not be using probably we can be able to delete it entirely also in the database we will go to migrations the previous migration was the one that hit our data I would like to copy it and paste it in our new in our new table that has been created like that so basically we have been able to go around that I can be able to do migration PHP artisan migrate like that and now upload files table has been migrated so it has been sort of like a workaround so let us go back and continue with our work and I want to go to [Music] the file upload Live Wire class here and now the model that we are importing is now not file upload but upload file like that I think it's good that you have been able to see that our conflict can be able to bring issues so I will also change the model here to upload files upload file like that not files upload file singular like that and I think now we are good let us attempt to upload our file again so I will call it file one and then we will choose the file I will upload this a similar file that we had obviously probably we will be uploading two of them now you can see file uploaded so meaning everything has worked I would like us to display our files that we have uploaded down here so I'm going to create a table inside our inside our Live Wire uh view file upload so here I would like after the form we can be able to have a table and so here I can say table we can close it we can give the table a class of um table just like that and inside here we have the table head can be able to close the table hit like that inside the table head I want us to have a row table row and inside the table row I would like us to have some headings so the first one is a table head and I want us to have a scope over row like that a minuscope over column a scope of column like that then we can be able to close our table head like that and for this one we are going to have just the numbering sort of and then after that I would like us to have two more the other one you have name that is the name of the file the other one now is going to have action in this case you have a download button so I just call it action like that now we can go to table body so here we can have t body like that and then inside here I want us to have a table row close the table row and then inside the table row we can be able to have table data maybe the first one we can just give it a table a class of table head and the scope of row and then of course this one is where we'll have the numbering so maybe I can just put a number here we will be able to do something about it in due time and the others can be just table data without anything so you close this and we just need one more just like that and so here you can see my name and then here we can have a button for us to download so you can have a button and close the button and give it a class over BTN vtn success vtn small to just make it a little bit small the name of the button should be download just like that I would like us to refresh our table and see how it looks our component and see how it looks like yes we have a table that has a file name and download now I want us to go to the what do we call it the Live Wire class and be able to handle in other words display whatever is that you can be able to show in this um table that we have so I will open file upload.php and inside here what I would like to do I would like to declare a public property which is called downloads just allow me to do that sometimes if you have something clear that you are working with you your property can be able to look similar to to whatever it is that you're working with or public downloads they would like us to have a mount function and this function is where we will be declaring our downloads in this case we can see this downloads then we can set it to the name of our model was upload file so in this case upload file full colon all just to sort of like fetch for us all our records obviously at the end of everything in terms of um if you're fetching records from the database you have to have the Mind Over this in other words your query is not being heavy so a query like all is actually somehow heavy but in this case whatever it is that is in the database we need all of it but in this case we can also be able to just specify the name and the path so it's important for me to mention that even though that is not exactly what I'm all about now because you have been able to access the downloads I can be able to show the downloads inside our table so let us go back to file upload and inside the place where we are having inside the table body I can have a four each Loop here for each you can see the goodness with liveware is that you can just be able to continue with your knowledge over blade so for downloads as download and here I want us to have download name so first of all here we can be able to end the loop so at end for each and then after that for the first value which is the sort of like the ID I'm just going to put the loop index and this one you just look through our index and check and assign values zero one two like that so since I want the first value to be one I will just add plus one and then in this one here we are going to have our name so I will pass in download name download name and then of course this is just a button I'm going to give it an action so we can say wire click so when this button is clicked I want us to go to a method and let me call the method download file but also pass in the ID of our file so in this case down lord file like that so once I do like that I need to have a method that is called download file in my Live Wire class but first of all I would just like to know if it's fetching anything from the database and yes you can see we have file one with an index of with a numbering of one and then we have the download button so I would like to upload file too and I choose file here what I would like to do is maybe choose this one and submit it says for each must be an O array of null is given I do not know why that is the case I I first such a thing sometime but obviously you can see that our file has been saved I believe it's possible because I am doing in our file upload I am doing uh this reset so when I do this reset it's resetting downloads so I would like us to just reset the name only we can go ahead and uh maybe reset the name maybe reset the file just those two instead of resetting even the downloads because that is the reason why I have figured why it is uh giving us that so basically we can have that or else it's also possible for us to just do to just do a whole file page reload maybe we can do a page reload if we are to do a page reload then we are going to say read this redirect and then we are going to state where it's going to and I think we have file upload file upload and then on top of that we can be able to set navigate to true like that so instead of having having it like that we can just do it this way and we can be able to return such that it does the reload for us I believe that you work for us perfectly so let us attempt to refresh again now you have two files I want us to upload file number three file three choose file I will scroll and get because I just need either PDF file or um or a word file maybe I can pick this one because those ones are the ones that we have set to be allowed to be uploadable so you can click submit now the page has reloaded and we have the file displayed here and we also have the flash message so I want us to work on downloading so if we click this button right now there's no method to handle it you can see unable to call component method because it doesn't exist so let us go and have that method we are going to have public function download file that is how I have called it when we click that button and so let me just uh extend this such that the code may be a little bit more visible and for us to to to be able to to download a file I want us to just check if the file exists and then if it exists so you can be able to go ahead and download it so you can say if storage disk and now here you can see I'm specifying which disk we are working with so in this case we are working with local so if it is S3 you can be able to say it like that so you can say exists and then we can pass in the file the place where the file has been saved so in this case uh because I'll be passing the ID of the file I can be able to use a dependency injection and just have file I mean upload file upload file because it's the name of the model and then a variable upload file and of course this one now will be able to get for us the data over that single file so in this case I can just check it as follows upload file path in this case now it's a location of our our file so if it exists if in that path there is a file that exists that has the file name that we set then I want us to download so we can say return storage download and remember they asked so many ways in which you can be able to do this so then we can pass in the upload file path let me just copy this and paste it in here we can pass in the path and we can also decide to change the name now to the name that we saved our file with so in this case I can say upload file name like that basically that to be able to download otherwise if the file does not exist I would just like us to have a session message session Flash with a status file not found like that so if this condition is not satisfied and maybe inside here you can also flash a message before we do the return can be able to flash a message that file is downloading so something of that sort so you can say file is down loading like that then this one file not found I have to close this one the semicolon like that I would like us to go ahead and attempt and we are having a problem yes I think here we need also to close the semicolon Yes everything seems to be fine I want us to refresh now I want us to attempt to download a file yes we need to import the storage facade I don't know why I forgot so let us go to file upload.php and above here we can be able to import storage facade and what we are going to do is just type in use illuminate supports facades storage like that basically that would be good enough so let me refresh again to remove our error and then attempt to download it's uh saying that uh the argument should be string in the what is given let me just do a little bit of debug on our code before we do the download I would like to see if there's something called upload file so I want to DD upload file like that and see if it's something that is being returned such that we can be able to see if everything is fine so download and now we can see we are having an array with the two values a name and path and that is not passing in our file why is that it's not passing in our file let me attempt and check were we passing in the model in our in our component so file upload wire click download file and here we are passing in oh I did a mistake here we are supposed to pass in ID download ID I don't know what I was doing when I was typing that we have download name and download ID that's the reason why we have gone through that era so let me refresh now when we click download file 3 now you can see we are having the data of that file so I think from there it is possible for us to download a file I want to go to upload class and be able to comment out our dampen die with the thing that we are using to do sort of debugging and now I want to download file 3. now file is downloading and the file is here and the name is file three I want to download file 2. it's downloading and the name is file too I want to download file one it's downloading and the name is file one thank you very much for following this tutorial uh episode up until this point and this means this is the end of the tutorial episode if you are not subscribed to my Channel Please Subscribe and hit the notification Bell because by doing so you'll be notified when I upload another awesome video if you like the episode you can give it a thumbs up and you can also share it thank you

Channel: LaraPhant

Views: 1,724

Keywords: livewire components, livewire 3, laravel, livewire forms, validation, livewire 3 validation, form objects livewire 3, file upload, file download

Id: cJ3vWqSO7Fo

Length: 48min 16sec (2896 seconds)

Published: Sat Sep 09 2023