Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Granite ui fileupload is not showin images preview

Avatar

Level 1

Hi team,

I have been experiencing what I consider could be a possible issue when using the fileupload resourceType inside our component's dialog xml, same coming from:

 

granite/ui/components/foundation/form/fileupload

 

I have been doing some differente tests to see if I can find a pattern and this is what I found:

I can replicate the issue when the mentioned field is added inside a multifield but not when is under a simple container.

 

granite/ui/components/coral/foundation/form/multifield

 

XML Example:

<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
allowUpload="{Boolean}true"
autoStart="{Boolean}true"
fieldLabel="Card Image"
fileNameParameter="./imageName"
fileReferenceParameter="./imagePath"
mimeTypes="[image/*,video/*]"
multiple="{Boolean}false"
name="./image"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>

 

NOTES:

  • I'm working with the latest version of aem cloud sdk.
  • This issue does not happen when I use the older version listed below, but the company has its own policy requirement to use the most recent and that's why I'm trying to figure out is there is any solution to this problem.

Older version of fileupload:

cq/gui/components/authoring/dialog/fileupload

 

 

Also I have a question about the mimeType attribute:

When I add a mimeType="[image/*]" as mentioned in the granite ui documentation to use whenever we want to allow any image extension, I can see that the dialog instead of showing a preview (no matter where it is located, outside or inside a multifield) starts to show only the path where the image is located, I consider this one not as a issue but as a different scenario where it is possible that what I see is actually expected (just want to make sure I'm right on this one)

 

Thanks for your help in advance,

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Mafeo3 ,

This resouceType for fileupload 

granite/ui/components/foundation/form/fileupload

 is older than

cq/gui/components/authoring/dialog/fileupload

I think you should be good using "cq/gui/components/authoring/dialog/fileupload" as the resourceType rather than "granite/ui/components/foundation/form/fileupload" to stay on the newer version of fileupload which supports image preview.

 

If you look at the contents of "/libs/granite/ui/components/foundation/form/fileupload/render.jsp", you can see the "Adobe Copyright year mentioned as 2012" whereas for "/libs/cq/gui/components/authoring/dialog/fileupload/render.jsp", you see that "Adobe Copyright year mentioned as 2016" confirming that "cq/gui/components/authoring/dialog/fileupload" is newer than the other.

 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@Mafeo3 ,

This resouceType for fileupload 

granite/ui/components/foundation/form/fileupload

 is older than

cq/gui/components/authoring/dialog/fileupload

I think you should be good using "cq/gui/components/authoring/dialog/fileupload" as the resourceType rather than "granite/ui/components/foundation/form/fileupload" to stay on the newer version of fileupload which supports image preview.

 

If you look at the contents of "/libs/granite/ui/components/foundation/form/fileupload/render.jsp", you can see the "Adobe Copyright year mentioned as 2012" whereas for "/libs/cq/gui/components/authoring/dialog/fileupload/render.jsp", you see that "Adobe Copyright year mentioned as 2016" confirming that "cq/gui/components/authoring/dialog/fileupload" is newer than the other.

 

Avatar

Level 1

@Sudheer_Sundalam thank you so much for your help, that work for me, I appreciate the quick answer.

Avatar

Administrator

@Mafeo3 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni