Upload file on server using ASP.NET WEB API

Introduction :

This article will help you to understand how to Upload file on the server using Asp.Net WEB API. If you are looking for a solution to implement such functionality where the user can access this feature from any platform whether it is web, desktop or mobile platform. Examples – DropBox, Google Drive, Facebook etc. We can upload files on their server from any devices either from mobile, web or desktop. You have to create WEB API and expose it to the user in order to accomplish this task. Basically, ASP.NET developers using HTML file input fields and form submission to upload file on the server. By default this file upload process is synchronous. But with using Web API in combination with the asynchronous programming features of the .NET framework we can easily upload files on the server in an asynchronous manner.

Create a WEB API Project :

You can follow below steps to create WEB API Project in order to create file upload on the server.

  • Open Visual Studio 2013/15/17 either it is Community version, professional version or enterprise version.
  • Click on File Menu
  • Click on New and then Click on Project menu.
  • This will open a new window – New project, where you can select the project type.
  • Expand Installed, Expand Language and select web.
  • Select .NET framework on which you are going to build your WEB API.
  • Select Template. Here I’ve selected ASP.NET Web Application(.Net Framework)
  • Enter Project Name. Here I’ve entered WEBAPI_FileUpload
  • Click on OK button.

Create Required Classes :

Create a “UploadRepo” folder inside Project WEBAPI_FileUpload where we are going to add three required class which will help us to implement functionality that can upload file on the server.

1st : FileUploadDetails.cs 

In FileUploadDetailsclass, we are going to use four properties.

  • FilePath – store path of the file where it is going to store on the server.
  • FileName – store name of the file.
  • FileLength – store the exact size of the file.
  • FileCreatedTime – store file creation time.

you can add more properties as per your project requirement.

2nd: Mime.cs

In Mime class, we are going to inherit it with ActionFilterAttribute and then override OnActionExecuting.

3rd : MultiFileUploadProvider.cs

Create a Controller

First, we create an API controller that implements an HTTP POST action handling the file upload. Note that the action returns Task as we read the file asynchronously.

Note: We use the new async/await keywords introduced in Visual Studio 11 Beta but you can equally well use Tasks and the Continue With pattern already present in Visual Studio 2010.

Basically, with ASP.NET platform, we used HTML file input fields and form submission to accomplish this task. By default this file upload process is synchronous. But in Web API we can accomplish the same task by asynchronous programming features of the .NET framework which help us to easily upload files on the server in an asynchronous manner. As you can see there is async function Post to upload files on the server.

WebApiConfig :
When we created Web API project using the WebAPI template in the Create Web API Project section, it also added WebApiConfig class in the App_Start folder with default route as shown below. You can customize the default routing as per your need.

Follow given link to read more about configuring WEB API routing :
Attribute Routing in ASP.NET Web API 2

WEB API URL – http://localhost:58730/api/FileUpload

Testing the Solution: Upload File on Server 

Fine! you have already created a WEB API to upload files on the server. You can test same application using POSTMAN or Fiddler. Here we are going to use POSTMAN to upload file on the server. Here, I’ve not mentioned any specific type of file format, So you can upload almost any kind of file.

To test WEB API follow below steps one by one.

  1. Select action type – POST
  2. Enter WEB API URL
  3. Enter the Key name under Body and make sure form-data is selected.
  4. Select File
  5. Finally, click on the send button to invoke service.
  6. You can see the output in JSON format. You can change it here or it can be predefined from code.

 

code-adda upload file on server

Note: You must have a folder in the root directory of your project called UploadedFiles. You will upload your files in this folder. You may later name the folder as you wish. This is where the uploaded files will be saved.

The uploaded result will contain the file uploaded local path in the server, file’s name and length in bytes. You can add any other properties you want.

I hope you enjoyed this guide, for relevant content that was cited please refer to the resources below:
Sending HTML Form Data in ASP.NET Web API: File Upload and Multipart MIME

You can download the complete source code from here

Download Source Code

Reference :

Sending HTML Form Data in ASP.NET Web API: Form-urlencoded Data

ASP.NET Web API file download service with resume support

4 thoughts on “Upload file on server using ASP.NET WEB API”

  1. H.Oktri says:

    I’m seeing error when following Mime class. it says that ‘System.Web.Http.Controllers’, ‘HttpActionContext’, and ‘HttpResponseException’ type or namespace could not be found. any idea how to fix this?

    1. Ravi Ranjan Kumar says:

      You need to add required reference to access ‘System.Web.Http.Controllers’, ‘HttpActionContext’, and ‘HttpResponseException’. Add System.Web.Http.Controllers and System.Web.Http in your project and run it again. Please ping me again in case if you have have issue while implementation.

      1. H.OKTRI says:

        ok, so the images I upload are stored to the UploadedFiles folder ( I named it ImageFolder in this case). but none of the fields (FileName, FilePath, FileLength, and FileCreatedTime) returned a value to database. Is there any way to fix this?

  2. Saif says:

    Hello Ravi,
    Really great article and clear to understand. I want to upload video and convert using FFmpeg. Do you have any guide on how to convert and restrict the file upload?

Leave a Reply