title: Uploading an excel file to FastAPI from a React app
body: <p>Ok, I was really hoping that one of the various other questions on this topic would help me but I simply can't make this work! I'm relatively new to React and using API requests. I'm looking to upload an excel file from my React app and then process it in python using FastAPI as the interface.</p>
  <p>I've followed the various tutorials / documentation approaches and I just get a 422 Unprocessable Entity Error!</p>
  <p>In React, my event handlers look like this:</p>
  <p>When file is selected, set the file in state:</p>
  <pre><code>    onFileChange = (event) =&gt; {
          this.setState({
              uploadFile: event.target.files[0],
              isFileSelected: true
          });
      };
  </code></pre>
  <p>When the &quot;Upload&quot; button is pressed, append to a FormData object and send via an axios request (Database is the axios object):</p>
  <pre><code>   onUploadClick = async (event) =&gt; {
          event.preventDefault()
          var formData = new FormData();
  
          formData.append(
              &quot;UploadFile&quot;,
              this.state.uploadFile,
              this.state.uploadFile.name
          );
  
          this.setState({isFileUploaded: true})
          console.log(this.state.uploadFile)
  
          const headers={'Content-Type': this.state.uploadFile.type}
          
          await Database.post(&quot;/FileUpload&quot;,formData,headers);
      };
  </code></pre>
  <p>And my FastAPI handler looks like this:</p>
  <pre><code>@app.post(&quot;/FileUpload&quot;)
  async def FileUpload(file: UploadFile = File(...)):
      # do some things...
  </code></pre>
  <p>Can someone please put me out my misery?</p>