How to read http response from ngx-uploader in Angular 2?

Question

I'm new to Angular, so maybe this question might seem trivial on some level.

I want to import an external file, so I need to create form with a file picker, and then send POST with this file as a multipart file to some endpoint.

I'm using ngx-uploader , and I'm able to send this POST with file data using component with implementation based on provided example. I understand that the POST request is made by this ngx-uploader based on emited event. How can I handle the response from this POST ? In the case of regular request I can subscribe to any of Http service's methods returning Observable, but I can't figure out how to read this response when using this Uploader?

Answer 1

You said that you've been able to send the POST request, I assumed that you've completed the onUploadOutput(output: UploadOutput): void function. In fact, you can handle the HTTP response from your backend right in this function. Interface UploadOutput is defined like this:

export interface UploadOutput {
  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll';
  file?: UploadFile;
  nativeFile?: File;
}

You can add a judgement statement to your function, when the upload process completed, you will get the response:

else if (output.type === 'done') {
  this.files.forEach(file => {
    console.log(file.response);
    this.response.emit(file.response);
  });
}

in this statement, you can see the response in your console, and pass it to the father component by emitting the eventEmitter.

Answer 2

When the upload is completed，no longer automatically invoke onUploadOutput ，that is else if (output.type === 'done') never be executed，what reason is this? I didn't see similar problems on Stack Overflow.

This is my code:

onUploadOutput(output: UploadOutput) : void {
    if (output.type === 'allAddedToQueue') {
        ....
    } else if(...){...
    } else if (output.type === 'done') {
        ....
    }
}