How can I upload CSV File in React with backend in Flask

Question

So I made this app which takes a CSV file from the frontend, sends it to backend written in flask. The backend uses data from the CSV file and generates a new table which it then sends to the jinja template in the form of a list. The list is then displayed in the form of a Bootstrap table. I want to make the frontend using React which does the same functionalities. But since I am a newbie in React, I can see no lead forward. Following is my Flask code.

from flask import Flask, render_template, request
import pandas as pd
import numpy as np


app = Flask(__name__)


@app.route("/", methods=["GET", "POST"])
def index():
    return render_template("index.jsx")


@app.route("/data", methods=["GET", "POST"])
def data():
    try:
        if request.method == "POST":
            file = request.form["upload-file"]
            if file == False:
                return
            data = pd.read_excel(file)
            arr = np.array(data)
            N = arr[2][0]
            N = int(N[2:])
            col = []
            stu = []
            for i in range(N):
                col.append(arr[0][i])
            for i in range(N):
                stu.append(arr[1][i])
            college = []
            student = []
            # college array
            for i in range(4, 4 + N):
                tmp = []
                for j in range(0, N):
                    x = stu.index(arr[i][j + 1])
                    tmp.append(x + N)
                college.append(tmp)
            # student array
            for i in range(5 + N, 5 + (2 * N)):
                tmp = []
                for j in range(0, N):
                    x = col.index(arr[i][j + 1])
                    tmp.append(x)
                student.append(tmp)

            ans = []
            prefer = []
            for i in range(0, len(college)):
                prefer.append(college[i])
            for i in range(0, len(student)):
                prefer.append(student[i])

            def sPrefersC1OverC(prefer, s, c, c1):
                for i in range(N):
                    if prefer[s][i] == c1:
                        return True
                    if prefer[s][i] == c:
                        return False

            def stablMatch(prefer):
                sPartner = [-1 for i in range(N)]
                cFree = [False for i in range(N)]
                freeCount = N
                while freeCount > 0:
                    c = 0
                    while c < N:
                        if cFree[c] == False:
                            break
                        c += 1
                    i = 0
                    while i < N and cFree[c] == False:
                        s = prefer[c][i]
                        if sPartner[s - N] == -1:
                            sPartner[s - N] = c
                            cFree[c] = True
                            freeCount -= 1
                        else:
                            c1 = sPartner[s - N]
                            if sPrefersC1OverC(prefer, s, c, c1) == False:
                                sPartner[s - N] = c
                                cFree[c] = True
                                cFree[c1] = False
                        i += 1
                for i in range(N):
                    tmp = []
                    tmp.append(stu[((i + N) % N)])
                    tmp.append(col[sPartner[i]])
                    ans.append(tmp)

            stablMatch(prefer)

            return render_template("data.jsx", N=N, ans=ans,)
    except:
        return render_template("error.jsx")


if __name__ == "__main__":
    app.run(debug=True)

Here is the React code which I tried but it failed

import React, { Component } from "react";

class Form extends Component {
  onChange(e) {
    let file = e.target.files;
    let reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = (e) => {
      const url = "http://localhost:3000/data";
      const formData = { file: e.target.result };
      return postMessage(url, formData).then((response) =>
        console.warn("result!!", response)
      );
    };
  }
  render() {
    return (
      <div>
        <form action="data" method="POST">
          <div class="form-group m-2">
            <input
              type="file"
              name="upload-file"
              class="form-control-file"
              id="exampleFormControlFile1"
            />
            <button
              type="submit"
              onClick={(e) => this.onChange(e)}
              class="btn btn-outline-dark m-2"
            >
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default Form;

The frontend is unable to POST the file to the backend

I tried to find online solutions but none of them could really be the solution to my problem. Any help would be highly appreciated.