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

limit the number of uploaded files.
read from response and show file link.

      Loading...

Upload directory

You can select and upload a whole directory.

      Loading...

xxx.png

yyy.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.

      Loading...

Transform file before request

The old nzTransformFile input has been deprecated.

Use nzBeforeUpload to transform file before requesting it, for example to add a watermark.

      Loading...

Upload png file only

nzBeforeUpload only prevent upload behavior when return false or Promise.reject() or an Observable throw an error.

      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.

      Loading...

image.png

Uploading...

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.

      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.

      Loading...

Upload manually

Upload files manually after nzBeforeUpload returns false.

      Loading...

Customize preview file

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

      Loading...

Photos:

Aliyun OSS

Use Aliyun OSS upload example.

      Loading...

API#

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

nz-uploadcomponent#

Property	Description	Type	Default
`[nzAccept]`	File types that can be accepted. See input accept Attribute	`string`	-
`[nzAction]`	Required. Uploading URL	`string \| ((file: NzUploadFile) => string \| Observable<string>)`	-
`[nzDirectory]`	support uploading the whole directory (caniuse)	`boolean`	`false`
`[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 button	`boolean`	`false`
`[nzFileList]`	List of files, two-way data-binding	`NzUploadFile[]`	-
`[nzLimit]`	limit single upload count when `nzMultiple` has opened. `0` unlimited	`number`	`0`
`[nzSize]`	limit file size (KB). `0` unlimited	`number`	`0`
`[nzFileType]`	limit file type, e.g: `image/png,image/jpeg,image/gif,image/bmp`	`string`	-
`[nzFilter]`	Custom filter when choose file	`UploadFilter[]`	-
`[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 true	`boolean`	`false`
`[nzName]`	The name of the uploading file	`string`	`'file'`
`[nzShowUploadList]`	Whether to show the default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually	`boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }`	`true`
`[nzShowButton]`	Show upload button	`boolean`	`true`
`[nzWithCredentials]`	ajax upload with cookie sent	`boolean`	`false`
`[nzOpenFileDialogOnClick]`	click open file dialog	`boolean`	`true`
`[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 changing	`EventEmitter<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) => void`	Jump to new TAB
~~`[nzTransformFile]`~~	~~Customize transform file before request~~	~~`(file: NzUploadFile) => NzUploadTransformFileType`~~	-
`[nzIconRender]`	Custom show icon	`TemplateRef<{ $implicit: NzUploadFile }>`	-
`[nzFileListRender]`	Custom file list	`TemplateRef<{ $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: { /* ... */ },
}

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
}

fileList current list of files
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