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.
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.
[su_note]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.[/su_note]
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.
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
[su_note]WEB API URL – http://localhost:58730/api/FileUpload[/su_note]
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.
- Select action type – POST
- Enter WEB API URL
- Enter the Key name under Body and make sure form-data is selected.
- Select File
- Finally, click on the send button to invoke service.
- You can see the output in JSON format. You can change it here or it can be predefined from code.
[su_note]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. [/su_note]
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.
Consume in MVC
You can access API to upload an image in many ways. Here I am going to show you the simplest way. To upload the image you should have a controller and corresponding view in your Asp.Net MVC project. Write below code in view to upload the image.
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
[su_button url=”https://github.com/code-adda/WEBAPI_FileUpload” target=”blank” style=”3d” background=”#7a1d18″ size=”5″ radius=”round”]Download Source Code [/su_button]