내 폼에는 다음과 같은 Collection이 있습니다:
@tracked formData = {
images: []
};
...
<form.Button @action={{fn form.addItemToCollection "images" ""}}>
이미지 추가
</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}}>
이미지 제거
</form.Button>
</collection.Field>
</form.Collection>
그리고 handleSubmit()에서 모든 이미지를 가져오려고 합니다.
문제는 ‘이미지 추가’ 버튼을 클릭하면 다음과 같은 오류가 발생한다는 것입니다:
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)
‘이미지 추가’ 버튼을 누르면 업로드 필드가 추가되지만, 진행률이 0%에 멈춰 있습니다. '제거’를 클릭해도 아무 반응이 없고 오류 메시지도 없습니다.
도움을 주시면 감사하겠습니다!