## Binary Input `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 multiple `FileSystemFileHandle`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. ```html <!-- directory selector via FileSystem API --> <pacem-upload select-mode="directory-picker"><pacem-upload> ```
## Metadata 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.