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
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 |
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 |
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?
- You can consult Asp.Net Core WebAPI or jQuery-File-Upload about how to implement server side upload interface.
- There is a mock example of express in rc-upload.
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.