File Upload with ASP.NET Core MVC

file upload is the process of uploading files from the user system to the web applications storage asp.net go ABC actions support uploading one or more files using simple model binding and in this video we are going to show you how to do that we have a video will recover the upload process with asp.net core web api and angular and if you want to learn more about it feel free to watched the link is in the description below additionally we have an article on this topic on our site as well and if you prefer to read about it just click the link we provided in the description so we have prepared a new asp.net core MSE application and to start things off let's create a new file upload controller in the controller's folder as we can see the index action is created as well after that we are going to create a view for the index action and modify it by creating a form tag with the post method multi-part form data encryption type and specifying the file upload controller and the index action then let's create the phone group Dave with another columned attentive and inside a paragraph with a message for user and the input file element with a multiple attribute by using this attribute we support selecting multiple files in this control additionally let's add another div with the phone group class and a div with a column d-10 class and a simple submit button to trigger our post action in order to support file upload we must specify the encryption type as multi-part form data the encryption type attribute specifies how the form data should be encoded when submitting it to the server this attribute can be used only if the form method is post so let's move on we can access the individual files uploaded to the application through the model binding using the iPhone file interface model binding in asp.net MVC Maps the data from the HTTP requests to the action method parameters now let's modify the file upload controller first we add the HTTP POST attribute to mark this action for the post requests and create the index action in an async manner with the list i phone file files parameter then we extract the size of all the files we needed path for all the files so we create an empty string list and for each file in our files array we check if it has the length and if it does we created the path for that file using the directory get current director methods and the file name property and add that path to the list after that we create a new file stream object with our file path and file mode create and just copy the file to the stream finally you just returned an anonymous object with account size and paths properties now let's start our application navigate to the file upload controller select the file and click the upload button and there we go we can see our result if we inspect our project source folder we should find our image you can know this place a breakpoint into the post action and debug it step by step to see how the files are processed to the string so that's all for this video please hit those like and subscribe buttons if you like the video and want to support us of course don't forget to visit the code Mays blog to download the source code additionally you can subscribe to our mailing list to get notified about our new content and videos so stay tuned and we'll see you again in another video until then all the best

Channel: Code Maze

Views: 17,367

Keywords:

Id: pLuHhQBBPe8

Length: 5min 17sec (317 seconds)

Published: Wed May 13 2020