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

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.

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

          Cons:

            It only lets us upload an asset from AEM DAM.

3. 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?

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.