using nz-upload i.e (Using ant-design NG-Zorro) custom Request how to upload image

Question

I am using NG_ZORRO ant design for angular 6 application. I have created a component to upload an image using nz-upload. Now i want to use the custom request for uploading image that holds the action and request headers to upload the image.

Hi did you work this out ? I'm wanting to do something similar with Firebase storage — user3836415, Oct 08 '18 at 03:40
Yes I have worked out. I have created a custom control with similar functionality like zorro custom HTML tags and css along with Http request using HttpEventType and HttpResponse from '@angular/common/http' to show the upload progress in percentage — mpunit30, Oct 09 '18 at 06:35

score 10 · Accepted Answer · answered May 31 '19 at 09:59

This is a snippet from the code playground:

Before you begin, ensure that your HTTP request interceptors (if any) are not modifying the headers

TEMPLATE:

<nz-upload [nzCustomRequest]="customUploadReq" [nzHeaders] = "setMediaUploadHeaders" [nzName]="'file'">
</nz-upload>

TS File

/* nzUpload: Upload */
import { NzMessageService, UploadFile } from 'ng-zorro-antd';
import { BrowserModule, DomSanitizer } from '@angular/platform-browser'
/* nzUpload: Custom pre-upload checks */
import { /*Observable,*/ Observer } from 'rxjs'; 
/* nzUpload: Custom Upload request */
import { HttpRequest, HttpClient, HttpEventType, HttpEvent, HttpResponse } from '@angular/common/http';
import { UploadXHRArgs } from 'ng-zorro-antd';


  setMediaUploadHeaders = (file: UploadFile) => {
    return {
      "Content-Type": "multipart/form-data",
      "Accept": "application/json",
    }
  };
  customUploadReq = (item: UploadXHRArgs) => {
    const formData = new FormData();
    formData.append('file', item.file as any); // tslint:disable-next-line:no-any
    ///formData.append('id', '1000');
    const req = new HttpRequest('POST', item.action, formData, {
      reportProgress : true,
      withCredentials: false
    });
    // Always return a `Subscription` object, nz-upload will automatically unsubscribe at the appropriate time
   return this.http.request(req).subscribe((event: HttpEvent<{}>) => {
      if (event.type === HttpEventType.UploadProgress) {
        if (event.total > 0) {
          (event as any).percent = event.loaded / event.total * 100; // tslint:disable-next-line:no-any
        }
        // To process the upload progress bar, you must specify the `percent` attribute to indicate progress.
        item.onProgress(event, item.file);
      } else if (event instanceof HttpResponse) { /* success */
        item.onSuccess(event.body, item.file, event);
      }
    },(err) => { /* error */
      item.onError(err, item.file);
    });
  }

I was about to give up using this component, thanks a lot! – Jean Pacher May 30 '20 at 16:02 — Jean Pacher, May 30 '20 at 16:02

score 0 · Answer 2 · answered Mar 11 '22 at 09:58

Based on the example of Aliyun OSS which can be found here

You can define

 UploadData = {

    host: 'YOUR_URL',
    custom_field_1:"value"

  };

Then, you can retrieve fields

  getExtraData = (file: NzUploadFile): {} => {
    const { custom_field_1} = this.UploadData;

    return {
      custom_field_1
    };
  };

Make sure you change your directive

[nzAction]="UploadData.host"

using nz-upload i.e (Using ant-design NG-Zorro) custom Request how to upload image

2 Answers2