title: FilePond with ReactJs, file input
body: <p>I want to save the File uploaded in <a href="https://pqina.nl/filepond/docs/getting-started/installation/react/" rel="nofollow noreferrer">FilePond(using react)</a> inside a Form, how to get the file from the form so that I can send it using Axios?</p>
  <p>This is the Form, does <code>fileRef</code> holds the file?</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;form onSubmit={handleFileSubmit}&gt;
          &lt;FilePond
            name=&quot;excel_sheet&quot;
            server={server}
            labelIdle={message}
            maxFiles={1}
            acceptedFileTypes={[
              &quot;application/vnd.ms-excel&quot;,
              &quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot;,
            ]}
            credits={&quot;&quot;}
            ref={fileRef}
          /&gt;
  
          &lt;button type=&quot;submit&quot; className=&quot;btn&quot;&gt;
            Upload
          &lt;/button&gt;
        &lt;/form&gt;
  </code></pre>
  <p>This is form submit handler, what to put on axios second param to send the file?</p>
  <pre class="lang-js prettyprint-override"><code>async function handleFileSubmit(e) {
      e.preventDefault();
  
      // hit api route to upload the file
      const file = fileRef.current;
      const config = {
        headers: {
          &quot;Content-Type&quot;: &quot;application/json&quot;,
          authorization: `Bearer ${token}`,
        },
      };
      // await axios.post(&quot;/api/file/upload-file&quot;, {}, config);
    }
  </code></pre>