hey what's up guys welcome back to our blog and welcome to this blog so in this blog guys we're going to continue working with our file image upload so in the previous blog we have laid out this logic here which is we're checking if the user has submitted a cover image or uploaded an image and then we're getting the filename and extension here and also we're getting the file name from the actual image that has been uploaded and now let's continue adding to this logic so we have here the file name and then the next step is to get the extension okay so in order for us to do that we need to add a new variable extension and then by using the request object we're going to use the file method and then cover image and we're going to get the original client extension okay and next is we need to define a file name that we're going to store into our database so file name to store that will be path and then or first we need yeah file name finally file name to store equals the final file name that we got from the actual file and then we're going to concatenate with an underscore and then time and then another concatenation with the extension so this will be extension we're doing this because we're just we're just trying to avoid if say for example the user uploads a file or a an image with the same file name so in order for us to some of that is we we get the file name and then we're adding underscore and then we're adding the time so it won't be a problem for us if the user will upload files or image that has the same name and the last part of that is we need to actually upload the image so that will be upload image we need to get the path and request and then file again cover image and need to store this store us we're going to store this on our public folder so public and then cover images we need to create this directory and then the new file name will be file name to store and now whatever the user upload the file so let's try to see database resources and then we have here the storage and an app and then we have this public folder so it will create the cover underscore images directory here but the problem is this public directory is not accessible when you try to open up this directory in your browser so we need to make sure that all the changes that we are making here is reflected to the click folder here because this is a accessible to the web browser so in order for us to do that let's open up our terminal and we need to run a command to link this storage a public folder into our actual public folder so the command for that is PHP artisan and storage then link so there you go the public storage directory has been linked so whatever changes that we're making here in our storage file or storage directory will be reflected here in a public directory now the last thing that we want to do here is to actually save the file name to store so that will be post and then the cover image equals the file name to store ok save this and let's try it in our browser so refresh and then add post so you post with an image this will be the body of the post with an image then we're just going to select a certain image and open and then submit so we're getting an error here the cover image must be an image so I think the problem with this is here in our create laid that PHP so multi-part slash it should be form data so there you go save and refresh so new posted image as body and then browse for the abstract image and then submit so we're getting guideline original image does not exist so we have a typo here so I think we're going to use instead of great client original image so we're going to use get client original name so that will be post controller and get client original name so right then posted image test browse the image and submit so we're getting path in info underscore file name so undefined constant so we need to change that instead of just file it should say file name let's go back and refresh just to make sure and then new post test and browse the image and then submit so again we're getting the get original client accept extension that's not exist so I think we also have a typo so we're just going to copy this get client original extension so let's go back to our code editor and replace this with get client original extension so save that let's go back refresh and save another one so I hope it it will be successful this time so browse and then submit so there you go post created so the new post with image has been created and the next step that we're going to take is to display the image in our show post and also in our new post with image where we can actually see the individual post since we have successfully uploaded an image we can see here in our storage and then the cover image direct has been created and we can see here the link of our storage directory with also the cover under underscore images with the actual file or image that we have uploaded so let's try to view that in our PHP myadmin so in here so post and we have new post and then the buggy and of course the link or the file name of the uploaded file and actually we're just going to get rid of this records with no cover image so we're just going to delete that and let us now try to display the images coming from the database into our show and index plate that by HP so that will be resources and then views and then index that PHP so we have here displayed the post so before that it's just going to add a new live road so this is just a bootstrap tag and we're going to add another DEATH this will be column MD for and also another one for another column so it should be 8 and we can just copy and paste this here and also you can you can remove this I think and just remove that and here we need to display the image so that will be image and then the source is coming from the storage directory and cover images in the filename so this will be coming from our post and cover image and I'm just going to add a style here for our image which is the way it should be 100 percent 100 percent so save this so refresh and then log so we're not getting any post here and if we tried to go to our post we have one record so let's try to check our code here so index that way dot PHP and we have here if greater than one and we have one record right now so it should be greater than zero so refresh so there you go we have the image and then we have the title here and also the return on information so in the next blog we're going to continue working on with this feature and also we're going to add that in our blog list and individual posts here and also we're going to add the feature in our edit post where we can also edit or update the images so see you in the next blog thanks
Post a Comment