Upload

Upload file by selecting or dragging.

When To Use#

Uploading is publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.

  • When you need to upload one or more files.
  • When you need to show the process of uploading.
  • When you need to upload files by dragging and dropping.
import { NzUploadModule } from 'ng-zorro-antd/upload';

Examples

Upload by clicking

Classic mode. File selection dialog pops up when upload button is clicked.

expand codeexpand code
      Loading...
xxx.png
yyy.png
zzz.png
Default Files

Use nzFileList for uploaded files when page init.

expand codeexpand code
      Loading...
xxx.png
Complete control over file list

You can gain full control over filelist by configuring nzFileList. You can accomplish all kinds of customed functions. The following shows two circumstances:

  1. limit the number of uploaded files.

  2. read from response and show file link.

expand codeexpand code
      Loading...
Upload directory

You can select and upload a whole directory.

expand codeexpand code
      Loading...
xxx.png xxx.png
yyy.png


xxx.png xxx.png
yyy.png
Pictures with list style

If uploaded file is a picture, the thumbnail can be shown. IE8/9 do not support local thumbnail show. Please use thumbUrl instead.

expand codeexpand code
      Loading...
Transform file before request

Use nzTransformFile for transform file before request such as add a watermark.

expand codeexpand code
      Loading...
Upload
Avatar

Click to upload user's avatar, and validate size and format of picture with nzBeforeUpload.

The return value of function nzBeforeUpload can be a Observable to check asynchronously.

expand codeexpand code
      Loading...
image.png image.png
image.png image.png
image.png image.png
image.png image.png
Uploading...
image.png
image.png
Upload
Pictures Wall

After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.

expand codeexpand code
      Loading...

Click or drag file to this area to upload

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

Drag and Drop

You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.

We can upload serveral files at once in modern browsers by giving the input the nzMultiple attribute.

expand codeexpand code
      Loading...


Upload manually

Upload files manually after nzBeforeUpload returns false.

expand codeexpand code
      Loading...
Customize preview file

Customize local preview. Can handle with non-image format files such as video.

expand codeexpand code
      Loading...
Photos:
Aliyun OSS

Use Aliyun OSS upload example.

expand codeexpand code
      Loading...

API#

You can consult jQuery-File-Upload about how to implement server-side upload interface.

nz-upload#

PropertyDescriptionTypeDefault
[nzAccept]File types that can be accepted. See input accept Attributestring-
[nzAction]Required. Uploading URLstring | ((file: NzUploadFile) => string | Observable<string>)-
[nzDirectory]support uploading the whole directory (caniuse)booleanfalse
[nzBeforeUpload]Hook function, which will be executed before uploading. Uploading will be stopped with false or an Observable. Warning： this function is not supported in IE9. NOTICE: Must use => to define the method.(file: NzUploadFile, fileList: NzUploadFile[]) => boolean | Observable<boolean>-
[nzCustomRequest]Override for the default XHR behavior allowing for additional customization and the ability to implement your own XMLHttpRequest. NOTICE: Must use => to define the method.(item) => Subscription-
[nzData]Uploading params or function which can return uploading params. NOTICE: Must use => to define the method.Object | ((file: NzUploadFile) => Object | Observable<{}>)-
[nzDisabled]disable upload buttonbooleanfalse
[nzFileList]List of files, two-way data-bindingNzUploadFile[]-
[nzLimit]limit single upload count when nzMultiple has opened. 0 unlimitednumber0
[nzSize]limit file size (KB). 0 unlimitednumber0
[nzFileType]limit file type, e.g: image/png,image/jpeg,image/gif,image/bmpstring-
[nzFilter]Custom filter when choosed fileUploadFilter[]-
[nzHeaders]Set request headers, valid above IE10. NOTICE: Must use => to define the method.Object | ((file: NzUploadFile) => Object | Observable<{}>)-
[nzListType]Built-in stylesheets, support for three types: text, picture or picture-card'text' | 'picture' | 'picture-card''text'
[nzMultiple]Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be truebooleanfalse
[nzName]The name of the uploading filestring'file'
[nzShowUploadList]Whether to show the default upload list, could be an object to specify showPreviewIcon, showRemoveIcon and showDownloadIcon individuallyboolean | { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }true
[nzShowButton]Show upload buttonbooleantrue
[nzWithCredentials]ajax upload with cookie sentbooleanfalse
[nzOpenFileDialogOnClick]click open file dialogbooleantrue
[nzPreview]A callback function will be executed when the file link or preview icon is clicked. NOTICE: Must use => to define the method.(file: NzUploadFile) => void-
[nzPreviewFile]Customize preview file logic. NOTICE: Must use => to define the method.(file: NzUploadFile) => Observable<dataURL: string>-
[nzPreviewIsImage]Customize the preview file is an image, generally used when the image URL is in a non-standard format. NOTICE: Must use => to define the method.(file: NzUploadFile) => boolean-
[nzRemove]A callback function will be executed when the removing file button is clicked, remove event will be prevented when the return value is false or an Observable. NOTICE: Must use => to define the method.(file: NzUploadFile) => boolean | Observable<boolean>-
(nzChange)A callback function, can be executed when uploading state is changingEventEmitter<NzUploadChangeParam>-
[nzDownload]Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB.(file: NzUploadFile) => voidJump to new TAB
[nzTransformFile]Customize transform file before request(file: NzUploadFile) => NzUploadTransformFileType-
[nzIconRender]Custom show iconTemplateRef<{ $implicit: NzUploadFile }>-
[nzFileListRender]Custom file listTemplateRef<{ $implicit: NzUploadFile[] }>-

nzChange#

The function will be called when uploading is in progress, completed or failed

When uploading state changes, it returns:

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

  1. file File object for the current operation.

    {
   uid: 'uid',      // unique identifier
   name: 'xx.png'   // file name
   status: 'done', // options：uploading, done, error, removed
   response: '{"status": "success"}', // response from server
   linkProps: '{"download": "image"}', // additional html props of file link
}

  2. fileList current list of files

  3. event response from server, including uploading progress, supported by advanced browsers.

nzCustomRequest#

Allows for advanced customization by overriding default behavior in HttpClient. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk package.

nzCustomRequest callback is passed an object with:

  • onProgress: (event: { percent: number }): void
  • onError: (event: Error): void
  • onSuccess: (body: Object, xhr?: Object): void
  • data: Object
  • filename: String
  • file: File
  • withCredentials: Boolean
  • action: String
  • headers: Object