PDFs Have No Thumbnail Or Icon In Media Gallery

[Undistraction]

Describe the bug When a .pdf file is uploaded to the Media Gallery, it's preview card is blank. No thumbnail is generated for it. Note that this remains true after a page refresh. Thumbnails are generated for images.

To Reproduce

Expected behavior Either a Thumbnail, or a PDF icon is displayed on the file's preview card.

Observations

• This is a different issue to #1985 as no image is displayed even after a page refresh.
• If a preview cannot be generated for PDFs, an icon should be displayed as current behaviour makes it look like upload failed.

Screenshots

Applicable Versions:

• Netlify CMS version: netlify-cms 2.3.2
• Git provider: Gitlab
• OS: OSX
• Browser version: 71.0.3578.98
• Node.JS version: 8.11.3

[thebetternewt]

Agreed! There should be icons for common filetypes, including CSVs in my case.

[erquhart]

Closed in #2089.

[equivalentideas]

For my team of authors, there are issues recognising PDFs in the media library. Without a preview to aid recognition, they rely on the file naming, which is often inconsistent, unpredictable, and often out of their control.

For us, a preview image of the first page would make PDF's much more recognisable, by giving some more information about the contents of the file. This is a familiar pattern from Google Drive, Drop Box etc.

I think the current solution was a good first pass, and now we could use this issue to discuss improvements / possible solutions, @erquhart would you be up for re-opening this?

[erezrokah]

Re-opening - this https://github.com/mozilla/pdf.js/ might serve as a solution as long as it doesn't add to much to our bundle size.

[equivalentideas]

Thanks @erezrokah :bread:

[tylerbrostrom]

Spitballing here, but maybe PDF thumbnails could be generated by a third-party image service like Cloudinary.

You could even defer the implementation of that image service to the developer. Say by adding a thumbnail_url option to the file widget. thumbnail_url would accept a string template with access to the site’s URL and the file’s public path:

- name: "pdf"
  widget: "file"
  thumbnail_url: "https://res.cloudinary.com/<cloudinary-id>/image/fetch/<transforms>/{{site_url}}/{{public_path}}.jpg"
  # Appending `.jpg` tells Cloudinary to convert the given PDF file to a JPG. Cool beans!

Yeah, it’s a bit scrappy and definitely hinges on the magic of Cloudinary’s Fetched URL API, which simultaneously uploads an asset from a given URL and responds with a transformed asset. Figured it was still worth sharing!

Folks hosting on Netlify could get super slick with it too, proxying friendlier URLs to Cloudinary:

# netlify.toml

[[redirects]]
    from = "/pdf-to-jpg/*"
    to = """\
        https://res.cloudinary.com/\
        <cloudinary-id>/\
        /image/fetch/\
        q_auto,f_auto,w_720/\
        https://example.netlify.app/:splat.jpg\
        """
    status = 200