Granite ui fileupload is not showin images preview | Adobe Higher Education
Skip to main content
January 22, 2024
해결됨

Granite ui fileupload is not showin images preview

  • January 22, 2024
  • 2 답변들
  • 974 조회

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,

이 주제는 답변이 닫혔습니다.
최고의 답변: Sudheer_Sundalam

@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.

 

2 답변

Sudheer_Sundalam
Community Advisor
Community Advisor
January 22, 2024

@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.

 

Mafeo3작성자
January 23, 2024

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

kautuk_sahni
Community Manager
Community Manager
January 23, 2024

@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