Upload
The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.
Properties
| Property | Description |
|---|---|
| Type | Set the type of upload component, including Button and Dropzone. |
| Text | The text shown on the upload component. |
| Selection types | Set the selection type to multiple files, single file, or directory. |
| File types | A list of file extensions allowed to upload. No value will permit all file types. |
| Append newly selected files | To set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory. |
| File list | To set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list. |
| Parse Value | Attempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option. |
| Loading | Whether the component should show a loading indicator. |
| Disabled | To set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}} |
| Tooltip | A tooltip displayed on the component when users hover over the component. |
| Required field | To set whether it is required. |
| Min size | To set the minimum file size allowed to be added. |
| Max size | To set the maximum file size allowed to be added. |
| Custom rule | To set the text displayed when verification fails. |
| Hide validation message | To set whether to display the validation message when verification fails. |
| Form Data Key | To set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form. |
| Hidden | To set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }} |
| Variant | To set the Button Upload component to Outline or Filled. |
| Theme color | To set the color of the Button Upload component. |
Method
You can use other components to control the Upload component. We support the following three methods:
| clearValidation | Used to clear the validation message |
|---|---|
| clearValue | Used to clear the selected |
| setDisabled | Used to set the upload component to disabled or enabled |
Event handler
To trigger actions when the selected files change
Data of Uploader
The upload component has some commonly used data, which can be called in the app.
value an array consisting of the base64 data of files.
files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.
Upload files to a cloud storage service
Upload a single file through an S3 resource
The configuration of action is as follows.
Upload object name
{{upload1.files.map(file =>file.name)[0]}}
Upload data
{{upload1.value[0]}}
Upload multiple files through an S3 resource
Upload object name list
{{upload1.files.map(file =>file.name)}}
Upload data list
{{upload1.value}}
Upload an image and display it on the image component Change the image source to the file base64 data of upload component. The base64 data is stored in the value attribute in array. And we should splice the file prefix with the file data. The code is as follows.
{{'data:image/jpeg;base64,'+upload1.value[0]}}
