Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fileTypeIcon only displays PDF's in SPFx 1.8.2 #300

Closed
c-eiser13 opened this issue May 14, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@c-eiser13
Copy link

commented May 14, 2019

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.13.1 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Use the path property of fileTypeIcon with the Image type and see document icon image.

Observed Behavior

I have an SPFx 1.8.2 web part and I'am using the fileTypeIcon control as below:

fti

The doc.docUrl contains a path to the different documents, a combination of Office and PDF. The PDF image shows, but none of the Office document types display. Tested same markup above in SPFx 1.7.1 web part and it works as expected for all document types.

Here is a screenshot of the markup for an item that has a path to a .docx:
css

@AJIXuMuK assited with a similar icon issue in the reusable property controls and I suspect this may be a similar issue. If any further info is needed, just let me know. Thanks!

Steps to Reproduce

Create new 1.8.2 web part and add a fileTypeIcon control with image type and a path to an office document.

@msftbot

This comment has been minimized.

Copy link

commented May 14, 2019

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

commented May 16, 2019

It looks like we have much larger issue with branded icons...
If you look at official docs we should use getFileTypeIconProps method to display branded icon.
But it looks like this method doesn't work with version 5.131.0 of office-ui-fabric-react that is used in the controls...

@estruyf what do you think?
The only fix for now that I see is to request all png icons directly from Office UI Fabric CDN how it is done for "unknown" file types...

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented May 17, 2019

@AJIXuMuK actually we already had a CDN fallback implemented for PDF file. So what I did right now is to make the CDN fallback the default for image icons and added all the supported file types to the CDN fallback.

Before:

Screenshot 2019-05-17 14 53 16

After:

Screenshot 2019-05-17 14 53 06

This will be included in version 1.13.2, feel free to test out the beta to see if it fixes it in your scenario.

Here you can read more information on how you can test out the latest beta version: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

@estruyf estruyf added this to the 1.13.2 milestone May 17, 2019

estruyf added a commit that referenced this issue May 17, 2019

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

commented May 17, 2019

Yep, that is exactly what I meant!
Great!

@c-eiser13

This comment has been minimized.

Copy link
Author

commented May 19, 2019

Thanks @AJIXuMuK and @estruyf , I've installed the beta and can confirm the images are working correctly. I came across this issue in the OUIF repo where the new branded office icons appear to have a new CDN URL, may be something to look at moving forward if any changes need to be made. Thanks again for the quick turnaround!

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented May 22, 2019

This has just been released in the version 1.13.2. Will create a new issue for the new CDN URL.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.