.NET Core6.0 Web API Image upload Retrieve & Remove | File handling in .NET Core Web API

hey guys good morning welcome to nigeria guys this is our asp.net code tutorial version 6.0 so in this video i am going to explain the functionality of how to upload and retrieve the images so here i listed out all the steps we can go one by one okay this is my created service we are going to use this product services currently we have only the get methods so here after i am going to include three more functions the first one is for uploading the images and the second one is for removing the images and the final one is for returning the images and this upload from schwalter so we are unable to test from our swagger that's what i have created on angular application see now in the product base we have loaded all the products and this upload functionality also there but i'm not going to explain everything in this angular application because i have created the separate video for this angular application i will share the link in the description you can watch it but this video mainly we are going to focus on this darn course services so let me go to my application we can start our implementation okay this is my product controller the first method is for upload and this method is the first method http post and the router url is image upload and i am going to return the response is true or false only okay fine also i'm going to include the try and catch block for capturing the exception so the first thing is we have to get all the files so request to dot form dot files so it contains the collection of files so i'm going to create the forage so using this forage we can access all the files one by one i form file our object name then our collection name uploaded files so next step i'm going to get the file name so in this example i passed the product code as the file name so currently our files and file names are there so the next step is we have to create the path for storing these files so in the application i'm going to create the ww root path so if you are creating this or dartmouth core application through our visual studio so this file should be included defaultly otherwise we have to create it manually okay so once we created this folder so inside i am going to create one more folder uploads so inside the upload i am going to have product because we are doing this upload for product online and the similar way we may have some common files so let me include it okay this is done so now uh we need to access this folder path okay for accessing these folders i'm going to use one interface i webcast environment so let me inject it and also i'm going to create one function private string get file path so this dot environment dot web root path so this web root path is nothing but our wwe root folder online so inside that i'm going to use this upload folder so insert the upload the product and finally i plan to create the separate folder for each and every product okay i'm going to pass one parameter here product code okay the function is ready now let me go to our upload function file path equal to and our file name the file name is nothing but our product code only okay we have the file path next i am going to check whether we have the folder or not let me pass this one if you don't have the path we have to create it so again system dot dot directory dot create directory then we have to pass the path that's it working our path is ready the second step is image path so inside the file path i am going to create the image image dot png okay okay we have provided the file name and the second step is i am going to check whether we have the existing image or not if the file is already there be how to remove it okay we are good to go so let me format it once we remove the file we have to create the new file in the particular folder so using file stream dot create and our image path source dot copy to a synchronous industry and once our uploaded gets completed we have to provide the responses true okay now we have completed our upload image from schulte now i am going to run this application we can verify whether it's working or not before that let me mark this get file path method into non-action okay we have done so let me run my application dotnet run okay fine now let me refresh my angular application now i am going to upload the image for our faster product okay i got the messages uploaded successfully so let me verify actually we are storing our products in the product folder so you know one image was there so let me go to the exact folder in this www root path we have the upload section inside the product the new folder is created p101 this is our product code so inside that i am able to see the image the similar way i am going to upload one more image so this is for bar again it's uploaded successfully now let me go to the path so in the product we have one more folder here the ball image was there and also i am going to replace the image for this batch it's uploaded so let me verify the folder yes the image has changed okay now we need to load this image in this listing and also when i'm clicking this upload button so the existing image should be previewed so let me implement that functionality here also i am going to write one private function get image by product and this function also then and the input parameter is product code and let me make this one also a non-action method string image url equal to string dot empty okay now i have to get the hosting url host url is nothing but our application url okay this is my host url so the next step uh we have to check whether we have the existing image file otherwise we have to return the default one so let me define the file path already we have created one function for getting the file path here i am going to pass the product code so once we have the file path we can create our image path so these steps we already done here so let me copy it here first i'm going to check whether we have the existing file or not so system dot io dot files that exist so let me pass this image path here if you don't have the file of we have to return the default one the file is accessed then we have to return the exact file so the image url equal to host url slash uploads and insert the upload product and then we have to pass our code i mean our product code and finally our image now in case if i don't have an images so uploads common inside that i am going to have one image no image okay so let him having one image so let me copy and include in the particular path okay we have done okay the function is completed now let me go to the getall product function here what i'm going to do instead of this return i'm going to provide like product list you've product list not equal to null and the product list account should be more than 0. am going to create the for loop here item dot product so as of now we have the price i'm going to include one more property it's called product image the product image equal to so that's what we have created the function get image by product here i need to pass the product code so let me format it okay now i am going to return this one so the product list may be null here okay in this case uh what we supposed to do else written okay fine now i am going to run this function we can verify whether the images are loaded or not dotnet run first let me check from our swagger i am going to execute our getall method so you know the product so if you noted here the first two products are having the products that's what so the folders which are the product id after that the image.png and the final one we don't have the product so that's what it's coming like a common.no image so let me copy and we can check okay it's not coming let me check what will be how the image is but it's not displaying so let me check my notes so we have created the wwe root folder and we have completed all functionalities and the very important thing is we have to enable use static files in our program.cs file so let me go to the application once again and i start so in this program.cs file be how to enable it use static files so let me rerun the application once again i am going to refresh it once again see now the image is loaded so if i am taking this no image also i hope it will work okay its fine now we can check from our angular application currently we don't have any images when i'm refreshing see now the images are loaded the first two we have the images the final one we don't have the images so that's what it's saying the no image so if i'm trying to upload the pad it's uploaded successfully when i'm closing this pop-up so you know it's loaded so the final one we have to implement this uh remove image from schwelty so again let me go to my application so in the product controller public remove image and the input is product code for this remove image first we have to access this path but then we have to check whether we have the files or not if there is no files we don't worry if there is an file we have to remove it so up to this we supposed to copy so let me format it so first i am getting this file path and the second step is image path and here i am checking whether the file is exist or not if the file is available i am going to just remove it ok once we deleted we have to return our response so for returning the response i am going to use this response type class because our angular application descend based on that okay the first one is result pass and the second one is key code so the key code is nothing but our product code so let me format it and also i'm going to use the try and catch black in the exception and the method type should be delete but i actually am going to give the get only because my ui is designed based on that okay now we are good to go so let me run the application and we can verify our delete method is working fine or not okay great so the images are got loaded i'm going to remove this one so do you want the product of pad actually it's not removing the product it's just removing our image that's it okay the image removed successfully and also you can see there is no images when i'm refreshing also we don't have the images so let me check in the folder path we have the three folders but in the p103 we don't have the images and the next p102 we have the image so let me try to remove this one so the second one also got removed so you know we don't have the images now i'm trying to upload the image i'm going to upload this bad for here also so see now the image got uploaded okay it's working fine now we have completed our session still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 29,405

Keywords: How to retrieve image in .NET Core Web API, How to remove image in .NET Core Web API, How to upload image in .NET Core Web API, .net core web api file handling, dotnet core web api image upload, image handling using .net core web api, dotnet core web api image not previewing, dotnet core api image not showing, image upload in angular using dotnet core services, dot net core tutorial for begginers, dot net core web api using vs code

Id: noXM1UsTAyo

Length: 21min 45sec (1305 seconds)

Published: Thu Aug 11 2022