can't upload file after appending it to FormData in angular

Question

I'm trying to send file in post request to my backend , it response with status 500 cuz there is no file in the request --> after checking out it seems that my formData is empty and doesn't contain any file .

this is my function :

  createProductsByCsv(): void {
const self = this;
  const setting: any = {
    title: '<h5>Add Products By CSV file</h5>',
    html:
      '<div class="form-group row">\n' +
      '   <label class="col-sm-4 col-form-label">File</label>\n' +
      '       <div class="col-sm-8">\n' + '<input type="file" accept=".csv" name="csv-file" id="csv-file" class="form-control datepicker" placeholder="chose csv file">' +
      '       </div>\n' +
      '</div>',
    confirmButtonText: 'add the file',
    focusConfirm: false,
    showLoaderOnConfirm: true
  };

  setting.preConfirm = (text) => {
    var file = $('#csv-file').prop('files')[0];
    // console.log(file);

    var formData = new FormData();
    formData.append('file', file, file.name);
    console.log(formData);

    if(((file.name.split(".").length -1) > 1) && (file.name.endswith('.csv'))) 
      return self.sweetAlert.error({title: 'Error', text: "Upload only files that ends with .csv and containe single dot otherwise it will be ignored !"});
    else 
    return self.httpApi.post('/catalog/product/filetest',formData).toPromise()
      .then(resp => {
        if (resp.status == 200) {
          self.sweetAlert.success({title: 'Success', text: JSON.stringify(resp.message )});
        } else {
          self.sweetAlert.error({title: 'Error', text: JSON.stringify(resp.message )});
        }
      })
      .catch(msg => console.log('ERROR' + msg.message + ' ' + msg.message));
  };
  swal.queue([setting]); }

am i doing something wrong ?

Answer 1

Try like this:

.html

<input #fileInput type="file" accept=".csv" name="csv-file" id="csv-file" class="form-control datepicker" placeholder="chose csv file">

<button  (click)="saveFile(fileInput)">Upload</button>

.ts

 saveFile(fileInput) {
    let fi = fileInput;

    if (fi.files && fi.files[0]) {
      let fileToUpload = fi.files[0];

      let formData: FormData = new FormData();
      formData.append("file", fileToUpload);

      console.log(formData);
      ...
      // http call
    }
  }

Answer 2

I just tested this code and it works fine when posting a file to laravel backend.

I think your problem is in the backend not in the frontend please check your backend Controller/Middleware function if it accepts ' multipart/form-data '

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  @ViewChild('fileInput', {static: true}) fileInput: ElementRef;

  constructor(
      private httpclient: HttpClient
  ) {}

  ngOnInit(): void {
  }

  testUpload() {
    if (!this.fileInput.nativeElement.files.length) {
      console.log('there is no file to upload');
      return;
    }
    const data = new FormData();
    data.append('testFile', this.fileInput.nativeElement.files[0], this.fileInput.nativeElement.files[0].name);

    this.httpclient.post('http://localhost:8000/api/upload/test', data).subscribe((res: Response) => {
      console.log(res);
    });
  }
}