Laravel Upload Files with Filepond | Laravel Tutorial

thank you Hello friends welcome in this video I'm going to work with laravel and file Pond I'm going to use file bond to upload the images nicely so here we have the project I have a form in the home page with the name and the image and let's show you the vs code first let's go to the web routes we have Road cut Clash post controller and the welcome method for the Post slash post controller and the Welcome Store and the store method sorry and in the post controller now we have this welcome method we just returned the view welcome which is this view I added the timing CSS here and first we check if the session has success we show that if the session has danger we show and then we added the form with csrf token method post action slash and ink type multi-part form data label and input for name also there and label a new input for the image and let me show you also the database migration for the Post we added only the name in the image and in the post model I just added the protected billable and right now if I just say submit here we have please upload the image because in the store method we check if the request has file image do something otherwise return redirect with the danger and now if I type something and also choose the image where the Act was created and let's open also the database here we have posts and if I refresh yeah we have one post and the image is this this unique ID folder slash the name of the file good now let's add the file Bond here so let's go to the installation and we are going to use JavaScript I'm going to add Row the CDN you can install also row happy npm so let's go here and let's add first files copy in the vs code welcome page all the logic is going to be here I'm going to add inside and then we need to add the script above the body okay then we need to implement I'll just copy this to and paste it here and if I save as it is right now and let's come and refresh you can see we have this nice drag and drop here okay now right now it's not going to do anything so I just inspect the element and let's go to the network see the browser yeah we have directly error let's go in the documentation and we need to go to the server and we have server endpoints approaches purchase chunks and revert we are going to use the approaches and the revert endpoints in this tutorial so here the we have the the upload process the file Pond uploads the file as a multi-part form data using the post request okay the server saves the file to Unique location so example TMP slash and this is the folder ID and then the file name and we need so the server returns a unique location ID so this ID in plain text we need a return this the folder ID in plain text and then file point is going to store that unique ID in the hidden input and when we store a form we're going to have that hidden input field with that unique ID and then the server uses that unique ID to move the file to its final location and remove the folder but the more the file we need also the file name so for that one way is to add the file name when we upload in here when we uploading the save the file name in the session or we can create a database and store in the database and then remove from the database when we save the different location I'm going to use a database so for that let's open the vs code terminal here and I'm going to say artisan make and just let me clear this and what is on make a model and let's make a I'm going to name it temporary file Dash M for migration and what we need we need to add the folder ID and the file so let's go inside the database migrations to the last one and here add table string and I'm going to save folder here copy paste and say file you can add file or folder ID but I'm just going to add like this save close this one and we need also to go inside the model temporary file and not protect it dollar sign fillable equal with an array of or folder and file like this save and close now let's go down we don't use chunks here we have the revert we are going to use the revert so file point is going to send a delete request with that ID with the folder ID as a body when we click undo button and server needs to remove the temporary folder masking that ID so for that we are going to use that ID we are going to store in the database and then if we click cancel we are going to check if that exists and delete and let's scroll down scroll down and we have the URL here and the method projects post revert we have delete and yeah I'm going to copy this one so let's copy this and let's go in the welcome here and paste that one now we need only the process and revert and or the projects the URL is going to be slash I'm going to name it file Bond Dash upload and for the reward I'm going to say file Bond let's say delete or we can say uh maybe temp temporary upload and temporary delete Maybe okay save if I save now write now this is not existing so just let's show you the route is does not exist so let's choose the file and yeah we have 404 not found let's go and create the road here so I'm going to copy and paste this one the first one is going to be post the second is going to be a delete method okay so the revert is going to be delete the process is post we saw up here yeah the purchase is type post and the revert type delete and here we need to add the temporary upload and we can name together the same but I'm going to change that and now here I'm going to say temp upload and here temp delete foreign let's create now the upload and delete because we don't have them so just copy go here and after this I'm going to create that method with a name upload we need the request dollar sign request and what I'm going to do here first let's get the image and then get the file name and I'm going to return the file name just a test so return not very dry but return dot assign file name and let's save this if we go here now and refresh we're going to have a error but just to show you yeah now we have 419 because we need to add the csrf token so let's go in the vs code in the welcome when you send the server we need to add also our headers here so let's say headers and add an object with the X csrf token which is going to be the laravel csrf token double color braces csrf underscore token like this and now if I save and refresh clear this up clear the browser browse and go here now as you can see we have upload complete 200 and if I click here response so we have that file name which is vs.png okay we are okay with that now we need to when we go to the Post tell them upload we need to upload the image but first we want to check if we have the if the request has files so let's copy that and paste it here and then close if we don't have we need just a return uh let's return an empty string because as you saw in here let's go up the when I save that the server Returns the unique location ID in text plane so we need expect a string and for that we are going to return the folder ID or the empty string now here we get the image or we get the original name and let's just create the folder and store that image so let's copy that and paste it right here we have the folder and we have restore the image now we need to add the file name and the folder to the database we need to create a temporary file what we named so just let's say temporary file create and let's say folder is going to be the folder we have here and the file is going to be the file name like this and then we need to return notify name but return in the folder okay and we store that in the post slash temp directory so let's go inside that storage up public posts and right now we have I want to show you I added here the pi system this is the public so for that we're going to have in here okay now when we upload the image I want only come here the store to create a new post we don't need to check if the request has filed because we are not going to get file from the request we are going to get only the certified font stores the unique ID that folder ID in the hidden input and that we are going to get and for that we are going to check now first let's say here we're going to check if the temporary file with that folder we get from there exist so let's come here and say dollar sign temporary file and say temporary file where the folder other request and that will get us a image get the first one because not the first one and let's before that let's say the intent the request and let's see so here if I refresh and let's uh the test here let's browse now it's going to upload the image and we don't have the temporary files because we need to add we need to call the Artisan migrate so let's say artisan migrate fresh and let's refresh again and let's say name test and browse the file okay now if I click submit so the request we get three parameters token the name and the image is the folder ID okay and of course if we go now inside the storage are public we have posts and we have temporary file and the folder here and we have two because we try two times okay now we check if the file exists in this temporary file because if I open now the database and refresh we have also the temporary files here and we have that and we are going to check based on the folder ID if that is okay so let's say here's a temporary file like this now dollar sign then the file exists well we don't need to get the image as I said also what we need to do is the move or copy the file that we have in the temporary directory and the folder here and move to the final uh several use that unique the move of this file to its final location okay so for that we need to do and we can do that with the storage facade so let's say here storage and use copy here and we need to add the posts slash attempt directory slash concatenate with the temp file folder okay concatenate less and now file temporary file like this so we get from this uh path and we need to move to the new one so I'm going to copy because we just I'm going to move remove this temporary from temporary just direct directly in the post like this so you can add new one what you like and now we copy the file we are going to create the post but here we need to add the temporary folder foreign folder the same for the file and then before we redirect back we need also to delete now the temporary file okay and also we need to delete the folder and the file is inside here so let's say first delete the folder and I'm going to use the storage facade for that the storage then I'm going to delete the directory here and pass post slash time directory and now add concatenation dollar sign temp file and the folder okay and now the last thing is to delete the database so again temp file delete and then we redirect back with the success so we first get the temporary file based on that request image we get so based on the ID will get us a hidden input and we check if that exists we are going to copy the file inside this one and move to the new to the final location then we create a post we delete that directory so we move that to the infinite location and remove the folder okay and also we delete that database and return back very good I think we are okay let's save and now let's delete and try one more time here delete this and let's run it is on Migrate flash again so we have a clear database if we come here okay and refresh here let's say test browse choose this one click open upload complete and now if I come here and go to temporary files and refresh yeah we have that here because this is in the temporary stored and also here in the post temp we have the folder and the file very good now if I say submit post created here we have now inside the post that folder and the file and inside the temp we removed that very good and also here is if I refresh remove from temporary files and we have now created the post that's it how we can add the file Bond here and that's it about this video in the next video we are going to do more nice things I'm going to add as I said the revert option so if we don't like we can if I come here and select and for example I changed the mind and I click here I want to remove that folder but right now if I go to here in refresh yeah we don't clean the database and also if we come here is the um the temporary we have that folder here in the file so when we click we need to clean the database and the folder in the temporary directory so see you in the next video friends all the best

Channel: Code With Tony

Views: 8,135

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel upload image, laravel upload files with filepond, filepond with laravel, upload files laravel 9, laravel 9 upload files, how to upload files, how to upload files with laravel

Id: 7bF3L78mIS4

Length: 25min 16sec (1516 seconds)

Published: Sat Oct 22 2022