Uploading a file to a web api

[georgipeltekov]

Uploading a file to a web api

[georgipeltekov]

Hi,

can you try with
input.append("file", file.fileEntry);

[aaronjohnsonwsu]

I had tried that as well but still no luck. Here is what my web api method looks like:

The byte array is only 18 in length which does not seem correct.

That is with the code change that you recommended:

  public uploadFile(file: UploadFile): Observable<string> {
    const endpoint = 'uploadfile';
    const url = this.uri + endpoint;

    let input = new FormData();
    input.append("file", file.fileEntry);

    return this.http.post(url, input).map(res => res.json());
  }

I was able to get the file upload working with a different route which uploaded a type "File" like this:

  public uploadFile(file: File){
    let formData: FormData = new FormData();
    formData.append('file', file, file.name); 
    this.http.post(this.apiUrl, formData);
  }

With that being said I really like how your drag and drop works but I just can't figure out what to change. Is there anything else you can think of?

[georgipeltekov]

Hi,

can you try with:

file.fileEntry.file(info => {
uploadFile(info);
});
(please check that the uploadFile is called after the file info is taken)
where uploadFile is:
public uploadFile(file: File){
let formData: FormData = new FormData();
formData.append('file', file, file.name);
this.http.post(this.apiUrl, formData);
}

[aaronjohnsonwsu]

That worked! Thank you so much for your help. Here is what my code looks like:

Method in Service:

  public uploadFile(file: File): Observable<string> {
    const endpoint = 'uploadfile';
    const url = this.uri + endpoint;

    let input = new FormData();
    input.append("file", file, file.name);

    return this.http.post(url, input).map(res => res.json());
  }

Dropped method (event) in the component:

  public dropped(event: UploadEvent) {
    this.files = event.files;
    for (var file of event.files) {
      file.fileEntry.file(info => {    
        this.vtootService.uploadFile(info).subscribe(res => {
          console.log(res);
        });
      });
    }
  }

Thanks again!