FIX: use CDN url for chat (#34507)

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/chat/assets/javascripts/discourse/components/chat-composer-upload.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
+import { getURLWithCDN } from "discourse/lib/get-url";
 import { isImage } from "discourse/lib/uploads";
 import { i18n } from "discourse-i18n";
 
@@ -18,6 +19,10 @@ export default class ChatComposerUpload extends Component {
       : this.args.upload.fileName;
   }
 
+  get previewImageSrc() {
+    return getURLWithCDN(this.args.upload?.short_path);
+  }
+
   <template>
     {{#if @upload}}
       <div
@@ -30,7 +35,7 @@ export default class ChatComposerUpload extends Component {
         <div class="preview">
           {{#if this.isImage}}
             {{#if @isDone}}
-              <img class="preview-img" src={{@upload.short_path}} />
+              <img class="preview-img" src={{this.previewImageSrc}} />
             {{else}}
               {{icon "far-image"}}
             {{/if}}

plugins/chat/test/javascripts/components/chat-composer-upload-test.gjs

@@ -1,6 +1,7 @@
 import { fn } from "@ember/helper";
 import { click, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
+import { restoreBaseUri, setupURL } from "discourse/lib/get-url";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
 import ChatComposerUpload from "discourse/plugins/chat/discourse/components/chat-composer-upload";
@@ -99,6 +100,35 @@ module("Discourse Chat | Component | chat-composer-upload", function (hooks) {
     assert.dom("img.preview-img[src='/images/avatar.png']").exists();
   });
 
+  test("image - upload complete uses CDN in preview", async function (assert) {
+    const self = this;
+
+    try {
+      setupURL("//cdn.example.com", "http://test.local", "", {
+        snapshot: true,
+      });
+
+      this.set("upload", {
+        type: ".png",
+        original_filename: "bar_image.png",
+        extension: "png",
+        short_path: "/images/avatar.png",
+      });
+
+      await render(
+        <template>
+          <ChatComposerUpload @isDone={{true}} @upload={{self.upload}} />
+        </template>
+      );
+
+      assert
+        .dom("img.preview-img")
+        .hasAttribute("src", "//cdn.example.com/images/avatar.png");
+    } finally {
+      restoreBaseUri();
+    }
+  });
+
   test("removing completed upload", async function (assert) {
     const self = this;