How to Upload Files in .NET core Web API and React

File Upload in SPA(Single Page Application) sometimes raises more stubborn than usual. Today we will be implementing how to upload files in .NET core Web API from React.

It doesn’t matter which framework you use in the client-side, as far it’s a JS Framework code implementation will be the same with little basic knowledge. Although we will be uploading files synchronously in .NET core.

Create Project

Do create a .NET core Web API project and React project.

We will be using Visual Studio Code for React and Visual Studio for .NET core.

Code

First let’s setup CORS in .NET core for allowing making HttpRequest from React.

In startup.cs file, inside ConfigureServices method add this following service which will create CORS policy.

CORS Policy

Now use this CORS policy inside the Configure method. Place UseCors in correct sequence otherwise, it will not work.

Now Create a Model FileModel.cs inside the Model folder.

Model

We will be able to access values sent through HttpRequest using Model Binding. Here we are using IFormFile interface to access file sent in HttpRequest. Model Binding in ASP.NET core automatically maps data in specified model from HttpRequest.

• For uploading single file

public IFormFile FormFile { get; set; }

• For uploading multiple files

public List<IFormFile> FormFiles { get; set; }

Check out for more information about Model Binding

Model Binding in ASP.NET Core

Here we are going for Single File Upload. Now Create a Controller FileController.cs and place following code.

FileController.cs

Create wwwroot folder inside project folder where we will put our uploaded files.

We are using FromForm because it will have Content-Type : multipart/form-data or application/x-www-form-urlencoded

Now let’s move to React Part

Create a file FileUpload.js inside src folder. This file will contain all our GUI and file uploading logic.

Install axios for making HttpRequest to server and place following code inside FileUpload.js .

FileUpload.js

A brief overview about FormData here,

When we make Ajax request and if that Request contains files, FormData object favors developers a lot. It’s the object to represent HTML form data.

If we use HtmlForm element the for file upload, we do mention enctype=”multipart/form-data” in form tag which explicitly specifies it will contain data and files.

The special features of FormData is that network methods can accept FormData object as body and it’s encoded, sent out with Content-Type : multipart/form-data which should be while uploading file and data together in ajax request or HtmlForm element.

Now import FileUpload component inside App.js and use it.

App.js

And now do npm start and go to http://localhost:3000 , select file and upload file. You will find that file inside wwwroot folder in server.

If you are having any questions, leave a comment.

Check out the Github repository for source code

dev-sankhadip/.NET-core-and-React-File-Upload

Sankhadip Samanta

Full Stack Developer, Code Quotient | Tech Writer and Social Media Handler at BlogMarch

Find me on Linkedin 😃 and Github 😅