PacemUploadElement
is the suggested webcomponent for file uploads.
It is now FileSystem API-empowered and capable of being also evaluated either as a
FileSystemDirectoryHandle
or as multipleFileSystemFileHandle
s.
The select-mode
attribute defaults to file
, but can be configrued to multiple
, directory
, file-picker
, multiple-picker
, directory-picker
(the '-picker' suffix indicates the use of the FileSystem API).
Directory or multiple files wont' be automatically uploaded, even if an upload url will be provided.
<!-- directory selector via FileSystem API -->
<pacem-upload select-mode="directory-picker"><pacem-upload>
The PacemUploadElement
can be included in an autogenerating form using the proper metadata.
In the following example, the url
attribute for a chunked upload is provided via the extra's uploadUrl
property.
It is important to say that the provided endpoint on the server-side is expected to obey an optionated schema, moreover the
resulting value is the string
yielded by the endpoint when the upload process comes to completion.
{ "display": { "cssClass": ["form-minimal"] }, "props": [ { "prop": "file", "display": { "name": "File (upload)", "cssClass": ["upload-std"] }, "type": "file", "dataType": "upload", "commands": [{ "icon": "preview", "name": "preview", "dependsOnValue": true, "tooltip": "preview" }], "validators": [ { "type": "binary", "errorMessage": "Invalid file: must be a pdf, doc or an image not exceeding 1MB", "params": { "pattern": "\.(pdf|docx?|xlsx?|jpe?g|png)$", "maxSize": 1048576 } } ] } ]}
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.