diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md index 823bde1e212e2375db0f93c3e44c17853058c9f3..6c6e3f4cc84caf7e9a6a0ce71eae9ddcc3a72b8a 100644 --- a/packages/file-handling/README.md +++ b/packages/file-handling/README.md @@ -240,6 +240,75 @@ This web component depends on: The `dbp-nextcloud-file-picker` component is currently used by the file sink, file source and clipboard components. There is a slot you can use to override to provide additional information. +### Usage + +```html +<dbp-nextcloud-file-picker></dbp-nextcloud-file-picker> +``` + +### Attributes +lang: {type: String}, +authUrl: {type: String, attribute: 'auth-url'}, +webDavUrl: {type: String, attribute: 'web-dav-url'}, +nextcloudFileURL: {type: String, attribute: 'nextcloud-file-url'}, +nextcloudName: {type: String, attribute: 'nextcloud-name'}, +authInfo: {type: String, attribute: 'auth-info'}, +directoryPath: {type: String, attribute: 'directory-path'}, +allowedMimeTypes: {type: String, attribute: 'allowed-mime-types'}, +directoriesOnly: {type: Boolean, attribute: 'directories-only'}, +maxSelectedItems: {type: Number, attribute: 'max-selected-items'} + +- `lang` (optional, default: `de`): set to `de` or `en` for German or English + - example `<dbp-file-source lang="de"></dbp-file-source>` +- `allowed-mime-types` (optional): if set accepts only files matching mime types + - example `<dbp-file-source allowed-mime-types='application/pdf'></dbp-file-source>` ... PDFs only + - example `<dbp-file-source allowed-mime-types='image/*'></dbp-file-source>` ... images (of all sub types) only + - example `<dbp-file-source allowed-mime-types='image/png,text/plain'></dbp-file-source>` ... PNGs or TXTs only + - example `<dbp-file-source allowed-mime-types='*/*'></dbp-file-source>` ... all file types (default) + +- `auth-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker + - example `<dbp-file-source auth-url="http://localhost:8081/index.php/apps/webapppassword"></dbp-file-source>` + - `web-dav-url` also needs to be set for the Nextcloud file picker to be active +- `web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker + - example `<dbp-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></dbp-file-source>` + - `auth-url` also needs to be set for the Nextcloud file picker to be active +- `nextcloud-file-url` (optional): Nextcloud File Url to use with the Nextcloud file picker + - example `<dbp-file-source nextcloud-file-url="http://localhost:8081/apps/files/?dir="></dbp-file-source>` +- `auth-info` (optional): Additional authentication information text that is shown in the Nextcloud file picker + - example `<dbp-file-source auth-info="You need special permissions for this function"></dbp-file-source>` +- `diectory-path` (optional): Allows you to set an specific initial path for your nextcloud, + if this path isn't found the path is set to default `\` + - example `<dbp-nextcloud-file-picker directory-path="\your-folder\your-subfolder"></dbp-nextcloud-file-picker>` +- `directories-only` (optional): A Boolean to specify if you want to select an directory or files + Use `directories-only` for fileupload, and without for file selecting + - example `<dbp-nextcloud-file-picker directories-only></dbp-nextcloud-file-picker>` +- `max-selected-items` (optional, default: `true`): A number to specify how many files can be selected, + set to true if you don't want to specify a number + - example `<dbp-nextcloud-file-picker max-selected-items="5"></dbp-nextcloud-file-picker>` + +### Outgoing Events + +#### `dbp-nextcloud-file-picker-number-files` + +This event is sent if one or more files are downloaded, the payload has the number of uploaded files. +**Payload**: `{"count": files.length}` + +#### `dbp-nextcloud-file-picker-file-downloaded` + +This event is sent if one file is downloaded, the payload has the file, filedata and the max number of uploaded files. +**Payload**: `{"file": file, "data": fileData, "maxUpload": maxUpload}` + +#### `dbp-nextcloud-file-picker-file-uploaded` + +Send the directory to filesink +**Payload**: `{path: path}` + +#### `dbp-nextcloud-file-picker-file-uploaded-finished` + +This event is sent if the file upload is finished +**Payload**: `{this.uploadCount}` + + ### Slots You use template tags to inject slots into the web component.