Angular: Send remote file with Angular HTTP form-data

Question

A file is available at my server's endpoint http://xyz/file.

I want to send this file in Angular 6 via HTTP POST using multipart/form-data. Thanks to this related question, this is my approach:

    const filePath = 'http://xyz/file'
    const formData = new FormData();
    formData.append('file', filePath);

    this.http.post(endpoint, formData).subscribe(response => {
        console.log(response);
    });

The problem is, this doesn't seem to work if I specify a file path to the file's endpoint rather than the file itself. When trying this, I get an error in the console ERROR TypeError: "Argument 2 of FormData.append is not an object.".

How can I solve this? Can I somehow use the remote file for the POST? Or do I need to download the file first and then send it? How would I do that?

score 2 · Accepted Answer · answered Aug 23 '19 at 15:01

You can't send just link to a file. Formdata field expects to have the file content. You can do this in two steps

Create a function to download remote file into Blob
Send blob via Post request

fetch('https://some/file/here.png')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    var formData = new FormData();
    formData.append("file", blob);

    this.http.post(endpoint, formData).subscribe(response => {
        console.log(response);
    });

  });

Angular: Send remote file with Angular HTTP form-data

1 Answers1