AEM FileUpload - local file picker and image drag-n-drop from AEM DAM | Community
Skip to main content
N
nibedita160226
Level 2
July 28, 2026
Question

AEM FileUpload - local file picker and image drag-n-drop from AEM DAM

  • July 28, 2026
  • 8 replies
  • 93 views

Hi All,

I need to create an AEM component which is capable of picking an asset from the local directory and provides the drag-n-drop functionality from the AEM DAM as well. I already followed some threads from experienceleague, even though they were helpful to a certain extent but did not clarify really which resourceType I should exactly use. It would be great if I may get some suggestions from the team.

  1. Coral3 file upload - granite/ui/components/coral/foundation/form/fileupload -  We can only upload from the local. 

           Cons :

  • It does not provide the functionality to drag and drop an asset from the DAM.
  • It is not saving the local file against the correct property name i.e., it is not saving the file in ‘fileNameParameter’ property, rather gets saved in the fallback property ‘name’.

  • Once I upload the image from the local directory, the OOTB backend code isn’t handling the request properly i.e., the servlet response code, status, message are all visible on the page itself.

  1. Coral2 file upload - cq/gui/components/authoring/dialog/fileupload 

          Cons:

            It only lets us upload an asset from AEM DAM.

  1. Foundation file upload - granite/ui/components/foundation/form/fileupload - I am able to achieve my requirement via this resourceType. It uploads the file from local directory and gets asset from the AEM DAM too. But I read in a few threads that, it is not stable type to use. Even I am observing the unstable behavior on the dialog UI. Please refer to the below two images. Is it behavior expected, if I use this older resource type?
   unstable dialog UI(mostly happening on non-full-screen-mode)
correct/stable dialog UI

This is the code I am using in dialog xml, am I missing anything here?

<file    jcr:primaryType="nt:unstructured"    sling:resourceType="granite/ui/components/foundation/form/fileupload"    allowUpload="{Boolean}true"    autoStart="{Boolean}true"    fieldLabel="Drag and drop OR Browse File"    fileNameParameter="./excelFileParam"    fileReferenceParameter="./excelFileReferenceParam"    mimeTypes="[application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel]"    name="./excelFile"    uploadUrl="${suffix.path}"    useHTML5="{Boolean}true"/>

​@arunpatidar ​@Asutosh_Jena_ ​@aanchal-sikka 

 

Thanks in advance.

    8 replies

    rk_pandian
    rk_pandian
    Level 4
    July 28, 2026

    Hi ​@nibedita160226, you can also use your option 2 cq/gui/components/authoring/dialog/fileupload combined with allowUpload="{Boolean}true"

     

    Regards,

    Ramkumar

    N
    nibedita160226Author
    Level 2
    July 29, 2026

    Hi ​@rk_pandian , 

    Thank you for your response. But I already tried that option but with coral2 fileupload resourceType it doesn’t seem to be working. It is providing the drag-and-drop functionality only from AEM DAM. 

    I tried below 

    <file        jcr:primaryType="nt:unstructured"        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"        allowUpload="{Boolean}true"        autoStart="{Boolean}true"        fieldLabel="Drag and drop OR Browse File"        fileNameParameter="./excelFileParam"        fileReferenceParameter="./excelFileReferenceParam"        mimeTypes="[application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel]"        name="./excelFile"/>

    Did it work for you? please let me know

    Regards,

    Nibedita

    rk_pandian
    rk_pandian
    Level 4
    July 29, 2026

    ​@nibedita160226 I see that you have given autoStart="{Boolean}true" which will make AEM expect an upload URL, which is not present in the code. If you dont have one and want the file to be uploaded to CRX under the component’s node, pls make it as false. Also you need other two properties for a better functionality. So, the below should work:

    allowUpload="{Boolean}true"
    autoStart="{Boolean}false"
    class="cq-droptarget"
    dropZone="{Boolean}true"

    More details here: https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/fileupload/index.html

     

    Regards,

    Ramkumar

    Terms & ConditionsAccessibility statement

    Loading footer...