Laravel From Scratch [Part 12] - File Uploading & Finishing Up

hey guys welcome back I believe this is going to be the last video aside from a deployment video which I'll probably do next week or something but what I want to do is add file uploading to our posts ok so right now if we go to our dashboard and we go to create post I want to put a file upload here alright so we're going to go to our form our create form which is create blade and we're going to go right right above the submit here and let's create a div create a form Group div and we want a file field here so we're going to use our laravel collective package here and say form file and then just we just need the name and we're going to call it cover image cover underscore image now whenever you submit a file this is just a general rule you need to have an ink type attribute in the form and you set it to multi-part form data so let's go right after the post here and put a comma and then we're going to add an attribute of ink type and we want to set that to multi-part slash data and save alright and that should give us a file upload button alright now if we submitted it's not going to it's not going to do anything it's just the UI so we need to handle this now before we get into that we need to add another another column to the post table all right so we need a cover image column so we're going to create another migration so let's go to so you're just going to open up the terminal here and let's say PHP artisan and we're going to do make migration and then we're going to call it ad we'll say add cover image 2 who posts alright and then we'll go into the migrations folder and we'll open that file up you can close this now and we're going to do the same thing we did with the add user ID we're going to add the schema table thing here and then instead of integer it's going to be string and then this is going to be cover image because when we will me up when we submit our form two things have to happen one we need to save the name of the image to the database so that we can access it later on and display it and we also need to upload the actual file so that it knows where to look for it all right so let's add that and then we'll just copy that put it in the down and then we just want to do drop column so let's go ahead and save that and then we just need to run migrate so we'll do PHP artisan migrate and now if we look at our database reload Post table and we have a cover image now what I'm going to do is just delete all of the previous posts so I'm just going to do that from here just to make it easier so we'll just say delete yes and now we shouldn't have any posts for anybody so if we go to blog there's no post found all right now let's handle the actual upload so we're going to get out of the migration files here and we're going to go to the controller post controller and you know that it submits to store so right here this is where the form submits to and we can actually add a validation for our image so we call the cover image and we're going to set this to image meaning that it has to it the file has to be an image it has to be a JPEG or a PNG or gif gif whatever the hell but we also want it to be optional we don't want the user to have to be able to upload the image so we're also going to add nullable alright and then we also want to map sighs and I'm going to set this to 1999 and the reason for that is with a lot of Apache servers the default upload size is 2 megabytes alright so if if we don't set this there's a good chance that they'll try to upload us a bigger image and it's going to just throw an error so we're just going to set a max of 1999 okay which is just under 2 megabytes and then down here we have to do a few things so it's a handle handle file upload alright so we'll have an if statement here and let's say if request has file and then the name of the image which is going to be cover image so it's going to check to see if it was actually uploaded if the person actually click Choose file and selected something and then we want it else all right now if they didn't then we're going to create a variable here called filename to store and we're just going to set it to a static title called no image dot JPEG so basically if they don't upload an image it's going to look at this default image and use that in the posts okay and you can set this up differently if you don't want to have an image or something like that now when they if they do submit it there's quite a bit we need to do and I'm going to show you how to get a file name with the extension so let's create a variable called filename with ext and we'll set that to request file cover image alright so this will put the exact filename if it's like my image JPEG or my image dot PNG this will get that for you and you can proceed to add to add that to the database if you want you could you could call it file name to store and then just keep going down here and submit it but if someone else uploads an image with the same name then you're going to have an issue so it's not a good idea to actually use this so what we're going to do is separate it we're going to get I will say get just file name and then down here we'll do get just extension all right so let's create a variable called file name and to get that oh you know what I forgot one thing here we actually have to set this to get client original image and I know these are really long it makes it look more confusing than it really is so that gets the original whole file name with extension so here what we're going to do is set this to cap info which is a function and we're going to pass in the file name with extension and this is just path info this is just PHP this has nothing to do with laravel we're basically just extracting the name without the extension all right and then we just want to then put in here path info underscore file name okay and this is just using PHP again it's just going to get the name now to get the extension so extension equals and we're going to use laravel for that so request file cover image and then we're going to do get original get original client and I think it's let me just check real quick extension okay so I don't believe laravel has something that will just get the file name that's why we just use PAP info here all right so now we're going to create the file name to store and we're going to do that by setting a variable filename to store just like we did right down here and we're going to set that to the file name okay just the file name and then we're going to concatenate on to that underscore and then the timestamp okay so we use the time function and then we're going to concatenate on to that a dot and then the extension so we have to say dot extension so what this will do is it'll call it the original file name underscore and then a timestamp which makes the file name completely unique so that if someone else uploads one with the same name it'll it's not going to overwrite anything or anything like that all right hopefully that makes sense and then finally we just want to upload the image so to do that we're going to set a variable called path to request file cover image and then we're going to say store as and then in here we're going to do public slash cover underscore images we're going to create this folder alright if it's not created and then this is going to have a second parameter of the file name which is going to be filename to store and that should upload the image so let me try to explain about the paths so when we do this when we say store is public cover images it's going to go to it's going to go let me just close these it's going to go to resources and then it's going to go to now not resources I'm sorry storage and then app public and it's going to discover images inside here in the public folder now this isn't accessible accessible through the browser so we're not going to be able to load the image what we're going to do is set something called a symlink to the public folder and then it's going to create a storage folder in the public folder and to do that we just have to want run one simple command alright so let's open up our shell prom what is this terminal and all we have to do is say PHP artisan storage colon link and says it's been linked and now if you look in public there's actually a folder called storage so whatever we put into the storage here is going to actually going to show up there as well for us to use in our website hopefully that makes sense now down here when we actually save to the database we want to add post cover image and we're going to set that equal to file name to store so it's either going to be no image or it's going to be the the image with the timestamp so let's actually try to sell we'll save it and let's go to dashboard create post and let's call this post one we'll say this is post one now I have a folder where do they put it this is on my desktop now did I put it htdocs actually maybe I didn't you know what let me uh let me just grab those images real quick all right so I'm just going to paste them on my desktop so I just have some images which are just thumbnails to my videos some of my videos on YouTube so we're going to use those so lets they choose file and i'm going to go to desktop and let's grab the angular two one and submit the cover image must be an image let me see let me actually look at the source code here i just want to look at the form make sure that we have this so if inc type equals multi-part slash data that should be form data let's take a look at the create see where are we resources views creates aha okay so this should actually be form - data and I knew that because I actually had that error before when I forgot the ank type all right so let's try again oh we need to actually reload the whole thing let's make sure that didn't go in all right all right so we're getting get our get client original image doesn't exist so see it's talking about this right here let me just make sure that that's right which probably isn't hi to get original name not image all right let's reload and continue we get original client extension doesn't exist yes then that's because it's actually get client original extension I hate these long names we use reload resubmit post created so now let's go into the database and look and you can see we have angular to underscore timestamp JPEG so that's good and then if we look in our storage folder we have public cover images and there it is and if we look in the public folder right here cover images there it is so that that works great so now what we need to do is display it in our post which is really easy so let's go back to vs code and we're going to go to the index view post index view and I want to have the image on one side and then the stuff on the other so inside this well let's actually create a give the class of row this is just bootstrap markup and then we'll have a div with the class of call mb4 and call sm4 alright and then i'm going to copy that we'll have another column another div with eight columns alright and then this the h3 and the small I'm going to just cut out of there and put it inside the eighth column and then we're going to have the image in the or column all right so let's say I am G source and then it's going to look into the it's going to look in the public folder and then we have our storage folder so slash storage slash cover images slash and then we have the the cover image in the database so we'll say post cover image save that let's also add a style here and I just want to say with width will be 100% there we go so now we can upload an image now we also want it on the show page so I'm actually going to just copy this right here and we'll go to our show view and let's just put this right below the h1 reload and there we go we'll put a line break after it as well or two line breaks okay good now you're also going to want to upload the image you're going to want to take care of the edit form as well so if we go to edit you'll see there's no file thing here so let's add that I'm going to copy from the create we're going to grab the the file field right here and we're going to go to edit blade put that in right there and we also need to add the ink type copy that comma paste that and save and that should give us the file upload whoops what did I do oh this is I get to brackets here okay so now we need to handle the update function so let's go back to the post controller and go to update and you know what I'm actually going to copy everything we did in the store so let's grab this copy go to update go right here and paste it in now this is going to work a little different because if they don't upload an image we don't want to replace it with no image like they are here so I'm going to get rid of the else all right and then down here we only want it to add if they actually created an image so we're going to do this again we're going to test for this and if they did actually upload a new image then we're going to do post am i doing post cover image now what am i doing yet post cover image equals and then we want to set this to a file name to store all right so we'll save that and then we should be able to if we submit and we don't upload an image it's not going to change if we do wait a minute like why can't I see the edit and delete buttons here that's not right I technically just check this real quick user ID - that's really weird we should all just in scroll down far enough all right so let's go edit and then we will change the image and save you submit and the image change is good now the very last thing I want to do is when we delete a post we want it to delete the image as well so let's actually go to htdocs and go to our app and go to public and then storage cover images these are the uploaded images so let's go back to vs code that while this video is getting long and we'll go down to destroy and we only want to delete it if it's no image I mean if it's not no image JPEG alright which I guess we have to look at that as well so let's see right here I'm getting late right here we're going to say if because we don't want the the no image to disappear because we're going to need that in case someone uploads a new post without an image so that's why we're checking for that here so if post cover image is not equal to no image dot JPEG then we want to delete the image so to do that we actually have to bring in the storage library so up at the top here we're going to say use illuminate slash support slash facades slash storage and if you ever want to check out the different libraries and all that with laravel you can easily look at the documentation and show everything I do is in the documentation pretty much all right so to delete what we have to do is just take that storage object and we're going to call delete and let's see we're just going to pass in the location which is going to be public slash cover images slash and then we want the image name so we're going to concatenate post cover image and that will delete it so let's try it out we're going to go over here and click delete post removed and you can see the image actually got deleted so the last thing we want to do here is make sure that if we create a post without an image that it actually uses no women's JPEG which all you have to do is upload and it will use it so for instance we'll say post one this is post one and no image we'll save and now nothing's showing here but if we look at open image and new tab it's looking for no image dot JPEG so all you have to do is upload an image with that name and it'll use that so let's just say no image okay we'll just grab I don't know just grab this I guess wait is that it is that a PNG I want a jpg so let's just save this and we're going to save it in our public folder which is here storage cover images and we're going to save it as no image dot jpg all right so now if we go back and reload that's what it displays and and it'll display that as long as you don't upload an image so that's going to be it guys I hope that you liked this series and again if I if I miss something that's that's pretty important let me know let us know in the comments I will look into a deployment video as well so please please share the series and like it comment on it anything you can do helps a lot so thanks for watching guys thanks for sticking with me through this long series and I will see you in the next video

Channel: Traversy Media

Views: 188,481

Keywords: laravel, laravel files, laravel file uploads, laravel file upload, laravel image upload

Id: AL8PCThJ9c4

Length: 24min 7sec (1447 seconds)

Published: Sat Jun 03 2017