From dcddc79c34e75861386bc472afa062f736417ef7 Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 20 May 2020 16:25:22 +0200
Subject: [PATCH] Disable file upload on parameter disable
See issue #3
---
packages/file-handling/README.md | 2 ++
packages/file-handling/src/fileupload.js | 11 ++++++++---
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md
index 7b610c14..80d54f92 100644
--- a/packages/file-handling/README.md
+++ b/packages/file-handling/README.md
@@ -24,6 +24,8 @@
- 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)
+- `disabled` (optional): disable input control
+ - example `<vpu-fileupload disabled>`
## Local development
diff --git a/packages/file-handling/src/fileupload.js b/packages/file-handling/src/fileupload.js
index de0aeb67..e30821fd 100644
--- a/packages/file-handling/src/fileupload.js
+++ b/packages/file-handling/src/fileupload.js
@@ -26,6 +26,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
this.isDeferred = false;
this.queuedFiles = [];
this.queuedFilesCount = 0;
+ this.disabled = false;
}
static get scopedElements() {
@@ -50,6 +51,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
alwaysSendFile: { type: Boolean, attribute: 'always-send-file'},
isDeferred: { type: Boolean, attribute: 'deferred'},
queuedFilesCount: { type: Number, attribute: false },
+ disabled: { type: Boolean },
};
}
@@ -109,7 +111,7 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) {
}
handleDrop(e) {
- if (this.uploadInProgress) {
+ if (this.uploadInProgress || this.disabled) {
return;
}
@@ -341,8 +343,11 @@ 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 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>
+ <input ?disabled="${this.uploadInProgress || this.disabled}" type="file" id="fileElem" multiple name='file'>
+ <label class="button is-primary" for="fileElem" ?disabled="${this.disabled}">
+ <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>
</div>
--
GitLab