AngularJS Upload Multiple Files to ASP.Net Web API




In this tutorial, we like to show you how to use AngularJS Upload Multiple Files to ASP .Net Web API 2.0 without using 3rd party library. I got to admit there are a lot of good library doing better than what I shared here, but Why am I still did it all from scratch? This is because I still new in Angular!. I just want to learn πŸ™‚ . Sorry if you reach here because of this title, but if you still feel fine with few things that I learned from this tutorial ( like promises, directory, shared scope, the etc…a lot) , then please carry on! πŸ™‚

Todo
We’ll create a page that will have upload file feature with AngularJS. File name saved in the server must be the same as uploaded file’s name.

Tool used
1. Visual Studio 2015
2. AngularJS 1.5.0
3. Bootstrap

View Demo – AngularJS Upload Multiple Files to ASP.Net Web API



AngularJS Upload Multiple Files to ASP.Net Web API

Code
1. Let’s start create project, UploadFile. The setting of the project are show as below images.

2. Right click on UploadFile project in the solution explorer, and add a folder and name it Custom. Then add a class file and name it CustomUploadMultipartFormProvider.cs and paste the following content

MultipartFormDataStreamProvider is use for writing file content to a FileStream. The reason we create this file, CustomUploadMultipartFormProvider.cs, is because by default the saved file name look weird. Just like the image below. Some said this is mainly for security reason, which I not sure, but what I’m sure is I definitely will not use this high-security feature!
AngularJS Upload Multiple Files to ASP.Net Web API

3. Then, Please navigate to controller and add FileUploadController.cs then paste the following code

4. Now, right click UploadFile project again and add Index.HTML and copy the following code into this file

We want make thing simple, so we did not create folder for CSS and Javascript – which clearly is not a good practice πŸ™‚

5. That’s all! :P, If you doubt on above code whether working or not, no problem, watch the DEMO πŸ˜€




JOIN OUR NEWSLETTER
I agree to have my personal information transfered to MailChimp ( more information )
In case you want to get any future post please allowed us deliver new posts direct into your inbox Or follow us on
We hate spam. Your email address will not be sold or shared with anyone else.