diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md index 7b610c1452c7b0cd3e511d8c037ed8c56a4e1cea..80d54f92efbef54300f35c76666027bc63bc8463 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 de0aeb67bfa4f0435565e0259e5f986539a15ef5..e30821fda9b92cd77aa50f221196d830a190b827 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>