From 52016e4596a1ae47a4576bc639691c49f2dadb63 Mon Sep 17 00:00:00 2001 From: David Taylor Date: Wed, 23 Oct 2024 10:07:54 +0100 Subject: [PATCH] DEV: Update chat-composer-uploads uppy usage (#29339) --- .../discourse/app/lib/uppy/uppy-upload.js | 16 ++- .../components/chat-composer-uploads.hbs | 1 + .../components/chat-composer-uploads.js | 114 +++++++++--------- 3 files changed, 68 insertions(+), 63 deletions(-) diff --git a/app/assets/javascripts/discourse/app/lib/uppy/uppy-upload.js b/app/assets/javascripts/discourse/app/lib/uppy/uppy-upload.js index cc6f1fc91d8..2f7bfe38500 100644 --- a/app/assets/javascripts/discourse/app/lib/uppy/uppy-upload.js +++ b/app/assets/javascripts/discourse/app/lib/uppy/uppy-upload.js @@ -200,12 +200,10 @@ export default class UppyUpload { }, }); - if (this.config.uploadDropTargetOptions) { + const resolvedDropTargetOptions = this.#resolvedDropTargetOptions; + if (resolvedDropTargetOptions) { // DropTarget is a UI plugin, only preprocessors must call _useUploadPlugin - this.uppyWrapper.uppyInstance.use( - DropTarget, - this.config.uploadDropTargetOptions - ); + this.uppyWrapper.uppyInstance.use(DropTarget, resolvedDropTargetOptions); } this.uppyWrapper.uppyInstance.on("progress", (progress) => { @@ -533,6 +531,14 @@ export default class UppyUpload { } } + get #resolvedDropTargetOptions() { + if (typeof this.config.uploadDropTargetOptions === "function") { + return this.config.uploadDropTargetOptions(); + } else { + return this.config.uploadDropTargetOptions; + } + } + #reset() { this.uppyWrapper.uppyInstance?.cancelAll(); Object.assign(this, { diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.hbs index 2f07ecc996f..f6baecce7a0 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.hbs @@ -21,4 +21,5 @@ @allowMultiple={{true}} @fileInputId={{this.fileUploadElementId}} @fileInputClass="hidden-upload-field" + @registerFileInput={{this.uppyUpload.setup}} /> \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js index fd1f17c65c3..30dc61ca041 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js @@ -1,38 +1,74 @@ import Component from "@ember/component"; import { action } from "@ember/object"; +import { getOwner } from "@ember/owner"; import { service } from "@ember/service"; import { classNames } from "@ember-decorators/component"; +import UppyUpload from "discourse/lib/uppy/uppy-upload"; import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin"; import { clipboardHelpers } from "discourse/lib/utilities"; -import UppyUploadMixin from "discourse/mixins/uppy-upload"; import { cloneJSON } from "discourse-common/lib/object"; -import discourseComputed, { bind } from "discourse-common/utils/decorators"; +import { bind } from "discourse-common/utils/decorators"; @classNames("chat-composer-uploads") -export default class ChatComposerUploads extends Component.extend( - UppyUploadMixin -) { +export default class ChatComposerUploads extends Component { @service mediaOptimizationWorker; @service chatStateManager; - id = "chat-composer-uploader"; - type = "chat-composer"; + uppyUpload = new UppyUpload(getOwner(this), { + id: "chat-composer-uploader", + type: "chat-composer", + useMultipartUploadsIfAvailable: true, + + uppyReady: () => { + if (this.siteSettings.composer_media_optimization_image_enabled) { + this.uppyUpload.uppyWrapper.useUploadPlugin(UppyMediaOptimization, { + optimizeFn: (data, opts) => + this.mediaOptimizationWorker.optimizeImage(data, opts), + runParallel: !this.site.isMobileDevice, + }); + } + + this.uppyUpload.uppyWrapper.onPreProcessProgress((file) => { + const inProgressUpload = this.inProgressUploads.findBy("id", file.id); + if (!inProgressUpload?.processing) { + inProgressUpload?.set("processing", true); + } + }); + + this.uppyUpload.uppyWrapper.onPreProcessComplete((file) => { + const inProgressUpload = this.inProgressUploads.findBy("id", file.id); + inProgressUpload?.set("processing", false); + }); + }, + + uploadDone: (upload) => { + this.uploads.pushObject(upload); + this._triggerUploadsChanged(); + }, + + uploadDropTargetOptions: () => ({ + target: this.uploadDropZone || document.body, + }), + + onProgressUploadsChanged: () => { + this._triggerUploadsChanged(this.uploads, { + inProgressUploadsCount: this.inProgressUploads?.length, + }); + }, + }); + existingUploads = null; uploads = null; - useMultipartUploadsIfAvailable = true; uploadDropZone = null; - init() { - super.init(...arguments); - this.setProperties({ - fileInputSelector: `#${this.fileUploadElementId}`, - }); + get inProgressUploads() { + return this.uppyUpload.inProgressUploads; } didReceiveAttrs() { super.didReceiveAttrs(...arguments); if (this.inProgressUploads?.length > 0) { - this._uppyInstance?.cancelAll(); + this.uppyUpload.uppyWrapper.uppyInstance?.cancelAll(); } this.set( @@ -56,19 +92,13 @@ export default class ChatComposerUploads extends Component.extend( ); } - uploadDone(upload) { - this.uploads.pushObject(upload); - this._triggerUploadsChanged(); - } - - @discourseComputed("uploads.length", "inProgressUploads.length") - showUploadsContainer(uploadsCount, inProgressUploadsCount) { - return uploadsCount > 0 || inProgressUploadsCount > 0; + get showUploadsContainer() { + return this.get("uploads.length") > 0 || this.inProgressUploads.length > 0; } @action cancelUploading(upload) { - this.appEvents.trigger(`upload-mixin:${this.id}:cancel-upload`, { + this.uppyUpload.cancelSingleUpload({ fileId: upload.id, }); this.removeUpload(upload); @@ -80,34 +110,6 @@ export default class ChatComposerUploads extends Component.extend( this._triggerUploadsChanged(); } - _uploadDropTargetOptions() { - return { - target: this.uploadDropZone || document.body, - }; - } - - _uppyReady() { - if (this.siteSettings.composer_media_optimization_image_enabled) { - this.uppyUpload.uppyWrapper.useUploadPlugin(UppyMediaOptimization, { - optimizeFn: (data, opts) => - this.mediaOptimizationWorker.optimizeImage(data, opts), - runParallel: !this.site.isMobileDevice, - }); - } - - this.uppyUpload.uppyWrapper.onPreProcessProgress((file) => { - const inProgressUpload = this.inProgressUploads.findBy("id", file.id); - if (!inProgressUpload?.processing) { - inProgressUpload?.set("processing", true); - } - }); - - this.uppyUpload.uppyWrapper.onPreProcessComplete((file) => { - const inProgressUpload = this.inProgressUploads.findBy("id", file.id); - inProgressUpload?.set("processing", false); - }); - } - @bind _pasteEventListener(event) { if (document.activeElement !== this.composerInputEl) { @@ -124,16 +126,12 @@ export default class ChatComposerUploads extends Component.extend( } if (event && event.clipboardData && event.clipboardData.files) { - this._addFiles([...event.clipboardData.files], { pasted: true }); + this.uppyUpload.addFiles([...event.clipboardData.files], { + pasted: true, + }); } } - onProgressUploadsChanged() { - this._triggerUploadsChanged(this.uploads, { - inProgressUploadsCount: this.inProgressUploads?.length, - }); - } - _triggerUploadsChanged() { this.onUploadChanged?.(this.uploads, { inProgressUploadsCount: this.inProgressUploads?.length,