Upload Component: Feature Details, Direct Cloud Upload, Events and Methods Demo Examples
Category: ExamplesThe upload component supports batch uploading in multiple formats with direct cloud transmission, including Amazon S3, Cloud Storage, Azure Blob Storage, OSS, COS, Kodo, UPYUN and more.
File Extensions
The limit attribute can set file restrictions, where limit.suffix specifies allowed file extensions; multiple extensions can be separated by commas (,).
Single File Size
The limit attribute can set file restrictions, where limit.size specifies the maximum size (in bytes) for a single file upload, with unit M.
Manual Upload
By default, files upload automatically upon selection. To queue all files first and upload together later, set manual.
Batch Add/Remove
The module only requires a single select button by default. To show bulk upload and clear buttons, use uploadBtn and clearBtn.
Typically used in manual upload scenarios.
Status Bar Display
The status bar has two parts: file restriction info and upload statistics, controlled by the status attribute:
Form Submission
If the component needs to be part of a form, set the name attribute so the internal hidden fields can be submitted with the form.
Current Values
You can access component properties like native HTML elements including name, value and disabled.
Initial Display
The value attribute can initialize displayed files, but these initialized files should already exist on the server as real files. Based on the fundamental principle of type=file controls, only manually selected disk files can be uploaded. Therefore, initialized files won't be uploaded - they're only for display.
Another method for initial display is to directly write file addresses in the target node, separated by commas (,).
Operation Methods
Built-in common methods include reset(), clear(), and set(data), along with input-specific blur and focus methods. Based on these methods, the component provides corresponding listener events.
Using Cache
When modifying element properties or values, if you need to cache data to restore previous properties and values when reloading the page, use the stor-name attribute. However, ensure this attribute value is unique in the browser cache.
Event Listening
Supports using addEventListener to subscribe to input, change, focus and blur events. The on+event syntax is also supported.
Since passing parameters with addEventListener is cumbersome, an additional set of listener events is provided.