Deny files not matching required mime types

See issue #2

packages/file-handling/README.md

@@ -19,6 +19,11 @@
 - `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>`
+- `allowed-mime-types` (optional): if set accept 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)
 
 ## Local development
 

packages/file-handling/src/demo.js

@@ -80,18 +80,17 @@ class FileUploadDemo extends ScopedElementsMixin(LitElement) {
                 <div class="content">
                     <h2 class="subtitle">Send any File to Server</h2>
                     <p>There is no restriction for a specific file type:</p>
-                    <vpu-fileupload lang="de" url="${this.url}"></vpu-fileupload>
+                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="*/*"></vpu-fileupload>
                     <p>Only images are allowed here (JPG, PNG, GIF, TIF, ...):</p>
-                    <vpu-fileupload lang="de" url="${this.url}" accept="image/*"
+                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="image/*"
                         text="Abgabe nur für Bilder "></vpu-fileupload>
                     <p>This is for PDF only:</p>
-                    <vpu-fileupload lang="de" url="${this.url}" accept="application/pdf"
+                    <vpu-fileupload lang="de" url="${this.url}" allowed-mime-types="application/pdf"
                         text="Einreichung als PDF" button-label="PDF auswählen"></vpu-fileupload>
-                </div>
-                <div class="content">
-                    <h2>Log of uploads</h2>
-                    <ul id="log"></ul>
-                </div>
+                     <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>
+               </div>
             </section>
         `;
     }

packages/file-handling/src/fileupload.js

@@ -17,7 +17,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
         this.lang = 'de';
         this.url = '';
         this.dropArea = null;
-        this.accept = '';
+        this.allowedMimeTypes = '';
         this.text = '';
         this.buttonLabel = '';
         this.uploadInProgress = false;
@@ -42,7 +42,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
         return {
             lang: { type: String },
             url: { type: String },
-            accept: { type: String },
+            allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
             text: { type: String },
             buttonLabel: { type: String, attribute: 'button-label'},
             uploadInProgress: { type: Boolean, attribute: false},
@@ -150,9 +150,24 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
         let tempFilesToHandle = [];
         await commonUtils.asyncArrayForEach(files, async (file) => {
             if (file.size === 0) {
-                console.log('file ' + file.name + ' has size=0 and is denied!')
+                console.log('file \'' + file.name + '\' has size=0 and is denied!')
                 return;
             }
+            if (this.allowedMimeTypes) {
+                // check if file is allowed
+                const [fileMainType, fileSubType] = file.type.split('/');
+                const mimeTypes = this.allowedMimeTypes.split(',');
+                let deny = true;
+                mimeTypes.forEach((str) => {
+                    const [mainType, subType] = str.split('/');
+                    deny = deny && ((mainType !== '*' && mainType !== fileMainType) || (subType !== '*' && subType !== fileSubType));
+                });
+                if (deny) {
+                    console.log(`mime type ${file.type} of file '${file.name}' is not compatible with ${this.allowedMimeTypes}`);
+                    return;
+                }
+            }
+
             tempFilesToHandle.push(file);
         });
 
@@ -326,7 +341,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
             <div id="dropArea">
                 <div class="my-form" title="${this.uploadInProgress ? i18n.t('upload-disabled-title') : ''}">
                     <p>${this.text || i18n.t('intro')}</p>
-                    <input ?disabled="${this.uploadInProgress}" type="file" id="fileElem" multiple accept="${ifDefined(this.accept)}" name='file'>
+                    <input ?disabled="${this.uploadInProgress}" type="file" id="fileElem" multiple name='file'>
                     <label class="button is-primary" for="fileElem"><vpu-icon style="display: ${this.uploadInProgress ? "inline-block" : "none"}" name="lock"></vpu-icon> ${this.buttonLabel || i18n.t('upload-label')}</label>
                     <vpu-mini-spinner style="display: ${this.multipleUploadInProgress ? "inline-block" : "none"}"></vpu-mini-spinner>
                 </div>