DEV: Allow multiple upload fields in object site setting (#36605)

janzenisaac · web-flow · commit da7bc59ec841 · 2025-12-11T09:37:42.000-06:00
When multiple upload types were included in a object site setting, they
were not given unique identifiers. This is problematic as all inputs
were treated as one, meaning you could upload a asset to UPLOAD_FIELD_1,
however uploading a asset to UPLOAD_FIELD_2 would override the first
field.

This PR concats the name of the setting to the id of the upload field to
create a unique identifier.
diff --git a/frontend/discourse/admin/components/schema-setting/field.gjs b/frontend/discourse/admin/components/schema-setting/field.gjs
@@ -59,6 +59,7 @@ export default class SchemaSettingField extends Component {
         <this.component
           @value={{@value}}
           @spec={{@spec}}
+          @name={{@name}}
           @onChange={{@onValueChange}}
           @description={{this.description}}
           @setting={{@setting}}
diff --git a/frontend/discourse/admin/components/schema-setting/types/upload.gjs b/frontend/discourse/admin/components/schema-setting/types/upload.gjs
@@ -27,7 +27,7 @@ export default class SchemaSettingTypeUpload extends Component {
       @onUploadDeleted={{this.uploadDeleted}}
       @additionalParams={{hash for_site_setting=true}}
       @type="site_setting"
-      @id={{concat "schema-field-upload-" @setting.setting}}
+      @id={{concat "schema-field-upload-" @setting.setting "-" @name}}
       @allowVideo={{true}}
     />
 
diff --git a/frontend/discourse/tests/integration/components/admin-schema-setting/editor-test.gjs b/frontend/discourse/tests/integration/components/admin-schema-setting/editor-test.gjs
@@ -2446,5 +2446,78 @@ module(
       assert.dom(MOVE_UP_BTN).isNotDisabled();
       assert.dom(MOVE_DOWN_BTN).isDisabled();
     });
+
+    test("multiple upload fields have unique IDs", async function (assert) {
+      const setting = SiteSetting.create({
+        setting: "objects_setting",
+        schema: {
+          name: "something",
+          properties: {
+            first_upload: {
+              type: "upload",
+            },
+            second_upload: {
+              type: "upload",
+            },
+          },
+        },
+        value: [{}],
+      });
+
+      await render(
+        <template>
+          <AdminSchemaSettingEditor
+            @id="1"
+            @setting={{setting}}
+            @schema={{setting.schema}}
+            @routeToRedirect="adminPlugins.show.settings"
+          />
+        </template>
+      );
+
+      const inputFields = new InputFieldsFromDOM();
+
+      // Verify both upload fields exist
+      assert
+        .dom(inputFields.fields.first_upload.labelElement)
+        .hasText("first_upload");
+      assert
+        .dom(inputFields.fields.second_upload.labelElement)
+        .hasText("second_upload");
+
+      // The UppyImageUploader components should have unique IDs based on field names
+      const firstUploadId =
+        inputFields.fields.first_upload.inputElement.id ||
+        inputFields.fields.first_upload.inputElement.querySelector(
+          "[id^='schema-field-upload-']"
+        )?.id;
+      const secondUploadId =
+        inputFields.fields.second_upload.inputElement.id ||
+        inputFields.fields.second_upload.inputElement.querySelector(
+          "[id^='schema-field-upload-']"
+        )?.id;
+
+      assert.true(
+        !!firstUploadId,
+        "First upload field should have an ID attribute"
+      );
+      assert.true(
+        !!secondUploadId,
+        "Second upload field should have an ID attribute"
+      );
+      assert.notStrictEqual(
+        firstUploadId,
+        secondUploadId,
+        "Upload field IDs should be unique"
+      );
+      assert.true(
+        firstUploadId?.includes("first_upload"),
+        "First upload ID should include field name"
+      );
+      assert.true(
+        secondUploadId?.includes("second_upload"),
+        "Second upload ID should include field name"
+      );
+    });
   }
 );
