Post file using axios?

[caynebrister1]

Hello, I am trying to post the file uploaded to the following dropzone. How can I enable the button shown in the return statement when a file is uploaded and how can I get the file in order to post it?
Thanks ahead of time!

function CSVDropzone(props) {
  const {
    getRootProps,
    getInputProps,
    acceptedFiles,
    isFocused,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    accept: {
      "text/csv": [],
    },
    maxFiles: 1,
  });

  const acceptedFileItems = acceptedFiles.map((file) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div className="container">
      <Container {...getRootProps({ isFocused, isDragAccept, isDragReject })}>
        <input {...getInputProps()} />
        <div>
          <p>Click to select a CSV or drop a CSV here.</p>
          <em>(Only *.csv files will be accepted)</em>
          <br />
          <em>(Only 1 file will be accepted)</em>
          <br />
          <button type="button" className="custom-btn btn-13">
            PREVIEW REPAIRS
          </button>
        </div>
        <div>
          <ul>{acceptedFileItems}</ul>
        </div>
      </Container>
    </div>
  );
}

[caynebrister1]

This ended up being the solution.

    const onDrop = useCallback((acceptedFiles) => {
      acceptedFiles.forEach((file) => {
        const reader = new FileReader();

        reader.onabort = () => console.log("file reading was aborted");
        reader.onerror = () => console.log("file reading has failed");
        reader.onload = () => {
          console.log("File loaded!");
          Axios.post("http://127.0.0.1:8000/api/repair-upload/", file);
        };
        reader.readAsArrayBuffer(file);
      });
    }, []);