Upload file in ReactJS to WebAPI

Create a new React App using create-react-app as explained in this Post. The sample ReactJS code is available here.

In the index.js file change the code as below:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

For the App.js file, change the code as below:

import React from 'react';       
import './App.css';
import Fileupload from './FileUpload'
function App() {    
  return (    
    <div className="App">    
      <Fileupload></Fileupload>
    </div>    
  );    
}
export default App;

Now comes the FileUpload component as FileUpload.js:

import React from 'react';
import axios from 'axios';

class Fileupload extends React.Component {

    constructor(props) {    
            super(props);    
            this.state = {    
                    file: '',    
        };    
    }

    async submit(e) {    
        e.preventDefault();    
        const url = `http://url`;    
        const formData = new FormData();    
        formData.append('body', this.state.file);    
        const config = {    
            headers: {    
                'content-type': 'multipart/form-data',
                'token': 'xxx'                
            },
        };
        const HTTP = axios.create({
            withCredentials: true
        });

        //return post(url, formData, config);
        return HTTP.post(url, formData, config);
    }
    setFile(e) {    
        this.setState({ file: e.target.files[0] });    
    }

    render() {    
        return (    
                <div className="container-fluid">    
                        <form onSubmit={e => this.submit(e)}>    
                                <div className="col-sm-12 btn btn-primary">    
                                        File Upload    
                        </div>    
                                <h1>File Upload</h1>    
                                <input type="file" onChange={e => this.setFile(e)} />    
                                <button className="btn btn-primary" type="submit">Upload</button>    
                        </form>    
                </div>    
        )    
    }
}
export default Fileupload

Here I’m using axios to call the API via Post request. Passing the credentials in the call with create.
The token part is optional in the Headers, you can add/remove headers based on your requirement.

From the WebAPI end, I’m using .Net core. You can receive the file in the Action method as below:

[HttpPost]
[Route("upload")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
public IActionResult UploadForm([FromQuery] string username)
{
	var request = HttpContext.Request;
            
	if (request.Form.Files.Count > 0)
	{
		filename = request.Form.Files[0].FileName;
		extension = filename.Substring(filename.LastIndexOf(".")).ToLower();
		if (!string.IsNullOrEmpty(extension) && extension.Equals(".docx"))
		{
			using (var memoryStream = new MemoryStream())
			{
				request.Form.Files[0].CopyTo(memoryStream);
				
				// Upload the file if less than 2 MB
				if (memoryStream.Length < 2097152)
				{
					string check = Service.CheckifValid(username);
					if (check.Equals("ok"))
					{
						//Process the stream and pass the data to the back-end in the Service Layer.
						result = Service.UploadStream(memoryStream, filename, extension, username);
					}
					else
					{
						return Ok(check);
					}
				}
				else
				{
					return BadRequest("File size too large");
				}
			}
		}
		else
		{
			return BadRequest("File format not recognised.");
		}
	}
	//Other ToDos...
}

How to use Server.MapPath in asp.net core

Server.MapPath is not available in asp.net core. Instead, you can use IWebHostEnvironment interface to access any physical contents kept in the specified path.

Below is the Controller code using the IWebHostEnvironment ContentRootPath property which gets the absolute path to the directory that contains the Application content files:

[ApiController]
public class DocumentController : ControllerBase
{
	private IDocumentService offService = null;
	private readonly IWebHostEnvironment _host;

	public DocumentController(IDocumentService offService, IWebHostEnvironment host)
	{
		this.offService = offService;
		this._host = host;
	}
	
	[HttpGet]
	[Route("some/route")]
	public IActionResult ExportToFile([FromQuery] int UserId)
	{
		var username = HttpContext.User.Identity.Name.Split('\\')[1].ToString();
		
		//get the memoryStream by passing the absolute path:
		MemoryStream memoryStream = offService.GetWordStream(_host.ContentRootPath);
		
		memoryStream.Position = 0;
		
		return File(memoryStream, "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "File.docx"); // returns a FileStreamResult
	}
}	

Use the path in the File IO methods, example below:

File.Copy(path + "\\DocPath\\File.docm", strFileName);

In the debug mode, this path is the WebAPI Project absolute path to the directory. During runtime, this path is the absolute path where the files are hosted on the Server.

Download word file using axios get from WebAPI

The below code is using axios get method with Headers token to be passed with credentials which in this case would be Windows Authentication to the WebAPI.

The response returned by the Promise contains the header “content-disposition” which has the name of the file being downloaded.

The content-disposition header value is as below:

attachment; filename="SomeFile.docm"; filename*=UTF-8''SomeFile.docm

The content-type required for this file from the API is:

application/vnd.openxmlformats-officedocument.wordprocessingml.document

The returned response has the blob in the data property which then requires to be converted to a downloadble link. The filename is being extracted from the content-disposition header.

const HTTP1 = axios.create({
                  withCredentials: true
                });
const response = HTTP1.get('http://path/worddoc?userid=<someid>', {
		        headers: {
		          'token': 'xxxxx'
		        },
				responseType: 'blob'
		      }).then((response) => {
			
				const headerval = response.headers['content-disposition'];
				var filename = headerval.split(';')[1].split('=')[1].replace('"', '').replace('"', '');
				
				const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
				const link = document.createElement('a');
				link.href = downloadUrl;
				link.setAttribute('download', filename); //any other extension
				document.body.appendChild(link);
				link.click();
				link.remove();
			  });

How to add folders in .net core webapi to Publish directory

When you add a folder in your project, your .csproj file gets modified as shown below:

<ItemGroup>
	<Folder Include="AppData\" />
	<Folder Include="OfflineFiles\2019\" />
</ItemGroup>

To add a folder to the Publish directory with some pre-existing contents, add the below ItemGroup in your .csproj file:

<ItemGroup>
	<Content Include="OfflineFiles\**">
		<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
	</Content>
</ItemGroup>

If you have a folder without any pre-existing content, add the below Target action in the .csproj file:

<Target Name="CreateAppDataFolder" AfterTargets="AfterPublish">
	<MakeDir Directories="$(PublishUrl)AppData" Condition="!Exists('$(PublishUrl)AppData')" />
</Target>

If you check the WebPublishMethod (.pubxml file under Properties folder) which in this is case is FileSystem, the publishUrl contains the directory where the files are published:

<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FileSystem</WebPublishMethod>
    <PublishProvider>FileSystem</PublishProvider>
    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
    <LastUsedPlatform>Any CPU</LastUsedPlatform>
    <SiteUrlToLaunchAfterPublish />
    <LaunchSiteAfterPublish>True</LaunchSiteAfterPublish>
    <ExcludeApp_Data>False</ExcludeApp_Data>
    <ProjectGuid>xxxx</ProjectGuid>
    <publishUrl>C:\Path</publishUrl>
    <DeleteExistingFiles>False</DeleteExistingFiles>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <SelfContained>false</SelfContained>
  </PropertyGroup>
</Project>

I’m using .net core 3.1 for the above method. This method might vary in other versions of .net core.

Authorize .net core webapi with token using Windows Authentication

Create a TokenFactory class that creates an encrypted token with the Windows authenticated username:

public class TokenFactory
{
	public static Aes aes = Aes.Create();
	public static string GenerateToken(string UserName)
	{
		//Get the required values...
		TokenDetails encrytionData = new TokenDetails
		{
			UserName = uName,
			Role = rName,
			SecretKey = sKey,
			Date = DateTime.Now,
			Interval = duration
		};
		//To Do: Generate with Cryptography encryption logic.
		var jsonSerialize = JsonConvert.SerializeObject(encrytionData);
		byte[] encrypted = Cryptography.Encrypt(jsonSerialize, aes.Key, aes.IV);
		var authToken = Convert.ToBase64String(encrypted);
		return authToken;
	}
	
	public static bool ValidateToken(string authToken)
	{
		bool isValidated;
		if (!String.IsNullOrEmpty(authToken))
		{
			var bytarr = Convert.FromBase64String(authToken);
			// Decrypt the bytes to a string.
			string dcryptToken = Cryptography.Decrypt(bytarr, aes.Key, aes.IV);
			var obj = JsonConvert.DeserializeObject<TokenDetails>(dcryptToken);
			TimeSpan timeSpan = DateTime.Now - obj.Date;
			
			if (timeSpan.TotalMinutes > CommonUtil.Duration)
			{
				isValidated = false;
			}
			else
			{
				isValidated = true;
			}
		}
		else
		{
			isValidated = false;
		}
		return isValidated;
	}
	
	public static string GetUserFromToken(string authToken)
	{
		var bytarr = Convert.FromBase64String(authToken);
		// Decrypt the bytes to a string.
		string dcryptToken = Cryptography.Decrypt(bytarr, aes.Key, aes.IV);
		var obj = JsonConvert.DeserializeObject<TokenDetails>(dcryptToken);
		return Convert.ToString(obj.UserName);
	}
}

Below is TokenDetails class:

public class TokenDetails
{
	public DateTime Date { get; set; }
	public string  SecretKey { get; set; }
	public string Role { get; set; }
	public string UserName { get; set; }
	public int Interval { get; set; }
}

Create a RequestFilter that will inherit ActionFilterAttribute to authorize any request using the [RequestFilter] attribute:

public class RequestFilter : ActionFilterAttribute
{
	public override void OnActionExecuting(ActionExecutingContext context)
	{
		Microsoft.AspNetCore.Http.IHeaderDictionary headers = context.HttpContext.Request.Headers;
		var user = context.HttpContext.User.Identity.Name;
		bool IsValidated = false;
		string token = string.Empty;
		if (CheckValidHeaders(context))
		{
			if (context.HttpContext.Request.Headers.ContainsKey("token"))
			{
				token = context.HttpContext.Request.Headers["token"].ToString();
				IsValidated = TokenFactory.ValidateToken(token, user);
			}
		}

		if (!IsValidated)
		{
			if (user.Equals(TokenFactory.GetUserFromToken(token)))
			{
				token = TokenFactory.GenerateToken(user);
				context.HttpContext.Request.Headers.Remove("token");
				context.HttpContext.Request.Headers.Add("token", token);
			}
			else
			{
				//Return UnAuthorized if current Windows User is not same as the one encrypted in token.
				context.Result = new UnauthorizedResult();
			}
		}
	}

	public override void OnActionExecuted(ActionExecutedContext context)
	{
		var token = Convert.ToString(context.HttpContext.Request.Headers["token"]);
		context.HttpContext.Response.Headers.Add("token", token);
	}

	private bool CheckValidHeaders(ActionExecutingContext context)
	{
		if (String.IsNullOrEmpty(context.HttpContext.Request.Headers["token"]))
		{
			return false;
		}

		return true;
	}
}

Sample Controller implementation to fetch the token:

[ApiController]
public class UserController : ControllerBase
{
	// GET: api/User
	[Route("User")]
	[Authorize]
	[HttpGet]
	public IActionResult GetUser()
	
	{
		var user = HttpContext.User.Identity.Name;
		string token = TokenFactory.GenerateToken(user);
		//bool isValid = TokenFactory.ValidateToken(token, user);
		return Ok(token);
	}
}

Use the [Authorize] attribute if you’ve also enabled Anonymous Authentication to allow OPTIONS request. This is explained here in further detail.

You can Authorize your users with the [RequestFilter] to filter out the Unauthorized candidates.

[RequestFilter]
[ApiController]
[Authorize]
public class AppraisalsHomeController : ControllerBase
{
	//To Do...
}

Support pre-flight OPTIONS requests in .Net WebAPI

A way to support the ‘OPTIONS’ pre-flight request in .net WebAPI is to by-pass this request with a default response and returning the required Headers.

Add the below code in your Global.asax.cs file under the Application_BeginRequest method:

protected void Application_BeginRequest()
{
	if (Request.HttpMethod == "OPTIONS")
	{
		HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
		HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, expiry, id, token, token-type");
		HttpContext.Current.Response.AddHeader("Access-Control-Allow‌​-Credentials", "true");
		HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
		HttpContext.Current.Response.End();
	}
}

So when you call the WebAPI with Javscript fetch/axios, the pre-flight request sent before the actual request would get the 200 status code.

The example above shows some sample custom headers and allowed methods that will be returned in Response Headers.