Update documentation, demos and complete FileUpload removal (VPU/Apps/Signature#28)

packages/file-handling/README.md

-# FileUpload web component
+# File handling web components
 
-[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/FileUpload)
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/FileHandling)
 
-Files will be uploaded sequentially (not parallel) to prevent overburdening the destination server. 
+## FileSource
 
-## Usage
+### Usage
 
 ```html
-<vpu-fileupload></vpu-fileupload>
+<vpu-file-source></vpu-file-source>
 ```
 
-## Attributes
+### Attributes
 
-- `url`: path to the upload url
-    - example `<vpu-fileupload url="path/to/my/page"></vpu-fileupload>`
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
-    - example `<vpu-fileupload lang="de"></vpu-fileupload>`
-- `always-send-file` (optional): if set the uploaded or queued file will always be sent in the event
-    - example `<vpu-fileupload always-send-file></vpu-fileupload>`
-- `deferred` (optional): if set files will not be uploaded immediately but only queued
-    - use method `uploadFile` or `uploadOneQueuedFile` to really upload the queued file  
-    - example `<vpu-fileupload deferred></vpu-fileupload>`
+    - example `<vpu-file-source lang="de"></vpu-file-source>`
 - `allowed-mime-types` (optional): if set accepts only files matching mime types
-    - example `<vpu-fileupload allowed-mime-types='application/pdf'></vpu-fileupload>` ... PDFs only
-    - example `<vpu-fileupload allowed-mime-types='image/*'></vpu-fileupload>` ... images (of all sub types) only
-    - example `<vpu-fileupload allowed-mime-types='image/png,text/plain'></vpu-fileupload>` ... PNGs or TXTs only
-    - example `<vpu-fileupload allowed-mime-types='*/*'></vpu-fileupload>` ... all file types (default)
+    - example `<vpu-file-source allowed-mime-types='application/pdf'></vpu-file-source>` ... PDFs only
+    - example `<vpu-file-source allowed-mime-types='image/*'></vpu-file-source>` ... images (of all sub types) only
+    - example `<vpu-file-source allowed-mime-types='image/png,text/plain'></vpu-file-source>` ... PNGs or TXTs only
+    - example `<vpu-file-source allowed-mime-types='*/*'></vpu-file-source>` ... all file types (default)
 - `disabled` (optional): disable input control
-    - example `<vpu-fileupload disabled></vpu-fileupload>`
-- `decompress-zip` (optional): decompress zip file and queue the contained files (including files in folders)
-    - example `<vpu-fileupload decompress-zip></vpu-fileupload>`
+    - example `<vpu-file-source disabled></vpu-file-source>`
+- `decompress-zip` (optional): decompress zip file and send the contained files (including files in folders)
+    - example `<vpu-file-source decompress-zip></vpu-file-source>`
     - mime types of `allowed-mime-types` will also be checked for the files in the zip file
 - `nextcloud-auth-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker
-    - example `<vpu-fileupload nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-fileupload>`
+    - example `<vpu-file-source nextcloud-auth-url="http://localhost:8081/index.php/apps/webapppassword"></vpu-file-source>`
     - `nextcloud-web-dav-url` also needs to be set for the Nextcloud file picker to be active
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
-    - example `<vpu-fileupload nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-fileupload>`
+    - example `<vpu-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></vpu-file-source>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
 
 ## Local development
 
 ```bash
 # get the source
-git clone git@gitlab.tugraz.at:VPU/WebComponents/FileUpload.git
-cd FileUpload
+git clone git@gitlab.tugraz.at:VPU/WebComponents/FileHandling.git
+cd FileHandling
 git submodule update --init
 
 # install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)

packages/file-handling/assets/index.html

@@ -2,9 +2,9 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <script type="module" id="vpu-fileupload-src" src="demo.js"></script>
+    <script type="module" id="vpu-file-source-src" src="demo.js"></script>
     <style>
-      vpu-fileupload-demo {
+      vpu-file-source-demo {
           --FUBorderWidth: 2px;
           --FUBorderStyle: dotted;
           --FUBorderColor: #555;
@@ -18,8 +18,6 @@
     </style>
 </head>
 <body>
-
-<vpu-fileupload-demo lang="de" url="http://127.0.0.1:8080"></vpu-fileupload-demo>
-
+    <vpu-file-source-demo lang="de"></vpu-file-source-demo>
 </body>
 </html>

packages/file-handling/package.json

 {
-  "name": "vpu-fileupload",
+  "name": "vpu-file-source",
   "version": "1.0.0",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",

packages/file-handling/rollup.config.js

@@ -13,7 +13,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
 console.log("build: " + build);
 
 export default {
-    input: (build !== 'test') ? ['src/demo.js', 'src/vpu-fileupload.js'] : glob.sync('test/**/*.js'),
+    input: (build !== 'test') ? ['src/demo.js', 'src/vpu-file-source.js'] : glob.sync('test/**/*.js'),
     output: {
         dir: 'dist',
         entryFileNames: '[name].js',
@@ -44,7 +44,7 @@ export default {
                 {src: 'assets/index.html', dest: 'dist'},
                 {src: 'assets/favicon.ico', dest: 'dist'},
                 {src: 'node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/vpu-common/icons'},
-                {src: 'node_modules/tabulator-tables/dist/css', dest: 'dist/local/fileupload/tabulator-tables'},
+                {src: 'node_modules/tabulator-tables/dist/css', dest: 'dist/local/vpu-file-source/tabulator-tables'},
             ],
         }),
         (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false

packages/file-handling/src/demo.js

@@ -2,10 +2,10 @@ import {i18n} from './i18n';
 import {html, LitElement} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import {FileUpload} from './fileupload.js';
+import {FileSource} from './file-source.js';
 import * as commonUtils from 'vpu-common/utils';
 
-class FileUploadDemo extends ScopedElementsMixin(LitElement) {
+class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = 'de';
@@ -14,7 +14,7 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
 
     static get scopedElements() {
         return {
-          'vpu-fileupload': FileUpload,
+          'vpu-file-source': FileSource,
         };
     }
 
@@ -29,9 +29,9 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
         super.connectedCallback();
 
         this.updateComplete.then(() => {
-            this.shadowRoot.querySelectorAll('vpu-fileupload')
+            this.shadowRoot.querySelectorAll('vpu-file-source')
                 .forEach(element => {
-                    element.addEventListener('vpu-fileupload-file-finished', this.addLogEntry.bind(this));
+                    element.addEventListener('vpu-file-source-file-finished', this.addLogEntry.bind(this));
                 });
         });
     }
@@ -57,7 +57,7 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
     render() {
         return html`
             <style>
-                vpu-fileupload.clean {
+                vpu-file-source.clean {
                     --FUBorderWidth: initial;
                     --FUBorderStyle: initial;
                     --FUBorderColor: initial;
@@ -67,7 +67,7 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
                     --FUPadding: initial;
                     --FUWidth: initial;
                 }
-                vpu-fileupload.opt {
+                vpu-file-source.opt {
                     --FUBorder: 2px solid blue;
                 }
             </style>
@@ -78,22 +78,22 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
                     <p>${unsafeHTML(i18n.t('required-server', { url: this.url}))}</p>
                 </div>
                 <div class="content">
-                    <h2 class="subtitle">Send any File to Server</h2>
+                    <h2 class="subtitle">Send files via event</h2>
                     <p>There is no restriction for a specific file type:</p>
-                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="*/*"></vpu-fileupload>
+                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="*/*"></vpu-file-source>
                     <p>Only images are allowed here (JPG, PNG, GIF, TIF, ...):</p>
-                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="image/*"
-                        text="Abgabe nur für Bilder "></vpu-fileupload>
+                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="image/*"
+                        text="Abgabe nur für Bilder "></vpu-file-source>
                     <p>This is for PDF only:</p>
-                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="application/pdf"
-                        text="Einreichung als PDF" button-label="PDF auswählen"></vpu-fileupload>
+                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="application/pdf"
+                        text="Einreichung als PDF" button-label="PDF auswählen"></vpu-file-source>
                      <p>Text and images (JPG, PNG, GIF, TIF, ...) :</p>
-                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="text/plain,image/*"
-                        text="Abgabe für Text und Bilder "></vpu-fileupload>
+                    <vpu-file-source lang="de" url="${this.url}" allowed-mime-types="text/plain,image/*"
+                        text="Abgabe für Text und Bilder "></vpu-file-source>
                </div>
             </section>
         `;
     }
 }
 
-commonUtils.defineCustomElement('vpu-fileupload-demo', FileUploadDemo);
+commonUtils.defineCustomElement('vpu-file-source-demo', FileSourceDemo);

packages/file-handling/src/file-source.js

@@ -35,7 +35,6 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
     constructor() {
         super();
         this.lang = 'de';
-        this.url = '';
         this.nextcloudAuthUrl = '';
         this.nextcloudWebDavUrl = '';
         this.dropArea = null;
@@ -61,7 +60,6 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
     static get properties() {
         return {
             lang: { type: String },
-            url: { type: String },
             allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
             nextcloudAuthUrl: { type: String, attribute: 'nextcloud-auth-url' },
             nextcloudWebDavUrl: { type: String, attribute: 'nextcloud-web-dav-url' },

packages/file-handling/src/vpu-nextcloud-file-picker.js

@@ -268,7 +268,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(VPULitElement) {
 
     render() {
         commonUtils.initAssetBaseURL('vpu-tabulator-table');
-        const tabulatorCss = commonUtils.getAssetURL('local/vpu-fileupload/tabulator-tables/css/tabulator.min.css');
+        const tabulatorCss = commonUtils.getAssetURL('local/vpu-file-source/tabulator-tables/css/tabulator.min.css');
         console.log("tabulatorCss", tabulatorCss);
 
         return html`

packages/file-handling/test/unit.js

-import '../src/vpu-fileupload';
+import '../src/vpu-file-source';
 import '../src/demo';
 
-describe('vpu-fileupload basics', () => {
+describe('vpu-file-source basics', () => {
   let node;
 
   beforeEach(async () => {
-    node = document.createElement('vpu-fileupload');
+    node = document.createElement('vpu-file-source');
     document.body.appendChild(node);
     await node.updateComplete;
   });
@@ -19,11 +19,11 @@ describe('vpu-fileupload basics', () => {
   });
 });
 
-describe('vpu-fileupload demo', () => {
+describe('vpu-file-source demo', () => {
   let node;
 
   beforeEach(async () => {
-    node = document.createElement('vpu-fileupload-demo');
+    node = document.createElement('vpu-file-source-demo');
     document.body.appendChild(node);
     await node.updateComplete;
   });