Scope upload input lookup in uploadTo

phoenixframework · Oct 2, 2023 · 56893de · 56893de
1 parent 1626c38
commit 56893de
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/assets/js/phoenix_live_view/view.js b/assets/js/phoenix_live_view/view.js
@@ -1062,13 +1062,25 @@ export default class View {
     })
   }
 
-  dispatchUploads(name, filesOrBlobs){
-    let inputs = DOM.findUploadInputs(this.el).filter(el => el.name === name)
+  dispatchUploads(targetCtx, name, filesOrBlobs){
+    let targetElement = this.targetCtxElement(targetCtx) || this.el;
+    let inputs = DOM.findUploadInputs(targetElement).filter(el => el.name === name)
     if(inputs.length === 0){ logError(`no live file inputs found matching the name "${name}"`) }
     else if(inputs.length > 1){ logError(`duplicate live file inputs found matching the name "${name}"`) }
     else { DOM.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, {detail: {files: filesOrBlobs}}) }
   }
 
+  targetCtxElement(targetCtx) {
+    if(isCid(targetCtx)){
+      let [target] = DOM.findComponentNodeList(this.el, targetCtx)
+      return target
+    } else if(targetCtx) {
+      return targetCtx
+    } else {
+      return null
+    }
+  }
+
   pushFormRecovery(form, newCid, callback){
     this.liveSocket.withinOwners(form, (view, targetCtx) => {
       let phxChange = this.binding("change")

diff --git a/assets/js/phoenix_live_view/view_hook.js b/assets/js/phoenix_live_view/view_hook.js
@@ -53,11 +53,13 @@ export default class ViewHook {
   }
 
   upload(name, files){
-    return this.__view.dispatchUploads(name, files)
+    return this.__view.dispatchUploads(null, name, files)
   }
 
   uploadTo(phxTarget, name, files){
-    return this.__view.withinTargets(phxTarget, view => view.dispatchUploads(name, files))
+    return this.__view.withinTargets(phxTarget, (view, targetCtx) => {
+      view.dispatchUploads(targetCtx, name, files)
+    })
   }
 
   __cleanup__(){