Angular 7 - Upload file to server

Question

I´m trying to send input file to server. When input file has data return in console this

 FileList {0: File, length: 1}0: File {name: "8mn4p369li331.png", lastModified: 1567609045831, lastModifiedDate: Wed Sep 04 2019 16:57:25 GMT+0200 (hora de verano de Europa central), webkitRelativePath: "", size: 9587062, …}length: 1__proto__: FileList

I try to put this in formData element like this but doesn´t work

  save(form: NgForm) {
       const formData: FormData = new FormData();
       formData.append('file', this.selectedFiles, this.fileName)
       form.value["file"] = formData;
}

So: What´s is the right way to upload file (in a form) to the server?

UPDATE: onChange function

  fileEvent(event:any){
    this.selectedFiles = event.target.files;
    this.fileName = this.selectedFiles[0].name;
    console.log(this.selectedFiles);

}

You updated your comment, but what is the conclusion? Perhaps you should create a minimal setup? — ak.leimrey
– ak.leimrey, Commented Oct 18, 2019 at 11:52
see this link that is complete :stackoverflow.com/questions/57497240/… — Abolfazl Roshanzamir
– Abolfazl Roshanzamir, Commented Oct 18, 2019 at 11:57

Carsten · Accepted Answer · 2019-10-18 11:41:45Z

0

Provided you have the right file:

let formdata = new FormData();
formdata.set('file', file, "fileName");

I believe you can only set one file per variable...

Edit: My file variable is a Blob...

Blob {size: 3151, type: "application/pdf"}

edited Oct 18, 2019 at 11:41

answered Oct 18, 2019 at 11:39

Carsten

4,22826 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

El Hombre Sin Nombre Over a year ago

Failed to execute 'set' on 'FormData': parameter 2 is not of type 'Blob'. The parametmer 2 is this.selectedFiles[0].name;

Carsten Over a year ago

Do you need help with getting a blob?

Michael Ashefor · Accepted Answer · 2019-10-18 13:06:08Z

0

your save function should be

save(form: NgForm) {
   const formData: FormData = new FormData();
   formData.append('file', this.selectedFiles[0], this.fileName)
   form.value["file"] = formData;
}

answered Oct 18, 2019 at 13:06

Michael Ashefor

14413 bronze badges

3 Comments

El Hombre Sin Nombre Over a year ago

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

Michael Ashefor Over a year ago

second parameter should be this.selectedFiles.files[0]

El Hombre Sin Nombre Over a year ago

formData.set('file', this.selectedFiles, this.fileName); form.value["file"] = formData.get("file"); Works

Collectives™ on Stack Overflow

Angular 7 - Upload file to server

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related