From 65f4e21d11690d372ef0252d8f0ece13294a0bca Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 19 Nov 2020 12:03:58 +0100
Subject: [PATCH] Allow sile-sink to be build for packaging to npmjs.com and
add more documentation and examples (#36)
---
packages/file-handling/.gitignore | 1 +
packages/file-handling/.npmignore | 1 +
packages/file-handling/README.md | 42 +++++++++++++++++++++++--
packages/file-handling/package.json | 2 +-
packages/file-handling/rollup.config.js | 2 +-
packages/file-handling/src/demo.js | 4 +++
6 files changed, 48 insertions(+), 4 deletions(-)
diff --git a/packages/file-handling/.gitignore b/packages/file-handling/.gitignore
index e62f92aa..fa695126 100644
--- a/packages/file-handling/.gitignore
+++ b/packages/file-handling/.gitignore
@@ -3,3 +3,4 @@ node_modules
.idea
npm-debug.log
package-lock.json
+index.html
diff --git a/packages/file-handling/.npmignore b/packages/file-handling/.npmignore
index e8200d46..bd8138ce 100644
--- a/packages/file-handling/.npmignore
+++ b/packages/file-handling/.npmignore
@@ -2,3 +2,4 @@ node_modules
.idea
npm-debug.log
package-lock.json
+index.html
diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md
index d6e596cf..4bbc3b8d 100644
--- a/packages/file-handling/README.md
+++ b/packages/file-handling/README.md
@@ -1,5 +1,42 @@
# File handling web components
+You can install these components via npm:
+
+```bash
+npm i @dbp-toolkit/file-handling
+```
+
+After you have installed the file handling components via npm you can use this example to get a button
+that opens the file source dialog. After you have selected a file you will see it in your browser log,
+and the file sink dialog will open, so you are able to store the file again.
+
+```html
+<button onclick="openFilePicker()">Open file picker</button>
+<dbp-file-source lang="en"></dbp-file-source>
+<dbp-file-sink lang="en"></dbp-file-sink>
+
+<script>
+ const fileSource = document.querySelector("dbp-file-source");
+ const fileSink = document.querySelector("dbp-file-sink");
+
+ // Listen to the event from file source
+ fileSource.addEventListener("dbp-file-source-file-selected", (ev) => {
+ const file = ev.detail.file;
+ console.log("File selected: ", file)
+
+ // This will open the file sink dialog
+ fileSink.files = [file];
+ });
+
+ function openFilePicker() {
+ // This will open the file source dialog
+ fileSource.setAttribute("dialog-open", "");
+ }
+</script>
+<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-source.js"></script>
+<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-sink.js"></script>
+```
+
## FileSource
This web component allows the selection of local files via file dialog or drag and drop and to select and download
@@ -34,8 +71,8 @@ files from a [Nextcloud](https://nextcloud.com/) instance.
- `nextcloud-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>`
- `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
-- `dialog-open` (optional): if this attribute is set the dialog for selecting local or Nextcloud files will open
- - example `<dbp-file-source dialog-open></dbp-file-source>`
+- `dialog-open` (optional): if this attribute is set at runtime the dialog for selecting local or Nextcloud files will open
+ - example `document.querySelector("dbp-file-source").setAttribute("dialog-open", "")`
- `text` (optional): the text that is shown above the button to select files
- example `<dbp-file-source text="Please select some files"></dbp-file-source>`
- `button-label` (optional): the text that is shown on the button to select files
@@ -84,6 +121,7 @@ files to a [Nextcloud](https://nextcloud.com/) instance.
- `files`: an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which should be downloaded in the dialog
- if the property is set the dialog opens
+ - example: `document.querySelector("dbp-file-sink").files = [file]` where `file` is your File object
## Local development
diff --git a/packages/file-handling/package.json b/packages/file-handling/package.json
index a11747b5..f3352b0d 100644
--- a/packages/file-handling/package.json
+++ b/packages/file-handling/package.json
@@ -1,6 +1,6 @@
{
"name": "@dbp-toolkit/file-handling",
- "version": "0.1.1",
+ "version": "0.1.4",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"devDependencies": {
diff --git a/packages/file-handling/rollup.config.js b/packages/file-handling/rollup.config.js
index 9c723876..ce5ea958 100644
--- a/packages/file-handling/rollup.config.js
+++ b/packages/file-handling/rollup.config.js
@@ -18,7 +18,7 @@ let nextcloudFileURL = nextcloudBaseURL + '/apps/files/?dir=';
export default (async () => {
return {
- input: (build !== 'test') ? ['src/demo.js', 'src/dbp-file-source.js'] : glob.sync('test/**/*.js'),
+ input: (build !== 'test') ? ['src/demo.js', 'src/dbp-file-source.js', 'src/dbp-file-sink.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
diff --git a/packages/file-handling/src/demo.js b/packages/file-handling/src/demo.js
index 9ab2e412..ba02bb01 100644
--- a/packages/file-handling/src/demo.js
+++ b/packages/file-handling/src/demo.js
@@ -3,6 +3,7 @@ import {html, LitElement} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {FileSource} from './file-source.js';
+import {FileSink} from './file-sink.js';
import * as commonUtils from '@dbp-toolkit/common/utils';
export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
@@ -15,6 +16,7 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return {
'dbp-file-source': FileSource,
+ 'dbp-file-sink': FileSink,
};
}
@@ -95,6 +97,8 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
<p>Text and images (JPG, PNG, GIF, TIF, ...) :</p>
<dbp-file-source lang="en" url="${this.url}" allowed-mime-types="text/plain,image/*"
text="Abgabe für Text und Bilder "></dbp-file-source>
+
+ <dbp-file-sink lang="en"></dbp-file-sink>
</div>
</section>
`;
--
GitLab