dotnet core large file upload with resume using tus and react/nextjs

dotnet new webapp -n FileUpload -o .

dotnet add package tusdotnet --version 2.4.0

services.AddCors();

app.UseCors(builder => builder
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowAnyOrigin()
        .WithExposedHeaders(CorsHelper.GetExposedHeaders()));

app.Use((context, next) =>
{
    // Default limit was changed some time ago. Should work by setting MaxRequestBodySize to null using ConfigureKestrel but this does not seem to work for IISExpress.
    // Source: https://github.com/aspnet/Announcements/issues/267
    context.Features.Get<IHttpMaxRequestBodySizeFeature>().MaxRequestBodySize = null;
    return next.Invoke();
});

app.UseTus(httpContext => new DefaultTusConfiguration
{
    Store = new TusDiskStore(@"C:\tusfiles\"),
    UrlPath = "/files",
    Events = new Events
    {
        OnFileCompleteAsync = async eventContext =>
        {
            // eventContext.FileId is the id of the file that was uploaded.
            // eventContext.Store is the data store that was used (in this case an instance of the TusDiskStore)

            // A normal use case here would be to read the file and do some processing on it.
            ITusFile file = await eventContext.GetFileAsync();
            var result = await DoSomeProcessing(file, eventContext.CancellationToken).ConfigureAwait(false);

            if (!result)
            {
                //throw new MyProcessingException("Something went wrong during processing");
            }
        }
    }
});

yarn create next-app --typescript

yarn add tus-js-client

import React from "react";
import { Upload } from "tus-js-client";
interface Props {}

const FileUpload = (props: Props) => {
  const onFileChange = (e: any) => {
    var file = e.target.files[0];
    const upload = new Upload(file, {
      endpoint: "https://localhost:5001/files",
      retryDelays: [0, 1000, 3000, 5000],
      metadata: {
        filename: file.name,
        filetype: file.type,
      },
      onError: function (error) {
        console.log("Failed because: " + error);
      },
      onProgress: function (bytesUploaded, bytesTotal) {
        var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
        console.log(bytesUploaded, bytesTotal, percentage + "%");
      },
      onSuccess: function () {
        console.log("Download %s from %s", upload.file.name, upload.url);
      },
    });

    // Check if there are any previous uploads to continue.
    upload.findPreviousUploads().then(function (previousUploads) {
      // Found previous uploads so we select the first one.
      if (previousUploads.length) {
        upload.resumeFromPreviousUpload(previousUploads[0]);
      }

      // Start the upload
      upload.start();
    });
  };
  return (
    <div className="text-center text-2xl p-6">
      <input type="file" name="file" id="" onChange={onFileChange} />
    </div>
  );
};

export default FileUpload;

<FileUpload></FileUpload>