hey what's up guys welcome back to our blog and welcome to this blog so this is the last part of our laravel for beginners tutorial and in this blog we're going to continue working on with our image feature so in the previous blog we have added the display image and actually added the feature of uploading an image by creating a post so when adding a post we can have we now have the option to browse an image and then include that image and save that into our database so now let's continue working on with this so if we try to view the actual post so we want to also add the image here and the individual post so let's go back to our code editor and try to add that so this is the index that played that PHP and then we're just going to open up the show that yeah show that played that PHP so in here we have displayed we're displaying the post title and the post body of our post so again we're just going to add the image on top of our post so in order for us to do that let's just add a div here so this will be I think before the body tag so Dave and then this hope this will be row and another column or then for a column so called MD shelve and then we're just going to add the image here where you can just copy the tab coming from here so and then the width is hundred-percent and then we're getting the actual or the physical image coming from our cover underscore images directory so let's try to preview this in refresh so now we have the image so the title and then the image of our post and of course the body of our post and then the meta tag meta information with just a written on with a date okay so another thing for this feature is that we need to add this in our create or edit because for now we don't have the element to edit or update the image that has been uploaded so let's go back to our code editor and God the final element in here so the same with the create that laid that based me we're just going to copy this arm group and then Eddie near end it that way that PHP and just before the submission of the page you can place the cover image file input element and then of course we need to change the something here for our Inc type so it should be of course multi-part for data so we're just going to copy this one and paste it here so Inc type equals this multi-part slash form - data so we're just going to save this and refresh our page to show that we have already added the input file element so refresh so in here we have now the browse file input element we need to add some logic into our edit function from our post controller so let's go ahead and try to open up or post controller that page B and inside here in our edit function so we're going to add yeah the logic of our edit function or actually we're not editing the function edit we're actually going to modify the update function so all we have to do here is I think we just have to copy all the logic that we have in the store function so validate and then update okay so we're just going to paste here the validation and of course all the logic that will handle our file upload so this is going to be a bit different from the store logic because we're not going to have this line here which means that we don't want to update when the user has not uploaded the image so remove that and then we're just going to have another check here if the user has submitted the file or uploaded the files of the request if the request has fine so another cover image here that's the name of our file input element and then we're just going to get or set the cover image by using the file name to store so okay and save this so refresh view first opposed so we have here the post and then we have the actual post and then reckon edit that one and if we try to submit without selecting any image then we can just update the post but not updating the image right here but let's try to update the image so let's browse another image and then open and then submit post has been updated and as you can see the image share has been updated also because we have updated or uploaded an image coming from our edit page so the next thing is or delete okay so if we try to go to a post and we have this delete so whenever we have to delete this post we want to actually delete also this file coming from our project so if we try to open up or our project in our browser or M in our file directory we can see that we have here the public and then storage and then the cover images so this are the uploaded files in our project right so whenever a user wants to delete the post we we would also want our project to actually delete this files right here so in order for us to do that let's go back to our post controller and edit the delete function or destroy function right here so we're going to bring in first the storage library so if we're going to use illuminate slash support and then back slash massage backslash storage okay and then in our destroy function below so we're going to check if the user has uploaded the file for this particular post so that will be if this post cover image it's not equal to it's not equal to host and then user I mean not equal to no image that JPEG or jpg so this will be our default image when the user has not uploaded a file for their particular post so we don't want this to be deleted if the user hasn't uploaded a file so this will be storage and then delete so we're going to public and then cover images and of course the actual file name of our cover image so save this and then try to delete this post post has been removed or removed and as you can see the image from the cover images directory has been deleted one last concern also is if we try to go to our blog and add posts so say for example we're going to add first post here respose are the first post and then we're going to browse an image okay submit and also another one so second post body of second pose and then we're not going to browse or upload an image here so submit so as you can see we have here a broken image icon which means that the user has not uploaded image for this particular post so we don't we don't want that and we want to have a default image here so our default no image so let's go and search for a new image picture so that we will be able to have a default no image here so after finding a default no image so make sure to copy and paste that in your cover underscore images directory and this is what I have chosen from from new no image default and the file name is that J PG so we should be able to display this in our page so make sure to change this also to the right file extension and then save and then refresh so there you go we have now the no available image as our default image of our posts so I think that's all there is to it for this tutorial and this will end our tutorial for beginners tutorial and I hope you have learned something from this series and in this blog so thank you for reading our blog
Post a Comment