Upload File in ASP.Net Core Razor Pages

hello friends welcome to my youtube channel today i'll teach you how to upload file in asp.net core razer pages [Music] so let's begin our video first you have to open laser page now inside the view i am inheriting the tag helper classes now i'm adding a form am setting the method as post now i am setting the encryption type to multipart form data this particular attribute is very necessary when you are uploading a file using the form this particular span is used as a label for the file upload control now i'll be adding a file upload control input type equal to file which will be used to select and upload the file to the server here i am setting the attribute multiple which is an html5 attribute for the input type equal to file using the multiple attribute we can select and upload multiple files on a single button click the next thing i am adding is a input type equal to submit in other word upload button which will be used to file upload to the handler method now i am making use of asp page handler attribute and i am setting its value as upload and this particular attribute is used for specifying the handler method now let's move to the index model class where we'll be writing the code or uploading and saving the file here we'll start by adding the namespaces so the first namespace is system.io it will be required for saving the file and for file and directory operations the next namespace is microsoft.asp.net core.hosting this particular namespace is required for the i hosting environment interface this particular interface is used for accessing the www root folder inside the www root folder will be saving the files finally the third namespace is microsoft.espinatcore.http this particular namespace is required for the iform file interface which is required for holding the uploaded file now here i am creating a private property for i hosting environment interface which i'll be using throughout the index model class so here i am creating a public property as you have seen earlier we have specified this particular class as the model for our laser page that means whatever properties you create here can be inherited inside the reserve page that means if i create a property message here i can easily use it in my reserve page this is quite again similar to the web forms where in our codeband class if you create a protected or public property we can access it in our aspx page now i am creating a constructor of index model class and i am passing the i hosting environment object to it inside the constructor i'll be setting the private property with the object of the i hosting environment which is passed as a parameter this process is known as dependency injection and it is used in all the asp.net core projects where we need to access the www root folder so this is the handler method which will handle the uploading of files this particular handler method will accept a collection of iphone file objects as parameter as in this particular example i am uploading multiple files in case you are uploading single file then you can use a single object rather than a collection so in the very first line i am creating a variable where i'll be fetching the path of the www root folder from the i i-hosting environment interface now i am making use of another variable in this particular variable i will be combining the path of the www root folder along with the path of the uploads folder now the uploads folder is the folder or directory where we will be storing the files which are being uploaded so instead of concatenating it multiple times i am creating a variable and doing it only once now i am adding a if condition for directory existence which means i will be checking whether the directory uploads exists if it does not then the code will create it before moving ahead i would like to inform you that an article has already been posted on this topic the link for the article and the code sample are available in the description also if you need any further help feel free to ask on forums the link for the forum is also available in the description finally i would like to request you to please subscribe to my channel and click the bell icon now i am using a forage loop to traverse through the collection of the files and one by one inside the forage loop the file will be saved now i am fetching the file name using the path.getfilename function and storing it into a variable now for saving the file i am making use of file stream class i'll be using the file sim card to create the file in the location as you can see in the very first parameter where the file path is passed i am combining the path of the folder with the file name and i am setting the mode as create which means i need to create the file finally i am copying the file to the stream which completes the file saving operation now inside the using block i am setting message property this particular property will be used to display the details of the uploaded file to the user so here i'll be setting the name of the file which is being saved at present now let's move to the laser page where we'll write the code for displaying the message to the user i am making use of an html pen to which i have set the color as green now i am making use of raw function of the html helper class and to the row function i am passing the message object the html raw function is used to display the html contained in raw format otherwise it will be encoded and will not be displayed properly finally our complete application is ready now we can run it and see it in action so as you can see the file upload as well as the button is visible now i'll select file and i'll click on the upload button as you can see the file has been uploaded successfully so with this we come to the end of this video so today we learned how to upload file in asp.net core razer pages thanks for watching please like share and subscribe and don't forget to click the bell icon goodbye [Music] you

Channel: ASPSnippets

Views: 2,270

Keywords: Upload, Core, ASP.Net, .Net, Folder, Directory, Multiple, Single, RazorPages, Razor, Pages, IndexModel, PageModel, File

Id: T4Ft_gpXAXk

Length: 9min 25sec (565 seconds)

Published: Sat Jul 23 2022