Uploading Multiple Images with Laravel and Filepond: A Step-by-Step Tutorial

foreign months ago I have created a video about laravellian file born to upload images and I had the comments two comments in that video how to upload multiple images with a file Bond and laravel and that's what I'm going to do in this video so here I have the example we have the form for the post with a title and description and here we have the drag and drop for files from the file Bond so when we create a post also we are going to upload multiple image and assign to that post so for example just let that something here and also for the description and let's browse the images and I'm going to select two of them and yeah we have a preview and it's going to upload and right now it's going to upload on the temporary directory directory and also I'm going to store them on the temporary database when we create when we create we are a Dragon bug and the files is going to remove from the temporary directory and is going to move to the new directory that's the final one and also I'm going to remove from the temporary database and move to the final database which is the images migration okay let's start by creating first the laravel project so on the terminal I'm going to say learnable new and I'm going to name it Lara port like this then on the file Bond let's go to the documentation and I'm going to zoom it and first let's go to the installation and I'm going to use with JavaScript and also without draw the CDN so let's copy this for the style sheet open the terminal and let's navigate now in the Lara pond project and I'm going to open the project with a vs code and work there first let's open the resources views and welcome and here and whether remove everything so let's remove this also the Styles and here I'm going to put the styles from the file Bond and also let me just add Italian CSS so I'm going to navigate in Italian CSS get started and also play with CDN and I'm going to navigate down here because we have also the plugins so copy close and paste also here the title CSS then let's go and copy the script and paste right here if I scroll down now implementation example we have the example here and just copy this line of code and also paste that right here save and now let's create the post okay so we need the post model and migration we need also the images migration and the model and the temporary images so when we click here first we have entered store on the temporary directory and the database and then when we upload we are moved to the final images directory and database so for that let's open the terminal and I'm going to start by creating the post first so artisan make modded post Dash M for migration and the same for the image and now the same but here I'm with an uh name this temporary temporary image okay let's close and now let's open the vs code and I'm going to close for now but welcome and let's open first the post table and here I'm without the title and description so let's say so I added the title in the description let's save let's close and let's open the images okay here now I'm going to add the post ID also because the images is going to belong to the post so let's hit the sign table version ID for the Post underscore ID and also I'm going to add the constraint like this here and then let's add the table string for the name and also for the path of the image let's save close and let's open another temporary images migration and here I'm going to add dollar sign table string for the folder here is going to be the folder ID and then let's copy this and let's paste it here here is going to be the file name system with the save file and let's close now I'm going to open the post model and here what I'm going to say protected dollar sign coordinate to be equal with an empty array and let's copy this and save and let's do the same for the image model and also for the temporary save close and open the temporary image and paste it here now let's open the dot EnV file and here we need to create the Lara Bond database and also if you have password for the database added here hey I'm going to add the password and let's open the tables plus and here I'm going to create a new database with the letter Bond name and let's open the Terra Bond okay now open the terminal and run the Artisan migrate fresh good now we create the controllers so let us say artisan make controller and first is going to be the welcome controller welcome controller and it's going to be invokable so select two here then I'm going to make a controller for the storing the temporary image so I'm going to say with an emit upload temporary image controller and also this one is going to be invokable next I'm going to make a controller for deleting the temporary image so I'm going to say with the name it delete temporary image controller and the last one so it's going to be invocable so the last one is going to be the uh to store the post so I'm going to say make controller and I'm going to name it so post controller and also this one is going to be invoke cable good now let's open the vs code and let's open the web browse and register all the routes there the first thing is going to be the welcome song with this air out and get slash and the controller is the welcome controller class okay the second is going to be the upload and delete the temporary so I'm going to say route this is going to be post the upload and the URL is going to be upload also the controller is going to be the upload temporary file temporary image controller class then for the delete is going to be the route with method delete and the URL is going to be revert okay or you can listen name it d delete or destroy what you like let's say delete here and the controller is going to be the delete temporary image controller class like this and the final one is the store the post so let's say route post slash and the controller is store post controller test save okay so we have the router get the show the form then the upload and delete the temporary images and the final list store the controller the sort the post sorry let's open the welcome controller here we just need to return the view so let's remove this and let's say return The View welcome just like this save and close now just let me open the browser and see if that works if I open the layout Bond Dot test yeah we have an empty a black page good now let me open the welcome welcome page and in here I want to add the four okay so the same we have here so for that I have prepared the form and I'm going to paste it right here and I'm going to show you so here we have the div with some classes then we have a form with method post action slash and then type multi-part form data we have the csrf token then a div with the label for the title and then the input with name title and also the error for the title then we have div for and the labels for the description and the text area with name description and the error for the description also for the title and the input with name it image and also I added multiple here and just let's save this we have also the button and let's open the browser and refresh now yeah here we have the four okay now let's uh Implement also the we need to upload the image because right now if I select the image yeah it's not uploading and also let's add the preview plugin so if you go to the description and scroll up on the plugins here let's select the image preview and I'm with that through the city and also this one so just let's add the Styles under the valpon CSS so scroll up and here we have the file Bond paste it here then add the JS here copy and the Json let's close this so right here the JS and the last one is the say file Bond register plugin copy that and I'm going to paste it right here and with that now if I open the browser and refresh if I browse select and it's going to preview the image very good now let's work with the app to upload the image and for that we need to go here first and let's navigate in the server so the API server and scroll down you can read more for the server endpoint but here we have the upload purchase so the file Pond is going to upload file so for example this one has multi-part form data using a post request okay then the server saves the file to the unique location for example TMP slash the ID of the here is going to be the folder but with the unique ID then the file name and the server after it's going to upload the image is going to return the unique location ID so the folder in the text plane response then the file point is going to store that unique ID in a hidden input field and the client is going to submit the file Bond Point form so when we submit the form is going to contain the hidden input field with that unique ID and the server then is going to use that unique editor move the file to its final location and remove that folder on the temporary folder okay so let's scroll down and when we have the example for the URL files Bond and one more thing I'm going to use also the revert the delete the image so here we have the revert while Pawn is going to send the delete request with the folder ID as a body and the server is going to remove the temporary folder masking that ID and it's going to return an empty response good so let's uh if I scroll more down yeah here we have most of the process and the revert and let's copy this and move it all right here so I'm going to paste it here and just save for now good we have the approaches and the project is going to have the URL to upload the image so if I open the web routes we have the upload and to delete we have the delete so we don't need the fetch but we need the revert which is going to be to delete that I'm going to say slash delete and also I'm going to add the csrf tokens I'm going to say headers add an object and you can see also here or the header so if I scroll down also with the credentials as you can see just yeah here we have the headers and add custom header in our case I'm going to add the csmf tokens I'm going to say X Dash csrf Dash token and here is going to be double quotes and the csrf underscore token from there that okay now let's work with the after upload the controller the upload the image the image the temporary image thumb with open the upload temporary image controller okay for here first what I'm going to do you can also make a validation but right now I'm not going to do that I'm going to say check if the request has the file as file and the name of the file is the image so if I open the welcome and let's open the form and the input type file has a name image now if the request has that file I'm going to say dollar sign image to be equal with the request file image okay then I'm going to get the file name so I'm going to say dollar sign file name the be equal with the image and the helper get client original name now we have the name I'm going to create that the folder uh key our unique ID as you as we saw order so I scroll up as you can see we need to create an ID for the folder and let's do that I'm going to say dollar sign folder to be equal width and with the use the unique ID now you can use more a custom one but for quick I'm going to say unique ID and I'm going to add the image string Dash and say true here okay and now I'm going to start the image I'm going to say that as an image and with the use the store sorry store us and here we need to add the path to name and options so the path is going to be inside the the images slash I'm going to say DMP slash and I'm going to concatenate this with the folder dollar sign folder so the unique ID we created here and also I'm going to pass the file name so dot PSI file name here so the image is going to be inside the Images slash DMP slash the folder ID and then slash of the file name then after we uploaded the image I'm going to store in the database the folder and the file name in the temporary so let's say temporary image create and pass an array with here we need to add the folder which is going to be dollar sign folder and also the file which is going to be the file name and then we need to return the folder it's another sign holder if everything works uh goes well otherwise just return online testing and let's save and let's see now if I open here the storage up public nothing happens and also let's open the dot tnv file and what I'm going to do I'm going to say down there thank you file system disks to be public and Save good now let's see if we can upload the image here and also on the database if I refresh and let's open the temporary images we have empty here right now let's try now if I refresh here and just let's say browse let's select this one say open and yeah we have upload complete very good come here and inside the public now we have images and as you can see we have the download image right now here so the image is uploaded inside the Images slash DMP slash the image with unique ID and the download jpg inside let's see also the database refresh and yeah we have the folder we have the file very good now what what I want is also if I click I want to remove that so for that we are going to work with the revert and for the revert we have the delete let's close this because we have we are okay now let's work with the delete temporary image controller okay and because here we are going to get from the body I'm going to remove the early quest so let's remove the request here and what I'm going to do I'm going to say create a temporary file which is going to be equal with or image you can say temporary image where the folder and the folder we are going to get from the bodies I'm going to say request get content first so if we have now the temporary file or image you can say let's say better temporary image here and now I'm with the check if that exists so if dot assigned temporary image if we have I'm going to say storage let's use the illuminate support facade storage and I'm going to delete that so delete directory and pass in here the Images slash DMP slash and I'm going to concatenate with the color sign temporary image folder because we store on the database and we get from there and then also delete the database somewhere sign temporary image delete like this okay and in both ways I'm going to say return response no content like this save and let's see now if I come here now you can watch on the database we have this on the temporary images also also on the storage we have the file now if I delete if I click on the X it's going to delete the image here and also I expect to delete the from the database because here we go to delete the directory and to delete that from the database so let's see if I come here and say X C on the database yeah remove now let's see if uh from here is when the remove and let's see on the database now if I refresh yeah good okay now let's work with the final which is and let's close this to store the post controller and let's move like this or I'm with the height the first thing here I'm going to say dollar sign validator I'm going to create validator here is going to be equal with a validator from other either we need support facade make and here are the requests all and I'm without the array and say here the title is going to be required because now we are not going to work with all the details here just say required and also the description to be required like this then if the validator fails because just for that I created the validator if we are here and for example I want to upload this and this open and also I added the title but I forget the other description and say create is going to I want to make some changes so if I hit create it's going to return back to say a description uh is required but the images is going to be the remain uploaded support that I created here the validator and I'm going to check if that fails I'm going to remove the images also and then redirect back so let's first let's uh delete them and refresh and come here and check somewhere to say if dollar sign or validator fails if that fails I'm going to say dollar sign temporary images I'm going to get all the temporary images from the temporary image bold and I want to delete them so I'm going to say for each dollar sign temporary images as temporary image and we want to delete that and to delete if I open again the delete temporary image we need to do the same here first we are going to check the delete from the directory and then delete the temporary image so I'm going to copy that and paste here now if you don't like the just copy and paste you can also create action and do that but I'm going to do in this way and maybe create an action just to store the post but for now let's see so I make a for each and storage delete directory temporary image folder we have here the same and delete the temporary image from the database okay after that I'm going to say return is going to return and redirect or we can say back redirect slash but I'm going to redirect with errors passing the validator and also with input like this okay now I'm going to store another post I'm going to say dollar sign post that be equal with post create and pass here the validator validated like this so the title in the description and then we need the so if this is not failed so everything works okay we are going to create the post and we need to move the files from the temporary directory to the final location and also from the temporary image to the images uh database migration so for that what I'm going to do I'm going to let's just cut this and paste it right here because also right now we I need the timber also temporary images and when they move to the new directory and then delete also here so after we creating the post I'm going to say again make a for each here for each dollar sign temporary images as dollar sign temporary image and here now I'm going to copy the file from this folder the new to the file and once I'm going to say use the storage facade and say copy and I'm going to copy from the Images slash DMP slash and I'm going to concatenate dollar sign temporary image folder and I'm going to put concatenate also the Slash the file so let's say dollar sign temporary image file to the new location which is going to be just images and here I'm without the Slash and now the same added the concatenate the folder in the file so let's copy that and paste it here and I'm going to zoom it just out for a little bit just to show you so here we have storage copy from this location I'm going to move to just images and pass the folder slash the file name okay with that now I'm going to say image modded create or we can use the post if I create the if we created the relation method but I'm going to say image create pass here the post underscore ID and say it's going to be that assign post ID then the name with Center B dollar sign temporary image file and the last one is the path which is going to be to the path which is dollar sign temporary image folder concatenate by with the file for dollar sign temporary image file like this and just let me Zoom it now to have you more clear so image create we added the post ID the name which is the temporary image file then that path temporary image folder and the file slash files so this thing here after the images and now we need to delete the tmb so let's copy that and paste it here after week after we created the image and copy that I'm going to delete and then delete also the temporary image so let's do that first we copy that then we create the image then we delete the directory DMP and also delete the DMP image from database okay and with that now we are good just return redirect so let's say return a redirect bug to say slash here and let's save and let's see now first let's open here the images empty and already open like this and let's close also this one and let's open the database on the pose images and temporary images empty open the browser and refresh let's create the first post and I'm going to save first post here some description and let's choose have these two images let's show images uploading very good and now let's create redirect bug good let's see first here on the public images yeah we have two images temporary is empty let's see the database temporary images refresh nothing go to the images we have two of them and let's see the path is images image of ID and Lara Del Beauty as the name and the pose is the first postcode now let's say come here I am without the title but I forget to add the description and let's add just one image yeah it's going to upload that and let's see here now on the temporary we have the folder and the image also if I go to the temporary images and refresh yeah what we have here but if I say create now we added back with the description field is required the title is remaining here now let's see the image it is here or not if I refresh yeah it's removed from the database and also is removed from the temporary directory okay friends that's it how we can upload multiple images with the laravelen oil pump now if you like don't forget to subscribe to my channel and like the video and see you in the next one all the best

Channel: Code With Tony

Views: 7,366

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel filepond, laravel media, laravel media upload, laravel filepond image upload, laravel multiple image uploading, multiple image upload with laravel and filepond, laravel image preview

Id: GugZZc3jrJI

Length: 37min 23sec (2243 seconds)

Published: Wed May 03 2023