title: React-dropzone-uploader : 422 Unprocessable Entity with fastapi upload
body: <p>We are using react dropzone uploader to upload video with fastapi's</p>
  <blockquote>
  <p>UploadFile</p>
  </blockquote>
  <p>function</p>
  <p>Below is the code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const MyUploader = () =&gt; {
    
    
    // called every time a file's `status` changes
    const handleChangeStatus = ({ meta, file }, status) =&gt; { console.log(status, meta, file) }
    
    // receives array of files that are done uploading when submit button is clicked
    const handleSubmit = (files, allFiles) =&gt; {
          files.map(file =&gt; uploadFile(file))
     
    }
  
    return (
      &lt;Dropzone
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="video/*"
      /&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>and</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function uploadFile (file) {
    // Initial FormData
    console.log("file inside uploadfile",file)
    let formData = new FormData();
    formData.append("file_obj", file);
    const clientid=localStorage.getItem("client_id");
    console.log("clientid",clientid)
  
    return axios.post(`${apiEndpoint}/upload?clientId=${clientid}`, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  }</code></pre>
  </div>
  </div>
  </p>
  <p>below is the error getting</p>
  <p><a href="https://i.stack.imgur.com/rKm8k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rKm8k.png" alt="error.png" /></a></p>
  <p>and backend code is</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@router.post("/upload")
  async def Videoupload(response: Response, clientId: str = None, file_obj: UploadFile = File(...)):
      try:
          if validate_filename(file_obj.filename):
                response.status_code=409 
                return "video with filename already exists"
          upload_video(clientId,file_obj)
          response.status_code = 201
          return "file uploaded"
      except Exception as error:
          print("Error in uploading", str(error))
          response.status_code = 500
          return "Error in uploading"</code></pre>
  </div>
  </div>
  </p>
  <p>It could be great if anybody can help with this</p>