Upload file widget by select or drag.


  • Must set resReName to get correct data

  • multiple determine return array or one element

  • If enum or asyncData is set, it will be converted to fileList (nzFileList), and must initially guarantee a response property to indicate remote data and make sure resReName can be obtained correctly

  • Image preview: by default, it uses nzModal to show url or thumbUrl of file object


Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFSchema, SFUploadWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

  selector: 'form-upload-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
export class FormUploadSimpleComponent {
  schema: SFSchema = {
    properties: {
      file: {
        type: 'string',
        title: '单个文件',
        enum: [
            uid: -1,
            name: 'xxx.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            response: {
              resource_id: 1,
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url',
        } as SFUploadWidgetSchema,
      mulit: {
        type: 'string',
        title: '多个文件',
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url',
          multiple: true,
        } as SFUploadWidgetSchema,
      // 拖动模式
      drag: {
        type: 'string',
        title: 'Drag',
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url',
          type: 'drag',
        } as SFUploadWidgetSchema,

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {



[readOnly]Read onlyboolean-


[asyncData]Asynchronous data source() => Observable<SFSchemaEnumType[]>-
[type]Upload typeselect,dragselect
[text]Text of buttonstring点击上传
[hint]Text of hint, it is valid during dragstring支持单个或批量,严禁上传公司数据或其他安全文件
[resReName]Rename return parameter, support nested style a.b.c, the whole return body will be used if it is not setstring-
[urlReName]Rename image preview URl return parameter, support nested style a.b.c, url, thumbUrl of file object will be used if it is not setstring-
[action]Required attribute, upload URLstring, ((file: UploadFile) => string, Observable<string>)-
[accept]File types that can be accepted, see details from input accept Attributestring, string[]-
[limit]limit number of single upload when multiple is set, 0 means unlimitednumber0
[filter]Custom filter when choosed fileUploadFilter[]-
[fileList]File listUploadFile[]-
[fileSize]Limit file size, unit: KB; 0 means unlimitednumber0
[fileType]Limit file type, e.g. image/png,image/jpeg,image/gif,image/bmpstring-
[headers]Set request header of uploadObject, (file: UploadFile) => {} | Observable<{}>-
[listType]Built-in style of upload listtext,picture,picture-cardtext
[showUploadList]Whether show upload list, can set as an object, used to set showPreviewIcon and showRemoveIcon separatelybooleantrue
[multiple]Whether support multiple file selection. IE10+ supported. You can select multiple files with holding ctrlbooleanfalse
[name]File name when sending to backendstringfile
[data]Uploading params or function which can return uploading paramsObject, (file: UploadFile) => {} | Observable<{}>-
[withCredentials]Whether set cookie during uploadbooleanfalse
[directory]Support upload whole directory (caniuse)booleanfalse
[openFileDialogOnClick]Click to open file dialogbooleantrue
[beforeUpload]Hook function which will be executed before uploading, parameter is file to be uploaded, stop uploading when false is returned(file: UploadFile, fileList: UploadFile[]) => boolean|Observable<boolean>-
[customRequest]Override the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest(item: UploadXHRArgs) => Subscription-
[remove]Callback function when remove is clicked, won't remove when false is returned(file: UploadFile) => boolean|Observable-
[preview]Callback function when file link or preview icon is clicked(file: UploadFile) => void-
[previewFile]Customize preview file logic(file: UploadFile) => Observable<string>-
[download]Callback function when clicking the method to download the file, jump to a new tab with url of file(file: UploadFile) => void-
[transformFile]Transform file before file conversion. Support to return Observable object(file: UploadFile) => UploadTransformFileType-
[change]Callback function when uploading state is changing(args: UploadChangeParam) => void-