title: Angular file Upload passing image as [object File]
body: <p>I've created a reactive form in Angular and trying to upload image through it. It is supposed to upload the image to a specific folder and return the imageUrl in the database. But instead of getting it as an <strong>url</strong>, the image is getting passed as <strong>[object File]</strong> in the database and no image is uploaded in the directive. Please have a look at my code below:</p>
  
  <p><strong>HTML CODE:</strong></p>
  
  <pre><code>&lt;div class="form-group form-row col-md-9"&gt;
          &lt;label&gt;Upload Image&lt;/label&gt; 
            &lt;input type="file" id="imagePath" (change)="onSelectedFile($event)" /&gt;
            &lt;div [innerHTML]="uploadError" class="error"&gt;&lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>Angular Component:</strong></p>
  
  <pre><code>createBlogForm: FormGroup;
    public imagePath: string;
    constructor(private blogpostService: BlogpostService, private _http: HttpClient, private formBuilder: FormBuilder) { }
  
    ngOnInit() {
      console.log("CreateBlogComponent onInIt called");
      this.createBlogForm = this.formBuilder.group({
        imagePath:['']
      }) 
  }
  
  onSelectedFile(event) {
    const file = event.target.files[0];
    this.createBlogForm.get('imagePath').setValue(file)
    console.log(file)
  }
  
  public createBlog(): any {
  
    const formData = new FormData();
  
    formData.append('imagePath', this.createBlogForm.get('imagePath').value); }
  
    this.blogpostService.createBlog(formData).subscribe(
  
      data =&gt; {
        console.log(data);
         setTimeout(() =&gt;{
           this.router.navigate(['blog', data.blogId]);
         }, 1000)
      },
  
      error =&gt; {
        console.log(error);
        this.router.navigate(['/']);
      })
  }
  </code></pre>
  
  <p><strong>Service code:</strong></p>
  
  <pre><code>public createBlog(formData): Observable&lt;any&gt; {
      console.log(formData.get('imagePath') )
  
      const params = new HttpParams()
          .set('imagePath', formData.get('imagePath'))
  
      let myResponse = this._http.post('http://localhost:4000/api/v1/blogs' + '/create?authToken=' + Cookie.get('authtoken'), params);
      return myResponse;
    }
  </code></pre>