Content: PDF icon doesn't show in Media field

[kakoga]

Describe the bug In the content section when you load a PDF to a media field it shows a broken image instead of a PDF icon

To Reproduce Steps to reproduce the behavior:

1. In the Content section, using the Media field type add a PDF
2. see that the there is no PDF icon - only a broken image

Expected behavior after uploading a PDF to a media field you should see the PDF icon.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac Catalina
• Browser Chrome
• Version 86.0.4240.80 (Official Build) (x86_64)

(related to Zendesk ticket #935)
gz#935

[nibblebot]

do we have icons or should I just grab one off the internet? @shrunyan

[shrunyan]

@nibblebot we are using the latest font awesome icons with the FontAwesomeIcon component

[nibblebot]

@shrunyan currently (and this code is copy/pasted 2-3 times in media app) if it's not an image type (png/jpg/jpeg/gif/svg) it will default to load a 48px thumbnail that it looks for in /ui/images/icons/file_types/48px/${FILE_EXTENSION}.png

https://github.com/zesty-io/manager-ui/blob/2131d3e163b02307e06ba0c20885cd1a8f88dd64/src/apps/media/src/media/media-group/media-file.tag#L82

to switch to FontAwesomeIcon, we'll need to add new logic to the <img> to hide if it's pdf and a new <FontAwesomeIcon> to show if it's a pdf: https://github.com/zesty-io/manager-ui/blob/2131d3e163b02307e06ba0c20885cd1a8f88dd64/src/apps/media/src/media/media-group/media-file.tag#L16

Does this sound right?

[shrunyan]

@nibblebot the example @kakoga provide is coming from the content editor app which uses the FieldTypeImage component. The .tag files will be going away once we start the media rebuild project.

[nibblebot]

postponing this until we rebuild the media app and won't be part of the initial manager release @kakoga

[shrunyan]

@nibblebot can this be closed?

[nibblebot]

@shrunyan no, every PDF attached to a content shows as a broken image because all we have is the file ZUID when passing to the resolver service, so we don't know the file extension, so we assume it is an image and use it for img src="".

I am not sure how to fix this except maybe by manually capturing the 302 redirect and using that as the src. Open to suggestions

[d88naimi]

@shrunyan This is still and active issue and open to suggestions. Demo: https://www.loom.com/share/c11e152e44f24eabb3c563acb2834505

[agalin920]

File and Image field types are handled by the same component (FieldTypeImage). Suggestion is to make a FieldTypeFile component to handle File field type and build in file icons depending on file extension

[JacobDiazCruz]

@agalin920 Will this be handled by the new media feature?

[agalin920]

@JacobDiazCruz No. This is a media field type within content app