User file preview types

Description

Currently, it's possible to view upload multiple files into a "file field", click on them and you would see an enlarged preview. The only supported file type for a preview is an image, for other files we try to show a matching icon. This all works very statically at the moment.

In order to make it easier for users to display the content of the file, we want to add support for other file types like PDF, text, audio, video, documents, etc. That means, when the user clicks on a thumbnail, opening the enlarged view, it should directly show the contents of that file. The user should not first have to download the file to his device before (pre)viewing it.

To make this as reusable as possible, I would like to propose a new registry containing the file preview types. It should be able to match mime type, file extension or maybe even a custom matching function. If the file matches a user file type, the component related to that type will be used to render a preview. The benefit of doing it this way is that other users can create plugins for additional file formats if needed.

File type ideas

  • image: we already have that ✅
    • but should support .svg format
  • audio: <audio controls><source src="URL_TO_FILE.mp3" type="audio/mpeg">Your browser doesn't embedded audio.</audio>
  • video: <video controls width="250"><source src="URL_TO_FILE.mp3" type="video/mp4">Your browser doesn't support embedded videos.</video>
  • docx, doc: <iframe src="https://docs.google.com/gview?url=URL_TO_FILE.doc&embedded=true"></iframe> Not sure if we should use a google service for this though. Maybe we even want to make this optional via the settings and disable it by default. Or another idea that I had is maybe show a warning button to the user when he opens the file. Only after clicking the button, the file with be loaded via docs.google.com, otherwise it will not. The user can then decide per file if he wants to open it this way.
  • .txt / .md / ...
  • .pdf

There are a lot of ways to embed text files, pdf and so much more. These are just a couple of examples.

How to preview Office files

Use an external service

Offers to embed an Iframe in Baserow with the file content rendered by a pdf viewer.

Pros:

  • Really easy to embed in Baserow
  • No Baserow bundle overhead

Cons:

  • Paid solutions (Unless FOSS)
  • We have to send the file to an external service (unless hosted) so needs a user confirmation.
  • Conversion delay

FOSS links

Non FOSS links

Convert the file to pdf then display it

Needs a two step process: first we convert the file to pdf format, then we preview it with an embedded PDF viewer.

Pros:

  • Internal solution
  • Docker ready solutions
  • API

Cons:

  • Implies backend dev
  • New docker container to maintain
  • Must add a pdf viewer library to Baserow frontend (pdf viewer library is lazy loaded thought)
  • Conversion delay
  • Might need a cache and a cache delete policy

Links

Use client side conversion libraries

We convert the file in the browser with a js library.

Pros:

  • Easier to maintain

Cons:

  • Client side converter are very limited
  • Also need to embed a PDF viewer for PDF file
  • Increase bundle size (unless lazy loaded)

links

Functional

This change should work almost identical to how the image embedding works. It should try to fill as much space as possible while reserving some space for the thumbnails at the bottom, heading and left and right arrows. Ideally we want things to keep in aspect ratio with the file to be embedded. If we don't have a user file preview type to handle the file, we should fallback on the icon like we're currently doing.

The icons in the grid view cell, row edit modal or at the bottom of the file preview should not be changed. They can always just show the icon. This is purely for the preview of the file.

Edited by Jérémie Pardou