title: How to make a POST request from Angular to Flask server
body: <p>I'm working on an application that requires me to upload csv files to a FLASK server from an Angular frontend. i am having difficulties doing that. how can i connect the angular frontend to the backend flask server.</p>
  
  <p><strong>Here's my component.html</strong></p>
  
  <pre><code>&lt;div [hidden] = "submitted"&gt;
  &lt;form (ngSubmite) = "onSubmit()" action = "http://localhost:5000" method = "post" enctype="multipart/form-data"&gt;  
      &lt;input type="file" name="file" /&gt;  
      &lt;input type = "submit" value="Upload"&gt;  
  &lt;/form&gt;  
  </code></pre>
  
  <p>
        <strong>Here's my component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
  })
  
  
  export class UploadComponent implements OnInit {
  
  submitted = false;
  
  constructor() { }
  
  onSubmit(){
  this.submitted = true;
  
  }
  
  ngOnInit() {
  }
  
  }
  </code></pre>
  
  <p><strong>here's my flask server</strong></p>
  
  <pre><code>app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
  @app.route('/upload' , method = ['GET' ,'POST'])
  def upload_File():
  
  if request.method == 'POST':
      #check if the psot request has the file part
      if 'file' not in request.files:
          flash('No file part')
          return redirect(request.url)
      file = request.files['file']
      #if the user does not select file , browser alsos 
      #submite an empty part without filename
      if file.filename == ' ':
          flash('No selected file')
  
       filename = secure_filename(file.filename)
       file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
       #return render_template('success.html', name = filename) 
      return redirect(request.url)
     return 'File Uploaded'
  </code></pre>