AEM 6.5 Pre-populate fileUpload image field in cq dialog - aem

Question

New to AEM, I am trying to programatically populate an fileUpload image dropzone, and silently triggered its drop event as if user had manually drop an image asset to it. Is there a way to do this?
Say I have a cq_dialog with two fileUpload image fields (set to no upload, only droppable from asset allowed), one was already populated prior, the other is empty. Upon dialog load, I want to populate the empty one with the image asset from the populated one as a default.
The snippets of the cq_dialog looks like this:
<imageontopWrap
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="layout-showhide-targets"
showhidetargetvalue="imageontop">
<items jcr:primaryType="nt:unstructured">
<image1
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
allowUpload="{Boolean}false"
class="cq-droptarget"
fieldLabel="Image Asset"
fileReferenceParameter="./myImageTopPath"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./myImageTop"
title="Upload Image Asset"
useHTML5="{Boolean}true"/>
<altText1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Alt Text"
name="./myImageTopAltText"/>
</items>
</imageontopWrap>
<imageonleftWrap
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="layout-showhide-targets"
showhidetargetvalue="imageonleft">
<items jcr:primaryType="nt:unstructured">
<image2
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
allowUpload="{Boolean}false"
class="cq-droptarget"
fieldLabel="Image Asset"
fileReferenceParameter="./myImageLeftPath"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./myImageLeft"
title="Upload Image Asset"
useHTML5="{Boolean}true"/>
<altText2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Alt Text"
name="./myImageLeftAltText"/>
</items>
</imageonleftWrap>
I had created a clientLib for this cq_dialog, just wasn't sure the js codes to copy the image reference and trigger the drop using script.
Any help is much appreciated.

Answer 1

Here is the mechanism through you can achive what you require I hope. I am not sure about the exact js code though for which you have to do some googling on listners.
On dialog load, store the reference of the first image drop container in a js variable.
Then find the path of the image that is being stored/authored in the first image container.
Populate the same path in the second image drop path.
As I said, above is just a mechanism to help how you can achive your requirement.