Agular2 + typescript + file upload

Question

I am creating an angular2 project, in which my requirement is to upload a file and send some parameters from client to server(Spring Rest Server). I have tried Formdata Interface, but when i am appending a file(File Object created from event.srcElement.files) to it and then logging the object to console it prints an empty formdata object. As for the server side i am using @requestparam("file") to fetch the file. It would be great if anyone can provide some help on this.

this is the code in my html file

<input type="file" #uploadFile multiple="true" (change)="uploadFile($event)"/>

component file is like this

  uploadFile(event:any){
    let file = event.target.files[0];
    let fileName = file.name;
    console.log(file)
    console.log(fileName)
    let formData = new FormData();
    formData.append('file',file);
    this.examService.uploadAnswer(formData);
}

and in service file

uploadAnswer(formData:FormData){  
            console.log(formData)
            this.http.post(this.url+'/uploadanswer', formData)
            .map((response: Response) => {
                let res = response.json();
            Object.keys(res).forEach(name =>
                this.questions=res[name]
            );
            });

File is still missing on console? Can you inspect the request in network tab? — Malik Shahzad
– Malik Shahzad, Commented Aug 4, 2017 at 9:55

Malik Shahzad · Accepted Answer · 2017-08-03 18:57:39Z

8

Your HTML should be:

<input id="file-field" name="file-field" (change)="uploadFile($event)" type="file" accept=".png,.jpg,.jpeg">

So you will get file in component as:

uploadFile(event) {
  let files = event.target.files;
  if (files.length > 0) {
    console.log(file); // You will see the file
    this.service.uploadFile(file);
  }
}

And in service:

uploadFile(file) {
  let formData: FormData = new FormData();
  formData.append('file', file, file.name);

  this.http.post(url, formData, request_options)
}

Then you will get file in with file key in request data.

answered Aug 3, 2017 at 18:57

Malik Shahzad

6,9893 gold badges39 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Agular2 + typescript + file upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related