Skip to content
On this page

Directus Cloud

Everything you need to start building. Provisioned in 90 seconds. Starting at $15/month.

Get Started

Developer Blog

Previewing Files With Google Docs Previews

Published August 23rd, 2023

Written By
Alex van der Valk
Alex van der Valk
Solutions Engineer
With Thanks To
Kevin Lewis

Using the file interface, you can store all types of files inside items in your Directus projects. However, there is no built-in way to preview files directly in the editor. I found an easy and reliable way to do this using Directus' Live Preview feature and Google Gview to preview many file formats without first having to download each file.

  1. In your collection, create a File field. I recommend specifying a specific folder for the uploads here, because it can help keep your assets organized.
  2. Ensure you have a static access token with a user who has permission to view your folder of files.
  3. In your Collection configuration, scroll down to the Preview section.
  4. In the Preview URL field add the following, replacing YOUR_DIRECTUS_URL with the URL for your Directus Project, and TOKEN with your static token.
    https://docs.google.com/gview?embedded=true&url=YOUR_DIRECTUS_URL/assets/?access_token=TOKEN
    https://docs.google.com/gview?embedded=true&url=YOUR_DIRECTUS_URL/assets/?access_token=TOKEN
  5. Using the variable tool in the Preview URL interface, add in the image ID just before the ? character in the URL.

Using the plus button to the right of the text box presents all fields within the candidate collection. Select ID with the cursor positioned just before the question mark.

Open up a record in your collection and select the Live Preview button in the top-right. Now you can preview the file inside Directus without having to download it first!

Directus Editor with a form on the left and a Doc X file being previewed on the right.

We're all ears 🐰

How helpful was this article?