File Upload In Asp.net Core - How To Save A File In C# and ASP.NET Core Razor Pages

hey what's up everyone in this tutorial we will upload a file in asp.net core razer pages and we will store the file in local storage so without wasting any further time let's get started please like the video if you find this useful and make sure you subscribe to the channel so you don't miss the next upload i have created a new dotted core razer pages web application and i've cleaned the layout page and i have also upgraded the bootstrap version to 5 and in my index page i only have a heading now which says file upload and if i run this in the browser it looks like this so just a heading over here so now on this page you will go ahead and add a form with an input type of file so that we can upload our file so let's go back to the code back in our code i will create the structure for our input element so i will create a div first and then give two classes to this div a margin bottom of three and a margin top of three and inside the div i will create a form element and i will remove the action attribute from here and inside the form i will create the structure for the element itself so a label which will have a class of form label this is a bootstrap class and the text of the label would be upload file and below the label we will have an input element which will be of type file and the name i will give would be file as well and i can remove the value attribute i will give this class a margin bottom of 3 as well this div so if i go back to the website and refresh this i may have to run this again so ctrl f5 to run it and open the browser again to refresh and you can see the element is there and i also need to give a class to the element the control itself so this will be this input will be having a class of form control again a bootstrap class so if you want to know more about bootstrap classes you can go to the with their website and they have their forms component and you'll find these classes over there so if i go back to the browser you can see it's now applying the bootstrap classes we'll also add a container over here so all of this would be inside a container and i'll bring this in so after that once we have the control we will need a a button to submit the form so i will create a div with margin bottom of three and then a button which will be of type submit and the name of the button would be upload you can have any other name as you like this button will have a class of btn and btn primary again bootstrap classes one more thing we will add to the form element tag itself would be the ink type and this will be multipart slash form data so i'll select this option and now it's time to go back to our code behind which you can go from here the index.chtml.cs or inside the razer page you can press f7 and it'll directly take you to the code behind in here i will create another function so public void on post so when our form is posted uh i will catch the values over here and then you can use those values and store your file anywhere so i will create this on post method will have a parameter of an i form file so i form file i'll do a control dot and this basically comes from microsoft.asp.netcore.http and i will give a name to this and this name has to match the the name that you have given to your file input element so the file here should match the name of the parameter itself if you want to give this another name you have to name the change the name of the name attribute over here as well for the element and now i'll put a breakpoint in here and run this application to see uh you know debug this application to see what values we are getting in inside that file uh element so i will go back to the website itself and run this so i will choose the file from here and i will select this angular material thumbnail that i created for my previous website so i'll open this and click on upload if i hover over this file now it has given me something uh in the parameter so it's given me an iform file and if you see it has the content type it has the content disposition it has the file name itself the length and now you can use this file parameter to save your file in local storage or in azure or aws or any other file hosting platforms in our case we will be using a local storage we will store it here in the images folder but using our method you can use any other hosting providers as well and i'll show how you can do that in a generic way so i'll stop this application now and let's start building our upload file service it's now time to save the file and i will create a folder over here so i will go right click add new folder and call this file upload service and inside here i will create a new interface so i'll go to class and create a new interface i will call this i file upload service and the use case for this one will be that it has to upload files to wherever we would like so i will create this as a public interface and the only method it will have is a void of upload or upload file and this will basically get an iform file as a parameter so i form file control dot to bring the dependency in and call the parameter as file and you can keep it as a void but you can also return something like a status of boolean or in my case i will return the the location of the file it is actually stored to so in our case we will store it somewhere here in localhost uh but you it can be stored into azure or any other file hosting provider so i will basically pass a string back and let's make this asynchronous method so i will give this a task of type string bring task in from system.trading.tasks and call this method upload file async so in here i will create another class which will be the implementation class and i will call this local storage or local file upload service and i will inherit from i file upload service which we just created control dot and implement interface and now that we have the method over here we will use this method and we will save our file to local storage so i will create a file name or a full file name for myself so the file path would be path dot combine path dot combine uh i will give parameters to this one so i will need the www root path so i can get this from the constructor because that's injected in the startup so i'll create a constructor and i will get this from i web hosting i web hosting environment control dot or i hosting environment but it is obsolete so it recommends to get this from i web hosting environment so i'll try that again i web hosting environment control uh okay we'll use i hosting environment for now environment and then create an assign property and we'll use this environment to get the content root path append this to the folder that we want to create here so i'll create another folder called images in which i will store these uploaded files let's say images in our case so i've created a folder so the folder name would be images and then the file name so i'll use the file name from here itself file dot file name so now that we have the file path we will use a file stream to upload the file so using file stream is equal to new file stream and this takes the the file path and a file mode that it can create the file dot create and then we can use the file to copy this to async to this new location so i'll pass this the file stream and because this is an async method we will use that using the await keyword and make this function async as well and after all of that it is returning a string back so return the file path back and so the implementation is now complete we will use this inside our index.cshtml for that we have to inject it into our startup so for that we have to inject it into our startup and just below the services.addresser pages here i will inject it using services dot add scoped if i ask for i file upload service give me the local file upload service implementation and now inside the index.html inside the constructor because we have injected the files upload service i can use it over here so i file upload service control dot and bring the dependency in file upload service control dot create and assign property you can assign it with underscore as well if you want and i'll use this service to upload file async and pass the file to it so it handles the uh upload for us and this could be any implementation uh and the index page doesn't know about it because uh it's injected in the service itself so i'll because this is async i'll use the ev8 keyword and make this method async as well the on post method i will do a quick check here if file is not equal to null then go ahead and upload the file just so that we don't get empty files in or exceptions in there and we will use this it's returning a file path right so we'll use the file path and display it into our index.html and that will confirm that the file has been uploaded into local storage so i'll create another property here public string file path and i'll assign this file path over here like this and inside the index.html we can do this in here below the form we can use an image tag and give the source from model dot model dot file path and you can have the alt text as whatever and we will also use the same uh thing to check because it's asynchronous it'll probably load before it has uploaded so i will check if the string is null or white space for the file path so it's if it's not empty show us the image format this and let's run this to see if we are able to get uh upload a file or not so i'll run this and open my browser to refresh this again so it's it's refreshed so now i'll choose a file so i'll click on this file and click on upload so basically something went wrong in there uh it looks like it has thrown an exception so let's see what happened so i will come back to my application and uh debug this to see what's going wrong and i will put a break point in here on the on post method and we will step through it to see what's going wrong and i'll open my browser again just refreshing it and now it's ready so we'll choose a file and click on upload so it comes here the file is there and if i just go one step at a time f10 f10 f11 come inside the file path it's showing is this so let's use this file path till the images folder and see if it actually exists so i'm getting an error that the file part doesn't exist because if i look at it carefully after the project we have to have the www root path so the path is not right so i'll stop the solution and in here i will add the www root path root folder over here slash images and with that change if i run this application without debugging this time because it'll work and run this application again and we'll upload a file from there so open the page again choose the file and click on upload and it came back with the uh image but not really so i'll inspect the element uh and we'll also check the folder so i will click here or it shows the image already so the image is there uh we just got an error while displaying the source property of it so it says this is not not allowed to load local resource so it's something else um it's basically saying that you can't use that local resource just like that but you can see the gist of it that it's able to upload the file and you should be able to use the file here as well it's probably in in a file format and not as uh you know as a hosted file format so it's not able to uh get the file for me that's why but otherwise uh if this was hosted somewhere else and we'll probably do that in the next tutorial that we will use this file upload with some other hosting provider and we will use the same code but with a different implementation of our file hosting platform but till then you can see that the file has been hosted properly uh we can go to the folder and access that as well uh it's working all nicely and uh this is how you upload files in in uh dot net core so i hope you liked the video if you did uh just put a thumbs up in and uh just put some comments down below if you liked it or not and what would you like to see in the next video uh till then i hope you all have a great day thank you so much for watching you

Channel: Sameer Saini

Views: 34,690

Keywords: file upload, upload file .net, upload file in asp.net, file upload in asp.net core, file upload in razor pages, upload file in razor pages, upload wile in asp.net core, upload a file in asp.net core rest api

Id: hcoKLORWbjY

Length: 18min 49sec (1129 seconds)

Published: Thu Nov 25 2021