Angular4 - FormData object is empty

Question

Trying to send FormData with file

<input type="file"(change)="showPreviewImage($event)">

showPreviewImage(event: any) {
    if (event.target.files && event.target.files[0]) {

        let fileList: FileList = event.target.files; 
        let file: File = fileList[0];
        const formData:FormData = new FormData();
        formData.append('photoUrl', file, file.name);
        formData.append('TEST','ujsgfsdf');
        console.log(formData);
       }
   }

Form data is empty. FormData { }

have you tried: `for (var key of formData.keys()) { console.log(key); }` to see if is truly empty because from your code it does not look that way. — Ric, Apr 20 '18 at 12:31
Can you set a breakpoint and edit the question to show what the event object is? — ye-olde-dev, Apr 20 '18 at 12:34
see here https://stackoverflow.com/questions/17066875/how-to-inspect-formdata your cant get data out from a FormData. BTW the FormData.append signature is ('name', value). If you append a file you dont have to specifiy the file name as a third parameter ( https://developer.mozilla.org/fr/docs/Web/API/FormData ) — Pierre Mallet, Apr 20 '18 at 12:37
@Serhio g. Lazin what's the o/p for `console.log(formData.getAll('photoUrl'));` — Vikas, Apr 20 '18 at 12:40
@Vikas File lastModified: 1524220031813 lastModifiedDate: Date 2018-04-20T10:27:11.813Z name: "smitt.jpg" size: 4784 type: "image/jpeg" webkitRelativePath: "" — Serhio g. Lazin, Apr 20 '18 at 12:42
you can see name,size and rest of the things on console that means formdata is populated. — Vikas, Apr 20 '18 at 12:47
@Serhiog.Lazin https://developer.mozilla.org/en-US/docs/Web/API/FormData/keys keys does exist https://jsbin.com/kubinehako/edit?js,console — Ric, Apr 20 '18 at 12:47
Have you tried to get file item by ``fileList.item(0)``? Check my answer about file upload in angular: https://stackoverflow.com/questions/47936183/angular-5-file-upload/47938117#47938117 — Gregor Doroschenko, Apr 20 '18 at 13:01

score 0 · Answer 1 · edited Jan 12 '19 at 06:18

0

You can try

formData.forEach((value, key) => {                                                                                                                             
   console.log("key (%s): value (%s)", key, value);                                                                                                           
})

edited Jan 12 '19 at 06:18

Prashant Pimpale

10,349
9
44
84

answered Jan 12 '19 at 06:16

jerryhsieh

11
1
3

score 0 · Answer 2 · answered Jan 12 '19 at 07:12

HTML

 <div>
  <input #fileUpload type="file" (click)="fileUpload.value = null" (change)="importFile($event)" style="display:none;" name="userimage">
  <img [src]="url">
 <div>
 <button mat-raised-button color="accent" (click)="fileUpload.click()">CHOOSE IMAGE</button>

TS

uploadFiles: File;
url = '';

importFile(event : any) {
  if(event.target.files && event.target.files[0]) { 
    var reader = new FileReader();
    reader.onload = (event:any) => {
      this.url = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
    this.uploadFiles = event.target.files[0];
  }
}

//now where you submit form in this function do this

 saveDetails(){
   if(this.uploadFiles != null){
      const formData = new FormData();
      formData.append('uploadFiles', this.uploadFiles, this.uploadFiles.name);
   }
 }

Angular4 - FormData object is empty

2 Answers2