title: How to define a REST endpoint in fastAPI for <input type="file"> (and make it work with angular)?
body: <p>I'm doing this <a href="https://blog.angular-university.io/angular-file-upload/" rel="nofollow noreferrer">angular tutorial</a>. I'm trying to create a backend endpoint using python fastAPI that receives the data via HttpClient POST, but I'm struggling to do so.
  (angular 13.0.2, python 3.7, fastapi 0.70.0)</p>
  <p><strong>html template code:</strong></p>
  <pre><code>&lt;input type=&quot;file&quot; class=&quot;file-input&quot; (change)=&quot;onFileSelected($event)&quot; #fileUpload&gt; 
  
  &lt;div class=&quot;file-upload&quot;&gt;
  
      {{fileName || &quot;No file uploaded yet.&quot;}}
  
      &lt;button mat-mini-fab color=&quot;primary&quot; class=&quot;upload-btn&quot; (click)=&quot;fileUpload.click()&quot;&gt;
          &lt;mat-icon&gt;attach_file&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>corresponding component ts code:</strong></p>
  <pre><code>  onFileSelected(event) {
  
      const file: File = event.target.files[0]
      console.log(`onFileSelected(${file.name})`)
  
      if (file) {
        this.fileName = file.name;
        const formData = new FormData();
        formData.append(&quot;thumbnail&quot;, file);
        const upload$ = this.http.post(&quot;http://localhost:8000/thumbnail-upload&quot;, formData);
        upload$.subscribe();
        console.log(&quot;upload done?&quot;)
    }
  </code></pre>
  <p><strong>fastapi code:</strong> inpired by <a href="https://fastapi.tiangolo.com/tutorial/request-files/" rel="nofollow noreferrer">this</a></p>
  <pre><code>@app.post(&quot;/thumbnail-upload&quot;)
  def create_file(file: UploadFile = File(...)):
      print(file)
      return {&quot;file_size&quot;: len(file)}
  </code></pre>
  <p>There seems to be some OK communication going on, but I'm stuck here:</p>
  <p><strong>output from uvicorn server:</strong></p>
  <pre><code>←[32mINFO←[0m:     127.0.0.1:18231 - &quot;←[1mPOST /thumbnail-upload   HTTP/1.1←[0m&quot; ←[31m422 Unprocessable Entity←[0m
  </code></pre>
  <p><strong>output in browser debug console:</strong></p>
  <pre><code>zone.js:2863 POST http://localhost:8000/thumbnail-upload 422 (Unprocessable Entity)
  core.mjs:6495 ERROR HttpErrorResponse {headers: HttpHeaders, status: 422, statusText: 'Unprocessable Entity', url: 'http://localhost:8000/thumbnail-upload', ok: false, …}
  </code></pre>
  <p>How do I need to implement the fastAPI endpoint to get this running?
  Disclaimer: I'm pretty new to angular/fastapi, if I forgot to include necessary information, pls. tell me what's missing ;)</p>