How To Upload Images In Laravel | Laravel 8 For Beginners | Learn Laravel 8

what's up guys my name is dory and i hope that you have a great day because we're going to add an image upload to our cars because of you guys i've reached something very special that i never ever dreamed about reaching in one year this channel got over 5k subscribers in 2020 and i can't thank every single person that watches my videos enough i want to do a simple 50 amazon gift card giveaway and there's not a lot that you need to do i recently created an instagram account which i have linked in the description down below and this is not a sponsored giveaway by amazon and this has nothing to do with youtube i just want to give something back to the people that supported me the only thing that you need to do is to follow me on instagram write down why you think that you should need to win the giveaway on my latest post and if you have any ideas of a giveaway item that i could do in the future just write it down as well i don't need any personal data of you and the giveaway will end on the 8th of february alright let's get into the actual content what we've done so far was adding text numbers dates and some other data types to our database now there's also a matter of file uploads to consider so what our google eventually is is well let me go to the ui add a new car is to basically add a new button right here where users could upload their image let's rewind for a second what are the steps that we need to perform in order for this to work step number one is to add a button like i said right here where we could search for an image right inside a computer or laptop step number two is to use the request object that we have right inside of our controller right here to upload the image and step number three is to validate the upload now for the last step we need to save the image somewhere in our application and then we need to send back the image name to the database not the image itself but just the name so first things first let's go to our resources views cars create thatblade.php and right above our first input field that we have where we're asking for the brand name let's copy it let's paste it right above and let me actually zoom in one more time all right now for the input the type needs to be equal to a file because we're going to upload something now let's change the name to image and we don't need the placeholder so let's get rid of that as well the class could be the same so let's save it go to chrome refresh the page and this is all right for now i don't need anything fancy because this video isn't dedicated to perfect styling that will be done whenever i create a complete project but before we continue on to our controller there's one more thing that we need to add right here let's go to our code again what we need to do is to tell our form that we're posting an image so the data needs to be encoded and to do that we need to add a new attribute to our form so right inside our form we have our action method so right after our method let's hit the space let's write down enc type is equal to while double quotes and you can see the options appearing on my screen and what we need is multipart forward slash form dash data all right let's save it because step number one is done now for step number two we need to use the request object and do something with it inside the controller but before we do that we need to make some adjustments to our database like i said our goal is not to save the image in the database but instead we want to save the path of our image so if we go to our cli and to our mysql you could see that we have our id name founded description created at updated that but we need a new column that will print out a string with our imagepad since we already have data inside our table we need to create a new migration so let's go to the other tab let's write down php artisan make me a migration called add underscore image underscore 2 underscore cars underscore table alright it has been created let's open it migrations and it's always the last one so for our up method we only need to add one column so let's remove the comment let's say table like i said it's a string and the name is image underscore pad now let's also add our down method so let's say table and what we want to do for down is to drop column and what we want to drop is the image underscore path so what this allows us to do is to add a new column without rolling it back so let me show that to you let's go to iturn let's say php artisan migrated our migration has been added now if we go to my sequel hit the arrow up and select everything from cars you can see that we added a new column right here called image path now we're ready to go to our controller and work on our image upload let's close off the migration and the create that blade let's open our cars controller and let's go to our store method before we do anything let's get rid of our request validated now let's dd the request all just to see what will happen if we submit an image and before we continue on in the last video we talked about form request and we changed the request to our create validation request let's change it back to request for this video now let's go to our ui refresh it well we actually need to add an image so let's open a new tab and go to pixabay let's write down mercedes and you can choose whatever image you want it really doesn't matter i'll open this one all right free download download it i'm definitely not a robot and if i sound like one just let me know download it all right mine has been placed on my desktop so let's close off this tab because we don't need it let's choose a file so it's on my desktop let's give it a brand name of mercedes found it in 1918 description is this is my mercedes and be aware we're dding so we're not adding a new car submit it and right here you can see that there is a token so the underscore token that has been sent to the request object we have the name founded description and the image now if we open our image you can see a lot of information regarding the image that we just uploaded and i'm not going to cover every line of code that you see right here because most of the things that you're seeing on the screen speak for itself all right before we process our image save it and show it you always need to validate it so let's go back to our controller let's get rid of our dd let's say that we have our request and we want to validate so what we need to validate is an array so brackets single quotes we want the name from our ui which is the image and let's add some rules to it first thing that we want to say is that it needs to be required because we always want to have an image so pipe then we want mimes or memes i actually don't know how you pronounce it the right way in english so correct me if i'm wrong but this basically means the image extensions that we're going to allow so let's say jpeg comma png comma jp eg and we could add one more rule and that's the max you need to be aware that the max needs to be in kilobytes so let's say 50 48. i know that in the last video i showed you how you could remove pieces of validation that you do on multiple places but for the sake of this video i want to keep my validation right here before we continue on let's actually add our name which is a required field as well we have our founded which is a required field pipe integer pipe the minimum value is zero and the max is 2021. and we're basically repeating ourselves right here but don't worry we have our description which is a required field as well so what we're eventually going to do right here is returning an instance of symfony's upload final and that might actually be something that really doesn't make sense if you're a beginner of laravel or symphony's framework but laravel's framework is based on symfony's framework right now we're using symfony's upload file class which will allow you to easily inspect a manipulated file now there's an entire list of methods that we could use and i want to show them to you so let's go right above our validate let's say methods we can use on the request and to show it to you let's create a new variable called test and let's set it equal to the request file we're getting the file from input name and right behind our file we're going to add our methods and i will add them as a comment as well the first one is guess extension so right after our file let's say guess extension so right below our variable or well the line of code that we have let's dd variable test let's save it let's go to chrome refresh the page and this will show us the extension of our image and in our case it's jpeg we could also get the mime type or the meme type again so let's say get mime type let me copy it replace it save it refresh the browser and as you can see this will tell you what type it is so whenever it's a document it will say it's a document image well what we have right now an image or whatever so we have a couple store methods so let's say the normal store method the s store method and the store publicly publicly and we will be using the store method in a moment so i won't cover it right now but these are basically different type of store methods that we could perform now there's another method which is called the move method and we will be using this one in a second as well so the next method is the get client original name and what we eventually want to do is to allow an image to be uploaded with whatever name and then we need to change that name to something unique and that can be done with a get client original name so let's replace it save it and refresh the browser and you can see the current image name that we have we could get the entire meme type so get client mime type replace it refresh the browser and this is pretty much the same as the guest extension it will say that it's an image jpeg to only get the extension without the file name and without the dot we could say guess client extension copy it replace it refresh it and the output is jpeg we could get the size of our image with the get size method typo getsize replace it refresh the browser and this is the current size in kilobytes and there are a couple methods to validate so we could basically see if there is an arrow with the get error method let's replace it refresh it and the output is zero so whenever you upload a file that does not have the right extension it will return true or false and in our case we're uploading an image so the output needs to be zero because it's correct and the last method that we have is the is valid method replace it refresh the browser and this will also return true or false if it's the right extension or not all right now that i've showed you all the methods that we could use we're ready to create our application so let's get rid of our dd and our variable and right after all of our checks that we're done we could create a new variable so let's say new image name we need to create a new name if you're going to work on large applications you don't want people to add an image with the same exact name now to fix this we could do a lot of different things and i'm not saying that i'm showing you the best way but i think this is the most favorite way we could set our variable equal to the time method concatenate a dash so in single quotes a dash concatenate the current name that has been entered inside our input field concatenated with a dot because we're going to add the extension after so let's say dot request image extension so what we're doing is adding the time dash the current name that has been added with the image followed by the extension now once again before we continue on let's dd it once so new image name save it chrome refresh the page and the current name is a timestamp dash mercedes.jpg and to be honest this looks kind of decent so what is the next step well now that we have a new name we need to store the image and this can be done in various ways you can store it inside the storage what i want to do is to keep it pretty simple and store it in the public folder so right after our variable new name new image name excuse me let's say request image and right now we need to move it like i just said the move method so this takes two params the first one is the location so let's say public underscore path which is a method which goes right inside our public directory and it will search for inside single quotes a folder called images which we don't have yet but we will create it in a second now the second param is the image name and like we have right here it's called new image name so let's paste it right here let's save it and let's create our folder first so let's scroll down to our public directory let's create a new folder called images and once again this may sound silly be aware that the name that we're passing inside our public underscore path method needs to be equal to the folder name insider public directory so before we test it out let's debug it one more time to see what's inside this line of code let's set it equal to test now let's change our dd to test save it go to the browser refresh it and you can see a lot of information right here and it's just basic stuff it's the current path of our images directory the file name the extension the real path so the path from our users directory and some other non-informational stuff so this is it let's remove our dd let's get rid of our variable save it refresh the browser and whoops we're getting an error message right there so let's see what's going on whoa i made a typo right here refresh it so how do we fix this well that can be done inside our model so let's go up let's open our models and car.php and as you can see we have a protected fillable so we're saying what needs to be filled but our image underscore path is not in here so let's add it let's say image underscore path all right save it go to our controller because the last thing that we need to do is to add it in our create method as you can see right here we have our name founded but we haven't added our image let's say image underscore path equal to well we're not going to grab it from the request but we just want to pass in the new image name variable save it go to the browser refresh it and our mercedes car have been added now what about the image if we go to our database select everything from cars again you can see that it has been indeed added to our database so where is it stored in the ui well we created the images folder so let's go to our public directory right here excuse me images now let's open the image and it has been added so let's close it off now the last thing that we need to do is to print it in our ui so no you could either print it out right here but i think it looks better if you print it out on the mercedes page so what we could do is to go to our ui so the show.blade.php right above our name let's create an image tag let me align it on the line below give it a source of larval let's open the asset which will look inside the public directory now let's add the path of images forward slash concatenate our car access operator image underscore path save it and let's test it out in the output and our image has been added so let's give it a class to style it a little bit so let's set the class equal to w dash 40 so width 40 margin bottom is 8 shadow dash excel save it refresh the page and this does not look good well let's change it to 10 forward slash 12. save it refresh it and it could be a little bit smaller so let's say 8 12. refresh it the ui really doesn't matter so i'll keep it like this this was it for this video where i showed you how you could create a simple image upload in laravel in my opinion there's way more validation that you could do but the basic validation of laravel is awesome to start with if you do like my videos and you want to see more leave this video a thumbs up and if you're new to this channel please hit that subscribe button

Channel: Code With Dary

Views: 18,213

Keywords: laravel, laravel 8, laravel php framework tutorial - full course for beginners 2020, laravel 8 tutorial for beginners, laravel php framework tutorial full course for beginners, learn laravel for beginners, learn laravel step by step, laravel full course, php laravel youtube, laravel tutorial youtube, how to learn laravel, laravel tutorial 2020 - the complete developer course, laravel tutorials from scratch to advanced, image upload laravel, how to upload images, laravel upload

Id: IMld7bPw8P4

Length: 19min 58sec (1198 seconds)

Published: Fri Jan 29 2021