I have the following Collection in my form:
@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:
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.
Any help is appreciated!