how to remove WebKitFormBoundary from uploaded file

Question

I'm trying to upload a Webvvt file using multipart/form-data, and the problem is that when I send the file to api, the file contain WebKitFormBoundary header and footer which corrupting the Webvvt format, as you can see below:

so can anyone please advise me with an approach to upload the file in other way, or how to remove the header and footer from the file.
my uploading request code is

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('selectedFile', new Blob([selectedFile], { type: 'text/webvtt' }));

    const headers = {
      Accept: ' application/vnd.vimeo.*+json;version=3.4',
    };

    try {
      axios
        .put(`${uploadLink}`, formData, {
          headers,
        })
        .then((response) => {
          const resData = response.data;
          console.log(resData);
          ApplyText();
        });
    } catch (error) {
      console.log(error);
    }
  };

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0]);
    console.log(event);
  };




 <form method="PUT" encType="multipart/form-data" onSubmit={handleSubmit} action={uploadLink}>
        <input type="file" onChange={handleFileSelect} name="file_data" id="file" required />
        <input type="submit" value="Upload File" />
      </form>

Answer 1

So I solved the issue by the following steps : use a file reader to get the contents of the file that I want to "upload". grab that content and put it straight into request body.

the code as following

const handleFile = (e) => {
    e.preventDefault();
      const content = e.target.result;
      setSelectedFile(content);   
  };


  const handleChangeFile = (file) => {
    const fileData = new FileReader();
    fileData.onloadend = handleFile;
    fileData.readAsText(file);
  };