Laravel File Upload with FilePond: Step-by-Step

hello guys what you're about to watch now is one free lesson of my course about file uploads in laravel and here i'm talking about file pawn javascript library to make your input for the file upload with a better user experience so it would look something like this so you would upload the file it's showing uploading percentage and upload complete so how to implement that with laravel along with sparty media library it's all in this video if you want to purchase full course go to laravel daily.teachable.com at the time of shooting this video that file upload course is not published yet maybe it will be by the time this video airs on youtube but even if it's not published you can purchase yearly membership which will give you all current 14 courses and all the upcoming courses for a year ahead now let's take a look at the video and file upload with filepond now let's make our file upload input more user friendly with a better user experience for example with a package called filepond let's see how it works so if you browse and upload something it uploads and shows upload complete and then you can fill in the rest of the form here's the homepage of filepond it has over 10 000 stars on github and probably the most important thing why i've chosen this package over something like drop zone or others it's framework agnostic and it's easy to install so i will show you a demo without any jquery of ujs or react or anything just plain javascript but at the same time there are adapters for all those frameworks i've mentioned so currently we have input type file with the name avatar and it looks simply like this now let's transform it into file point installation is very simple i will choose from cdn so we need to add this css to the header and what is our header in register blade it extends guest layout which is actually guest blade in laravel breeze in your case it may be a different parent layout but you need to paste here somewhere in parent layout and then js before the body somewhere here okay we installed filepond now let's initialize our input field and this is pretty simple you have script which you put somewhere below on your blade file so in this case we will have a section called scripts and section paste here and in the main guest blade will have yield scripts section for any javascript and then let's make it not input type file but input id avatar and assign id avatar here and that's it let's refresh the page refresh and we have this simple file point area but it wouldn't work yet it just looks good on the front end but it wouldn't upload file anywhere you need to understand what happens when so when initializing file upload you need to specify the server api endpoint api url where filepoint would temporarily store that file so that file will be stored before all the form is submitted and then after it's submitted we will update the file and store it where it actually belongs so for now we just copy this into our register blade here at the bottom set options and for now let's store server to upload or slash upload so this will be our url to post all the files for any upload for any file of the project and if we try to do that now so we refresh the page we browse something and actually let's open developer console so i will show you network and browse and upload something it will show an error because upload is not found 404 in the console you will see upload 404 not found because we haven't created it yet but now you see the mechanism it tries to upload the file immediately and we need to store it somewhere and then update after the form is submitted it is explained really well in the section configure our server process here's the temporary file processing mechanism so it uploads the file somewhere we need to store that on the back end in some temporary unique location so create a special folder return that folder name or id to the file point then it is stored in hidden input field and then we get that hidden field to the actual registration submit and then we move that file wherever we need to and on the back end for this we will still use spitey media library so first let's take care of the upload so we need to create that server upload in our routes web let's create route post and it will be public upload and let's create a separate controller for this php artisan make controller upload controller like this then we have upload controller class and the method let it be store we don't need any name because we are calling that from javascript and in the store method public function store let it be request and in here we just save it temporarily somewhere similarly how we did with registered users controller here so let's actually copy that part like this uncomment so if we have request has file avatar you probably could do it more flexibly like has file upload or something but in this case let's stick to avatars and we store as user id at this point we don't have any user id so we need to generate folder name somehow unique for example unique id dash timestamp which is now timestamp something like this and let's add folder here and let's remove the thumbnails at this point and we don't need update and we need to return folder like this otherwise let's return empty string because filepoint asks for a string right now we will bump into another error and i will fix it in a minute let's refresh this upload the file and in the console you will have 419. it's not 404 anymore so the url is found but 419 means there is no csrf token passed so every post request in laravel is automatically protected by csrf and it is good and how to pass that csrf in the blade we don't have ad csrf here but in file point we can pass anything we want here with some structure so server will be a structure of url upload and then headers like this and then we need one header x csrf token with value csrf token so this is where we use laravel but we need to wrap it up in javascript variable now let's try again refresh the page upload again and now as you can see upload complete network and the return is 200 and the response is the folder name now if we navigate to that folder name which is storage app public because i'm using public disk here then avatars then tmp and among my previous tests that i've done before shooting this video this is our last folder with actually file uploaded but it's not registered in the database yet so how we will find out what is the file name and how to pass it so in our actually register user controller in here we will change add media from request to add media with full path name and then to media collection so full path name in our case is storage path app public avatars tmp let's move it to another line so tmp slash folder name which will be request avatar which will come as a hidden field then slash and then we need to have file name from somewhere and it is not passed from the file pond so we need to store it somewhere and we can store it on the back end when uploading so here let's create a temporary files database table where we will store everything about temporary files and we will use that database to then delete those temporary records so let's do php artisan make model temporary file dash m4 migration and we will have only two fields in that database table so temporary files table string folder and table string file name that's it and whenever we use that file we will delete the record from temporary files in the temporary file let's make both fillable file name and folder like this and then in our upload controller let's have temporary file create folder folder file name file name that's it and then in our registered users controller we ask for the temporary file with the request avatar folder name so temporary file equals temporary file where folder equals request avatar first and if we find that record only then we upload the media with laravel media library by sparty we change the file name to temporary file file name let's close the sidebar so you would see everything so we need to associate the media then we need to remove that folder because the file will be moved automatically to the storage app public but the folder will not be deleted so storage path avatar we need to remove that folder and then we need to remove that temporary file record so temporary file delete and also in here we need to remove the validation rule for the avatar because it's not file anymore okay let's check if we haven't forgotten anything in upload oh of course the avatars it should be tmp i'm using avatar's temporary folder here so it needs to be matched with here so now let's try to upload refresh our page browse upload let's see if we have new folder created in tmp and yes we do and now let's fake filler chrome extension to register and we are in with the new file uploaded now the temporary folder is not here anymore because we deleted it and then in the database temporary files should be empty yep it is empty refresh it is empty final thing we need to do here and i will probably leave that to you as a homework is a cleanup of a temporary files database table and files so you should have some kind of a script artisan command which would run probably hourly or something that would check what are the temporary files uploaded for example earlier than one hour or earlier than today which means they are totally not being used and then you delete the record and delete the file name

Channel: Laravel Daily

Views: 37,480

Keywords:

Id: GRXaCfS1qj0

Length: 11min 59sec (719 seconds)

Published: Fri Mar 05 2021