diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md index 9b30f26a79011b63aff19f01271002464b168632..7b610c1452c7b0cd3e511d8c037ed8c56a4e1cea 100644 --- a/packages/file-handling/README.md +++ b/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 diff --git a/packages/file-handling/src/demo.js b/packages/file-handling/src/demo.js index cdbb663a1ee80adbfda80c79bd7461d485c2c1bc..8089e76fb1145a6c25a717ef19da952cda7bc06f 100644 --- a/packages/file-handling/src/demo.js +++ b/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> `; } diff --git a/packages/file-handling/src/fileupload.js b/packages/file-handling/src/fileupload.js index 88e825aa6fc174e743150037b10a8fac1db3dbcd..de0aeb67bfa4f0435565e0259e5f986539a15ef5 100644 --- a/packages/file-handling/src/fileupload.js +++ b/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>