logo

Upload

Upload file by selecting or dragging.

When To Use

Uploading is the process of 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.

Examples

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

expand code expand code

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

expand code expand code

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

expand code expand code

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 multiple attribute.

expand code expand code

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

expand code expand code

You can use the native InputFile component to upload as file stream. The Upload component only display the FileList.

expand code expand code

Use defaultFileList for uploaded files when page init.

expand code expand code

You can gain full control over filelist by configuring fileList. 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 code expand code

You can select and upload a whole directory. he thumbnail can be shown. IE8/9 do not support local thumbnail show. Please use thumbUrl instead.

expand code expand code

Upload API#

Property Description Type Default Value
BeforeUpload ParameterFunction which will be executed before uploading each file. Uploading will be stopped if false is returned. Warning:This function is not supported in IE9. Func<UploadFileItem, Boolean> --
BeforeAllUploadAsync ParameterHook function which will be executed before starting the overall upload. Uploading will be stopped if false is returned. Warning:This function is not supported in IE9. Func<List<UploadFileItem>, Task<Boolean>> --
BeforeAllUpload ParameterHook function which will be executed before starting the overall upload. Uploading will be stopped if false is returned. Warning:This function is not supported in IE9. Func<List<UploadFileItem>, Boolean> --
Name ParameterThe name of uploading file String --
Action ParameterUploading URL String --
Disabled ParameterDisable upload button Boolean false
Data ParameterAdditional data to be uploaded with the files Dictionary<String, Object> --
ListType ParameterBuilt-in stylesheets, support for three types: text, picture or picture-card String text
Directory ParameterSupport upload whole directory. See Can I Use for browser support Boolean --
Multiple ParameterWhether to support selected multiple file. IE10+ supported. When set to true, will allow selecting multiple files with holding down Ctrl key Boolean --
Accept ParameterFile types that can be accepted. See input's accept attribute String --
ShowUploadList ParameterShow the list of files uploading or not Boolean true
ShowDownloadIcon ParameterList of files that have been uploaded (controlled) Boolean --
ShowPreviewIcon ParameterShow the preview icon or not Boolean --
ShowRemoveIcon ParameterShow the remove icon or not Boolean --
FileList ParameterGet or set the list of files that have been uploaded List<UploadFileItem> --
Locale ParameterLocale for UI text UploadLocale --
FileListChanged ParameterEvent callback executed when the files list changes EventCallback<List<UploadFileItem>> --
DefaultFileList ParameterDefault list of files that have been uploaded. List<UploadFileItem> --
Headers ParameterSet request headers, valid above IE10. Dictionary<String, String> --
OnSingleCompleted ParameterA callback function, will be executed when a single file upload has succeeded or failed EventCallback<UploadInfo> --
OnCompleted ParameterA callback function, will be executed when all uploads have succeeded or failed EventCallback<UploadInfo> --
OnChange ParameterA callback function, can be executed when uploading state has changed for any reason. The function will be called when uploading is in progress, completed or failed. EventCallback<UploadInfo> --
OnRemove ParameterA callback function executed when the remove file button is clicked. When true is returned, file will be removed and AntDesign.Upload.FileListChanged will be executed. When false is returned, the removal will be cancelled. Func<UploadFileItem, Task<Boolean>> --
OnPreview ParameterA callback function, will be executed when file link or preview icon is clicked EventCallback<UploadFileItem> --
OnDownload ParameterCallback executed when file name link is clicked in upload list. EventCallback<UploadFileItem> --
ChildContent ParameterContent of the upload button RenderFragment --
ShowButton ParameterWhether to show the upload button or not. Boolean --
Drag ParameterWhether to allow drag and drop of files or not. Boolean --
Method ParameterHTTP method of upload request String post
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

UploadInfo API#

Property Description Type Default Value
File The file for the current operation UploadFileItem --
FileList The current list of files List<UploadFileItem> --

UploadFileItem API#

Property Description Type Default Value
Id GUID to identify the file String --
FileName The file name String --
Percent Percentage uploaded Int32 --
ObjectURL Object URL for the file String --
Url URL for the actual file String --
Response Response from the server String --
State State of the upload UploadState --
Size Size of the file Int64 --
Ext Extension for the file String --
Type Type of file String --
ImageExtensions File extensions that are considered images String[] --
Method Signature Return Type Description
GetResponse(JsonSerializerOptions options) TResponseModel
IsPicture() Boolean Check if the file is a picture. See AntDesign.UploadFileItem.ImageExtensions for the extensions which will cause this to return true.

FAQs

How to implement upload server side?

Can I use FileStream?

FileStream is not implemented in this component, if you pursue uploading on the Server Side and omit WebAPI, you can try to use the official InputFile component (and beautify it with Antd's style)

I want to display download links.

Please set property url of each item in fileList to control content of link.

TreeSelect Avatar
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.