title: File Upload with Angular 6 towards a Flask (Python) Webservice
body: <p>I created a webservice with flask to save files, which strongly follows the officially flask <a href="http://flask.pocoo.org/docs/1.0/patterns/fileuploads/" rel="nofollow noreferrer">example</a>:</p>
  
  <pre><code>@app.route('/parse_table', methods=['POST'])
  def upload_file():
      print(request.files)
      # check if the post request has the file part
      if 'file' not in request.files:
          print('no file in request')
          return""
      file = request.files['file']
      if file.filename == '':
          print('no selected file')
          return""
      if file and allowed_file(file.filename):
          print("hello")
          filename = secure_filename(file.filename)
          file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
          return ""
      print("end")
      return""
  </code></pre>
  
  <p>When I simply using forms in my webapp the service works perfectly (file will be stored on server)</p>
  
  <pre><code>&lt;form action = "http://127.0.0.1:5000/parse_table" method = "POST"
        enctype = "multipart/form-data"&gt;
    &lt;input type = "file" name = "file" /        
    &lt;input type = "submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>When trying to handle the upload via Angular <code>HttpClient</code>, flask detects no file in request (i.e. <code>print('no file in request')</code> will be executed)</strong>  </p>
  
  <p><em>component.html</em></p>
  
  <pre><code>&lt;input #fileInput name="file" type="file" (change)="handleFileInput($event.target.files)"&gt;
  &lt;button mat-raised-button class="standard-button" (click)="uploadFile()"&gt;Upload file&lt;/button&gt;
  </code></pre>
  
  <p><em>component.ts</em></p>
  
  <pre><code>  @ViewChild('fileInput') fileInput;
    uploadFile() {
      const files: FileList = this.fileInput.nativeElement.files;
      if (files.length === 0) {
        return;
      };
  
      this.backendCommunicationService.parseTable(files).subscribe((data: any) =&gt; {
        console.log(data);
      });
  </code></pre>
  
  <p><em>backend-communication.service.ts</em></p>
  
  <pre><code>parseTable(files) {
    const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'multipart/form-data',
      })
    };
    const formData: FormData = new FormData();
    formData.append('file', files[0], files[0].name);
    return this.http.post(this.backendAddress + '/parse_table', formData, httpOptions)
  }
  </code></pre>
  
  <p>Any suggestions/ hints? </p>