Tenho a seguinte Coleção no meu formulário:
@tracked formData = {
images: []
};
...
<form.Button @action={{fn form.addItemToCollection "images" ""}}>
Adicionar imagem
</form.Button>
<form.Collection @name="images" as |collection index|>
<collection.Field
@name={{concat "image_" index}}
@title={{concat "Imagem " index}}
as |field|
>
<field.Image @type="composer" />
<form.Button @action={{fn collection.remove index}}>
Remover imagem
</form.Button>
</collection.Field>
</form.Collection>
E então estou tentando obter todas as imagens no meu handleSubmit().
O problema é que, ao clicar em ‘Adicionar imagem’, recebo este erro:
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)
O botão ‘Adicionar imagem’ adiciona o campo de upload, mas ele fica preso em 0%. Clicar em ‘Remover’ não faz nada, sem erro.
Qualquer ajuda é bem-vinda!