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! 🙂

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

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 😀

AngularJS TreeView Populate Child Node When Click On Parent Node

I just started to learn AngularJS 1, (Ya, I know Angular 2.0 beta was released on Dec 2015), for some reason I still prefer to learn outdated AngularJS 1, that is simply because there are still many awesome components that already built in AngularJS 1 and I do not want to spend time to build on those components and at the same time lack of experience in new language that makes me crazy :(. Agree? I know many not agree with me but anyway, this is my preference.

So, what I going to show you is something I spend hours to complete because there is no sample code out there for me to just copy and paste, too bad. May be I just unlucky to find 1.

Tools used
1. angular-ivh-treeview 1.0.2
2. AngularJS 1.3.8
3. Bootstrap
4. Awesome Font

AngularJS TreeView Populate Child Node When Click On Parent Node

To Do
As we know, if we load too many records into treeview during loading time, the page will look like no responding. So, in order to avoid this issue, we will load the parent node for the first time, then the child node will only load when the parent node is clicked. And, the child node’s data are getting from the server each time the parent node is clicked. Easy? (If you know, :))

AngularJS TreeView Populate Child Node When Click On Parent Node

Basically the treeview will look like above image , from the image
1. Parent Before Click – These nodes will be the first level load from server during page loading/startup
2. Parent On Click – These nodes will trigger http and get data from server and then add child node below this node.
3. Parent Expanded – These are nodes succeeded loaded child node underneath.

1. A simple layout just for demo purpose ,and below are quite self explanatory

We declare few properties for each node as below code and the purposes of each property as comment in the code

1. In order to simulate data getting from server we need to prepare some parent-child dummy data in files, and these are our sample data
The parent nodes

The Child Nodes of “Books”

2. And we need to simulate calling $http to request data from server so below code will help us to achieve this

if you want to use this code in your project just remove those highlighted lines which are purely for this demo purposes

3. For populate the first layer for the treeview’s node, we use the below to achieve this for us

4. Below code is helping us to build the tree node

5. Lastly, we create a Directive to help us to load data on request

6. Fuh…, Feel sleepy after the boring explanation. Arhh.. demo is here. Haha.. Feel free to comment. 🙂