Recently, I had to implement a file upload from our Angular frontend to our Web Api backend. Because we had to test it also in WCF, i thought to share how you have to do it to save you some time implementing it.

Let’s start with the easy part, the frontend and Angular. Danial Farid created a directive to upload the files. See his project on Github.

Because I modified some things and created a service, I will show it with Danial’s Code, how you can achieve the n-n upload.

Here is our controller:

In our environment, we had to add that we are sending the fields as a form. the rest is same. If you want to upload an array of files, you will have to remove the for loop and use the files for the file property. Like this:

then you will have just one RestCall to your backend. It is up to you. But if you are sending an array of files, you have also to change the logs. In the end, I will paste our upload service as it is, to show you a different way.

Now, lets add a droplocation for our files in our html:

Thats it, now let’ see how we have to configure our Web Api and WCF Restful.

Web Api

To setup and make the Web Api working, was much easier than configuring the WCF.

This is our Config:

This is mostly default, except the last line, where i use the JsonFormatter.

Then our Controller can look like this:

In the Angular Controller we used the url, which we put here in the attribute. And here we are reading the username field which we sent together with the file. Depending on if you are sending an array of files or just one file, you will need the for loop or not.

Thats it, this is then working. 🙂 Pretty easy

WCF

To make the code from the API work in similar manner, we will have to add some settings to our Web.config under <system.serviceModel>. First, we will enable asp.net compatibility.

then to be able to use the HTTPContext, we need to add the following line to the appsettings

Now, lets create our Interface:

Which should be self explaining. And the implementation:

On this class, we had to add the attribute for the asp.net compatibility. Actually you will need to add that to all classes I think. The rest is pretty similar code than in our API.

Now, lets add our service to the web.config file:

Be aware here, in WCF you have a different structure of files and folders. if the service lies under modules/services, then the rest url will be something like localhost/modules/services/PublishFilesService.svc/v1/PublishFiles. This you can change with rewriting the modules or using this url in your upload controller.

So thats it.

AH, I am returning an ResponseMessage class, this is created by me and can be also created or changed to something else.

 

Additions

Extending Filesize per request

Default setting is to allow 4MB per Request, this is sometimes not enough. I think requests up to 4GB are supported. So, you will need to change or add the following to your Web.configs to extend that:

This we will add under <system.web>

and this under <system.webserver>

Now, you should be able to upload 3GB per request. So if you are sending 10 files, all together can not exceed 3GB. If you are sending one by one, then each file can be up to 3GB

My Upload Service

To be flexible to use either upload of one file or an array of files, I created this service. I also validate the file names, because this was necessary in our project.

Next, i am calling it like this from our controller:

I am watching here also the uploadLog form the service to be able to write something to the user.

 

So this is all. Feel free to add some comments.

Uploading Files from Angular to WebApi2 or WCF
Tagged on:                 

2 thoughts on “Uploading Files from Angular to WebApi2 or WCF

  • April 14, 2016 at 7:04 am
    Permalink

    really a great job man, thank you so much for sharing this here!!!!

    Reply

Leave a Reply

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers:

Welcome Damir Kusar

Log in

Lost your password?
%d bloggers like this: