diff --git a/packages/file-handling/src/demo.js b/packages/file-handling/src/demo.js index 6f201e5764847e49e8c72ebdd3ac6d17812ceb7e..75fbaafb7f8eeed672f47e1b58833716f985b66c 100644 --- a/packages/file-handling/src/demo.js +++ b/packages/file-handling/src/demo.js @@ -24,7 +24,7 @@ class FileUploadDemo extends LitElement { this.updateComplete.then(() => { this.shadowRoot.querySelectorAll('vpu-fileupload') .forEach(element => { - element.addEventListener('vpu-fileupload-finished', this.addLogEntry.bind(this)); + element.addEventListener('vpu-fileupload-file-finished', this.addLogEntry.bind(this)); }); }); } diff --git a/packages/file-handling/src/vpu-fileupload.js b/packages/file-handling/src/vpu-fileupload.js index 9090bd1aab0102121952870b99b8ef3e1ffc755f..60049eaf1c32baf57e8d7c1f94a9b58f1ef644e7 100644 --- a/packages/file-handling/src/vpu-fileupload.js +++ b/packages/file-handling/src/vpu-fileupload.js @@ -107,8 +107,14 @@ class VPUFileUpload extends VPULitElement { async handleFiles(files) { console.log('handleFiles: files.length = ' + files.length); + this.dispatchEvent(new CustomEvent("vpu-fileupload-all-start", + { "detail": {}, bubbles: true, composed: true })); + // we need to wait for each upload until we start the next one await this.asyncForEach(files, async (file) => this.uploadFile(file)); + + this.dispatchEvent(new CustomEvent("vpu-fileupload-all-finished", + { "detail": {}, bubbles: true, composed: true })); } async sendFinishedEvent(response, file, sendFile = false) { @@ -132,15 +138,25 @@ class VPUFileUpload extends VPULitElement { data.file = file; } - const event = new CustomEvent("vpu-fileupload-finished", { "detail": data, bubbles: true, composed: true }); + const event = new CustomEvent("vpu-fileupload-file-finished", { "detail": data, bubbles: true, composed: true }); this.dispatchEvent(event); } + sendStartEvent(file) { + let data = { + filename: file.name, + }; + + this.dispatchEvent(new CustomEvent("vpu-fileupload-file-start", + { "detail": data, bubbles: true, composed: true })); + } + /** * @param file * @returns {Promise<void>} */ async uploadFile(file) { + this.sendStartEvent(file); let url = this.url; let formData = new FormData();