# Add more fields to Collection (FormKit)

**URL:** https://meta.discourse.org/t/add-more-fields-to-collection-formkit/387765
**Category:** Development
**Created:** [November 6, 2025, 10:54am UTC](https://meta.discourse.org/t/add-more-fields-to-collection-formkit/387765 "2025-11-06T10:54:16Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 6, 2025, 10:54am UTC](https://meta.discourse.org/t/add-more-fields-to-collection-formkit/387765/1 "2025-11-06T10:54:16Z")

</div>

I have the following Collection in my form:

```gjs
@tracked formData = {
  images: []
};

...

<form.Button @action={{fn form.addItemToCollection "images" ""}}>
  Add image
</form.Button>
<form.Collection @name="images" as |collection index|>
  <collection.Field
    @name={{concat "image_" index}}
    @title={{concat "Image " index}}
    as |field|
  >
    <field.Image @type="composer" />
    <form.Button @action={{fn collection.remove index}}>
      Remove image
    </form.Button>
  </collection.Field>
</form.Collection>

```

And then I’m trying to get all the images in my `handleSubmit()`.

The issue is, when clicking ‘Add image’, I get this error:

```plaintext
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#f3fb8bf6-b5c2-429a-8fbe-9f71e53d2320-images.0.image_0 .uploaded-image-preview' is not a valid selector.
    at Object.uploadDropTargetOptions (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:384:39233)
    at get #y (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:1:9152)
    at x.setup (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:1:4021)
    at q._join (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:17128)
    at q.join (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:14790)
    at p (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:338:146675)
    at https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:338:146721
    at Object.installModifier (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:66:84012)
    at https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:66:7863
    at Z (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:60:61995)
    at K.install (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:66:7856)
    at https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:40:122872
    at X (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:60:61939)
    at eG.commit (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:40:122865)
    at eQ.commit (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:40:124154)
    at eX (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:40:124387)
    at tG._renderRoots (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:115:366762)
    at tG._renderRootsTransaction (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:115:367140)
    at tG._revalidate (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:115:367607)
    at invoke (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:11212)
    at m.flush (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:10302)
    at g.flush (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:12018)
    at q._end (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:16776)
    at q.end (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:14195)
    at q._runExpiredTimers (https://global.discourse-cdn.com/themecreator/assets/chunk.035772c00c44639860d5.d41d8cd9.br.js:21:18050)

```

The ‘Add image’ button adds the upload field, but it’s stuck at 0%. Clicking ‘Remove’ does nothing, with no error.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/1/f/11fdcaf985d4f298bdf30c08564a1769f53b479d.png)

Any help is appreciated!

File link: [discourse-post-image-carousel/javascripts/discourse/components/modal/create-carousel-modal.gjs at main · NateDhaliwal/discourse-post-image-carousel · GitHub](https://github.com/NateDhaliwal/discourse-post-image-carousel/blob/main/javascripts/discourse/components/modal/create-carousel-modal.gjs)

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 7, 2025, 10:24am UTC](https://meta.discourse.org/t/add-more-fields-to-collection-formkit/387765/2 "2025-11-07T10:24:59Z")

</div>

Sadly, Ask Discourse wasn’t much of a help. It said that the ‘.’ in the id/name was causing this, but removing the `@name` in the field yielded no results.

Any ideas?