Laravel 10 - File / Image Upload with Example | Complete File Upload Tutorial in Laravel 10

hey guys welcome back so guys in this video we are going to learn about file upload in LEL 10 okay so guys basically we are going to upload the file which is file or image and display that file or image okay so now guys let's get started so guys as we have seen in previous video we have done one category C application and if you want to learn how to create this crud application you can just follow this tutorial and this tutorial link is given in the description okay so now guys let's take this categories itself to upload a image okay so image is basically nothing a type of a file okay so now guys let's get started so let's click here on ADD category so on the save of this category you have to upload the image also okay upload the file so now guys let's move to this route which is category forward SLC create so let's go to our editor so let's move to the routes web. PHP and in this web.php we are finding our categories here okay so category for/ create which is coming on the get method okay so let's go to this create function at your controller so we are here and on this function you are calling a blade file with the help of view function so let's go to this blade file perfect so we have reached here guys and let me add one input field as a type file Okay add one extra column so let's add a label and tell here upload file forward slash image okay and create a input type and its type is going to be a file and let's give the name and I want to upload this file as a image so I will keep the input name attribute value as image and let's Design This input using the form control class of bootstrap okay so guys main thing if you're using a input type file you have to add one attribute inside your form tag okay so at the end I'm going to add ENC type equal to multiart form data so this is very important if you don't provide this your image or file or anything it's not going to be uploaded okay only it's going to save the data for the other input Fields so now guys let's continue so once you click on the save button you're are going to upload the file okay so guys before uploading you have to do few steps like creating this column so let me just show you inside my database so here is my category table but here I don't have any image column okay so let me just show you on the structure part so here you see I don't have any image column so guys let's create one migration file and push that yep so open a new terminal and let's create one migration PHP artisan make colon migration add image to categories table so make sure this categories is spelling is correct as per your D database name here okay so I have given correct and hit enter so here you see a migration file is created let's go inside our database migration and at the last you'll find that file perfect so guys here you see you have got the correct table name okay so if you don't find correct table name please retype delete this file and retype it again done and now guys let's add the dollar table of I want to store the string value in that image column and it's going to be nullable that's it and also guys I just want to add this image after the description so you can mention that part so dollar table of after function here you give the column name so my column name will be description so after description I want to add the email field let's give comma and type the function open and close C and give semicolon done and now let's push this inside that after function so guys you are accessing this table so you need to pass inside this function dollar table and you'll get here cool so now guys let us in the down function you have to call that like dollar table of drop column function so my column name is image here so I'm going to drop the column when you are you roll back your migration file so now guys let's migrate this PHP Artisan migrate hit enter so file is migrated and now let's refresh once and you'll be finding that image column after the description Okay cool so guys we have added and now let's get back let me close this migration file and you need to add that column in your model so for that just go to your app models where category.php is your model name and after the description I want to add that column name as image here done let me close it and now guys you are get ready to save the images perfect so now guys once you submit the form it takes the file and goes to the form action and action is going to un route with the method post okay and also with the file type here so guys let's search for this route in your web.php file so here is the route guys which is going through the post method okay so where it's going it's going on the store function so let's move to this category controller at store method so let's go there perfect so we have reached here and now guys this is the complete function which we have seen in previous video about doing this Crow operation okay so L will turn Crow operation now get back again first step we are going to do the validation of that so I'm going to add one image inside this validate method or a function of your validation rules here so first step I will tell it is required or you can mention nullable also like if you don't want to upload some sometime image for the category and add the types so let's tell m m colon I'm going to accept PNG images jpg and also JP so if you want to accept more image format like webp also you can accept it okay it just depends on your requirement and now guys let us write the code here once you get the file what you have to do where you have to upload so let us type in if condition first here like if dollar request has of image so what is this has doing here it is checking whether it has some file or not let's get the file here in a variable called file and dollar request of file function then you have to call your input field name so let me just show you here is my file upload so this is the image field okay so you have to call that field here image image image okay so guys you have got the file and now let's take the extension from this file so dollar extension equal to Dollar file of get client original extension and then guys you need to create one file name to save into our database so let's tell dollar file name equal to a Time function and then concatenate with the extension okay so while concatenating you have to add this dot in between okay so it means like your time do jpg okay so our file name is created guys and now let's move this file into one folder dollar file copy this and paste here and use a move function okay so while moving where you want to move to one destination so guys you can just type here up uploads forward slash your category and forward slash and then your complete file name so dollar file name so this is the variable you are pasting here guys so once done you can just take this file name and save into your category database so after the description I'm going to the image column and dollar file name and give comma and also guys I want want to store the complete path of this file inside this column so for that you can just create one um variable called path equal to inside this path you can paste your data so let's crol X and paste here and now you can use this dollar path inside this move function and also here and just use concatenate for that so now you have the data with path and your file name so it will be very easy to access in your application done so now guys let us test it so let's go to our browser once refreshed to see the input field here perfect so we have got the input field and let's enter Smart Watch so let me just copy this paste here Smartwatch description and it will be active and let's choose file upload here I select with the Smartwatch open and now guys let's click to save save it perfect category added let's go back to the categories page so here you see you have added the Smartwatch Let's see we have stored the file name inside our database or not let's browse cool so here you see guys our file name is stored inside our database but let us see the file is uploaded or or not so let's go to our editor and you should go to this path so first let's move to our public folder and insert public we will find a uploads then category and inside that category you will find the file guys so perfect so here you see uh we have successfully uploaded the image okay so now guys let us display that image at view of this category okay so let's get back to this route guys just move to your editor web.php and here is the categories URL which is going to the index function so let's move there and on this index function you are going to the blade file called category. index so which is going to a index blade file so let's move there and here we are guys okay so this is my table which is visible over here done and now guys let us add one column name as image before this is active so here is my is active let let me copy and paste and let's name as image here and then we are going to move after this description add one TD tag and then guys let's use a IMG tag which is to display the image and let's open and close CRA and use this same variable dollar item of image okay so let's remove the description and add image here so you have the complete path okay so I'll just show you so we have stored the complete path so we do not need to call like go to public folder upload categories okay so we have the complete path here one thing you are missing is about using the asset function inside this so inside this asset function you have to call this asset is used for calling um your root path okay and then guys you can use a class called with 100% to display the complete image or you can do your custom styling like use a style attribute width 70px height HD height colon 70px okay and then you can add one alt here alternate name for this image and now let's save and see the output let's come refresh cool so here you see you got this image guys so guys we saw about how to upload the image and also display the image okay so now guys I just wanted to also explain about how to edit this category and upload its image so it's the same process how we have done for add category so let's click on this edit and now guys you need to add that same input field whatever we have used so for that you can just get back and let me open this sidebar so inside this create blade. PHP we have the input field here for file upload so let's copy this same field and paste after the is active done and you have to do some changes here guys which is about the form tag so inside the form tag you need a ENC type multiart form data okay so this is mandatory if you are using any input field of file okay and now guys let us check again refresh so now guys once you update this you need to upload the image on the update function so we have not return that code so let's go back and on this form tag you see that you are going to this edit URL okay categories ID and then edit with the method post and also method put you are updating to put method okay so you have to find a route which is using a put method and updating the record so let's go to our web.php and here is a URL guys and which is using put method okay so let's go to here controller on update function so let's move to that update function here perfect so we are here and now guys you need to use the validation so as I have did already let's copy from the above validation let's copy this and move below paste here so validation is done and also the same code for the image upload so let's copy this and paste below and also for update that image column so let me just copy again and paste here perfect so everything is same guys but you have to do some change while uploading the image so here one more step we are going to add while image upload so that is about deleting the old image and uploading the new image for example uh right now you don't have any image here so you're uploading it in case you have the image here and you want to re-upload okay so you have the image and you want to upload that again different image so in that case you have to delete the old image and then upload with this new image okay so guys let's see here in the code file colon colon exist function in the if condition okay so just use if open and close cbbr and you have to check that the file exist or not so how can you check that so first up guys here we are going to modify these things so let's control X and just go above this if condition and paste that here okay so first find that category if it's there if the category spond then it is going to store its category data inside this category variable and then you're going to update here okay so this problem is sorted for the update and now coming back to this if condition of file exist so here dollar category of image okay so now you are able to check whether the file exist or not and here we are getting a warning let's import the class guys import the class here and it is about elate support fets file so let's click on it and let me just show you the class here okay so this is the class now we can get back to that same code and if the file exist then you're going to use the file colon colon delete function to delete that image okay and how can you delete so you just need to use the same path of that file Okay so so you give a full path of that file it will automatically delete from that public folder okay so now get back so let's get back and upload with this mobile image okay so let's click on edit here and select with the image upload so it's a mobile just open let's update perfect category updated and you can view that image here cool and now guys let's upload for this laptop also edit and let's choose the image so I'm not going to choose the correct image instead I will choose a wrong image which is mobile and update okay so you'll be able to see that it's uploaded as mobile so now what we have to do you have to upload the correct image so let's click on edit so guys once you upload the new image the old image should be deleted so let me just show you that before updating it let's go to our File Explorer and public upload category so here you have two images right of mobile so one mobile will be deleted which is on the laptop so yep now you can upload one laptop image open and let's update here cool so category updated go back here you see laptop imag is updated okay so you'll not be able to see one more mobile instead you are seeing a laptop cool so guys we saw that also how to remove the old image and upload with the updated image or New Image okay and then guys if you want to delete also you can just delete the image while deleting the category so let me just add one dummy record here like ASD and as let's check here and I'm going to upload the smart image itself Smartwatch let's save go back and here you see you have created one dummy record with the Smartwatch and here you find you have two Smartwatch images so one of them will be deleted according to the ID so now guys get back to your editor and here you see we have one delete route which is going on the destroy method so let's go over there and here you need to check when deleting the record so before deleting the record you need to delete the image so use a if condition and just check file exist or not if exists check with the path dollar category of your complete path which is going to be in your image column okay so you are taking that and using the same complete path with the help of delete method you are deleting the image so now guys let's get back and refresh so here we have four Images let's click here to delete the last deleted perfect and now let's see we have deleted or not cool so the image also is deleted done guys so guys we have seen about how to upload the image display the image and edit and update the image and also delete the image okay so guys in this video that's it and let's continue in next video with the new topic so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 7,706

Keywords: fundaofwebit, Laravel 10 - File Image Upload with Example Complete File Upload Tutorial in Laravel 10, laravel file upload to database, laravel upload multiple images, image upload in laravel 10, file upload laravel 10, upload and display image in laravel 10, image upload and display in laravel 10, laravel 10 crud image file upload, laravel 10 image upload crud tutorial, Image Upload with Example in laravel, laravel 10 tutorial step by step

Id: C5vkWutvP0g

Length: 21min 35sec (1295 seconds)

Published: Sun Dec 31 2023