File upload with React component and dotnet core web API controller

react.js

// Based on https://gist.github.com/AshikNesin/e44b1950f6a24cfcd85330ffc1713513

import React from 'react'
import { post } from 'axios';

class UploadForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 'get-id-from-somewhere',
      file: null,
    };
  }

  async submit(e) {
    e.preventDefault();

    const url = `http://target-url/api/${this.state.id}`;
    const formData = new FormData();
    formData.append('body', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data',
      },
    };
    return post(url, formData, config);
  }

  setFile(e) {
    this.setState({ file: e.target.files[0] });
  }

  render() {
    return (
      <form onSubmit={e => this.submit(e)}>
        <h1>File Upload</h1>
        <input type="file" onChange={e => this.setFile(e)} />
        <button type="submit">Upload</button>
      </form>
    );
  }
}

UploadController.cs

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace Demo.Web.Controllers
{
    public class UploadController : Controller
    {
        [HttpPost]
        [Route("{id:Guid}")]
        public async Task<IActionResult> Post([FromRoute]Guid id, [FromForm]IFormFile body)
        {
            byte[] fileBytes;
            using(var memoryStream = new MemoryStream())
            {
                await body.CopyToAsync(memoryStream);
                fileBytes = memoryStream.ToArray();
            }

            var filename = body.FileName;
            var contentType = body.ContentType;
            
            SaveFileToDatabase(id, fileBytes, filename, contentType);

            return Ok();
        }
    }
}

Could you please upload the function SaveFileToDatabase() ?

Could you please upload the function SaveFileToDatabase() ?

This refers to whatever core logic your application uses to actually persist those values to whatever database you are using.

and what if we are dealing with a list of uploaded files ? could you give us an example, please ?

and what if we are dealing with a list of uploaded files ?

You can treat it as any other POST model: add an ICollection<IFormFile> property to the model that your controller is expecting, then just change 'body' in formData.append('body', this.state.file); to the name of that collection property.

Get errors:
{"errors":{"image":["Could not create an instance of type Microsoft.AspNetCore.Http.IFormFile. Type is an interface or abstract class and cannot be instantiated. Path 'image', line 1, position 55."]},"title":"One or more validation errors occurred.","status":400,"traceId":"80000095-0003-fe00-b63f-84710c7967bb"}

Help. Please.