diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md index 4fcd80e09a31b44d715b7bc443a326ed709faf9c..9b30f26a79011b63aff19f01271002464b168632 100644 --- a/packages/file-handling/README.md +++ b/packages/file-handling/README.md @@ -14,6 +14,11 @@ - 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>` ## Local development diff --git a/packages/file-handling/src/fileupload.js b/packages/file-handling/src/fileupload.js index f64519727a7efa6f8a7e5e41b65cf7672badc34d..153c78f24df3ac8215a9bba0bb032fa3e684a0f4 100644 --- a/packages/file-handling/src/fileupload.js +++ b/packages/file-handling/src/fileupload.js @@ -22,6 +22,9 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) { this.buttonLabel = ''; this.uploadInProgress = false; this.alwaysSendFile = false; + this.isDeferred = false; + this.queuedFiles = []; + this.queuedFilesCount = 0; } static get scopedElements() { @@ -42,14 +45,24 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) { buttonLabel: { type: String, attribute: 'button-label'}, uploadInProgress: { type: Boolean, attribute: false}, alwaysSendFile: { type: Boolean, attribute: 'always-send-file'}, + isDeferred: { type: Boolean, attribute: 'deferred'}, + queuedFilesCount: { type: Number, attribute: false }, }; } update(changedProperties) { changedProperties.forEach((oldValue, propName) => { - if (propName === "lang") { - i18n.changeLanguage(this.lang); + switch (propName) { + case "lang": + i18n.changeLanguage(this.lang); + break; + case "queuedFilesCount": + const data = { "queuedFilesCount": this.queuedFilesCount, "queuedFiles": this.queuedFiles }; + const event = new CustomEvent("vpu-fileupload-queued-files-changed", + { "detail": data, bubbles: true, composed: true }); + this.dispatchEvent(event); + break; } }); @@ -124,7 +137,8 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) { { "detail": {}, bubbles: true, composed: true })); // we need to wait for each upload until we start the next one - await commonUtils.asyncArrayForEach(files, async (file) => this.uploadFile(file)); + await commonUtils.asyncArrayForEach(files, async (file) => + this.isDeferred ? this.queueFile(file) : this.uploadFile(file)); this.dispatchEvent(new CustomEvent("vpu-fileupload-all-finished", { "detail": {}, bubbles: true, composed: true })); @@ -165,6 +179,50 @@ export class FileUpload extends ScopedElementsMixin(VPULitElement) { { "detail": data, bubbles: true, composed: true })); } + /** + * @param file + * @returns {Promise<void>} + */ + async queueFile(file) { + this.queuedFiles[Math.floor(Math.random() * 1000000)] = file; + this.queuedFilesCount++; + + const data = {"file": file}; + const event = new CustomEvent("vpu-fileupload-file-queued", { "detail": data, bubbles: true, composed: true }); + this.dispatchEvent(event); + } + + /** + * Takes a file off of the queue + * + * @param key + */ + takeFileFromQueue(key) { + // splice the data of the key off the queue + const file = this.queuedFiles.splice(key, 1)[0]; + this.updateQueuedFilesCount(); + + return file; + } + + uploadOneQueuedFile() { + const file = this.takeFileFromQueue(); + + return this.uploadFile(file); + } + + getQueuedFiles() { + return this.queuedFiles; + } + + updateQueuedFilesCount() { + return this.queuedFilesCount = Object.keys(this.queuedFiles).length; + } + + getQueuedFilesCount() { + return this.queuedFilesCount; + } + /** * @param file * @returns {Promise<void>}