Ant Design Blazor
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.
Click to upload user's avatar, and validate size and format of picture with beforeUpload.
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
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.
If uploaded file is a picture, the thumbnail can be shown. IE8/9 do not support local thumbnail show. Please use thumbUrl instead.
You can use the native InputFile component to upload as file stream. The Upload component only display the FileList.
Use defaultFileList for uploaded files when page init.
You can gain full control over filelist by configuring fileList. 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.
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.
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.
Antiforgery verification is enabled on the server. How to add AntiForgeryToken to the uploaded request?
The Upload component automatically looks for the ' ', if it is used in a static form, you do not need to do anything.
If you are using the Blazor Server, you need to add the '
If the AntiForgeryToken is obtained through Ajax, add it to the upload request using the Data or Headers parameter.