In this article I am going to disclose how to Upload multipart/form-data, picture,pdf,excel,etc.. to the server using Web API. Web API is essentially using as an mediator amongst client and server. It exposes the server side information to the client like (Website, Android , iPhone and etc..). The client can specifically communicate with the server using Web API. Web API exposes the server information as JSON.
Here, I will explain today how to make a Web API to upload images,document,ppt,multipart/form-data, etc. server. and save on local folder.
What is multipart/form-data?
" enctype='multipart/form-data' means.that is the type of content-type that no characters will be encoded in content . that is why this type is used while uploading files client to server. So multipart/form-data is used once a form requires binary data in content, like the file document,etc..."
To upload multipart/form-data using WebApi follow some simple steps which are given below.
Step 1:- The first step is create a new project with MVC WebApi template name is "UploadDocsDummy" .see image...
In this image you can see i have selected both checkbox "MVC" and "WebApi",so you can select both or only "WebApi".
After click on "Ok" yo can see this image which are given below.
According this image you can see there are model view and controller.so if you are beginner in MVC so learn architecture of MVC and flow.
Step 2:-Create a empty folder "ClientDocument" in your application to save document/image ,etc.... You can see in next image which is already created.
Step 3:- Create a model class "InMemoryMultipartFormDataStreamProvider" inside model folder and use this code ,in this code i am configuring multipart/form-data.
Step 4:- Create a new apiController "DocumentUploadController" inside controller folder.see image..
Step 5:- If you have created a new controller "DocumentUpload" then create a new api (Action) "MediaUpload" like this.
Step 6:- Now we need to configure "DocsUrl" in web.config file. which are using in api code to get URL.
Don't forget to configure this.
According above image i have created a key in web.config file and model,controller,folder.
Step 7:-Run application and use postman to test web api.
if you are not aware about postman click here.. other wise see image how to configure postman to test webapi.
you will put your route and use form-data and post the value and image,document.in postman.After configured all things click on send and see out put like this...see image...........
In this image you see ,we are returning file URL in header .Image has been saved in "ClientDocument" Folder
I hope you are good to post multipart/form-data. You can download this project which are already i've done.
You have just read an article that categorized by title MVC / WEB API by title Part 36::How to upload multipart/form-data in web api 2. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/09/part-36how-to-upload-multipartform-data.html. Thank You!
Author: Bikesh Srivastava - Tuesday, 20 September 2016