Developer Blog

Previewing Files With Google Docs Previews

Published August 23rd, 2023

Written By

Alex van der Valk

Solutions Engineer

With Thanks To

Kevin Lewis

TagsTips & Tricks

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.

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!