Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

Files in Google Drive
« Anvil Tutorials

Feeling snap-happy?

7m 57s

In this video, we’ll learn how to access files stored in your Google Drive from an Anvil app.

We’ll build a photo gallery that cycles through all the pictures in a Google Drive folder.

You can do a lot more with Anvil and Google services. Find out more in the Google section of the Anvil reference manual.


Topics Covered


Constructing a UI | 0:14 - 0:50


We construct a UI by adding an Image component to display images, and Buttons for ‘previous’ and ‘next’.


Adding files to Google Drive | 0:50 - 1:36


We enable the Google Drive Service and connect it to a folder on Google Drive. We make it read-only.


Wire up the components | 1:36 - 7:10


We explain the process of developing the code to flick through the images when the Buttons are clicked. Here it is in brief.

First, we get a reference to the picture folder:

pic_folder = app_files.my_holiday.files

Then, we initialise the image to the 0th picture:

    self.pic_num = 0
    self.current_pic.source = pic_folder[self.pic_num]

self.pic_num keeps track of which picture we’re looking at right now.

That means we can display the current picture using this method:

  def display_pic(self):
    pic = self.files[self.pic_num]
    self.current_pic.source = pic  

To make the buttons work, we just need to increment or decrement the picture number, and call self.display_pic:

  def next_btn_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.pic_num += 1
    self.display_pic()

  def prev_btn_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.pic_num -= 1
    self.display_pic()

And finally, we need to disable the Buttons when we’ve reached either end of the picture list:

  def display_pic(self):
    # Disable buttons if we've reached the end of the picture list
    self.prev_btn.enabled = self.pic_num > 0
    self.next_btn.enabled = self.pic_num < len(pic_folder) - 1

    # Then display the picture
    pic = pic_folder[self.pic_num]
    self.current_pic.source = pic

And that’s all we need. The finished app looks like this:

Click this button to copy the app into your account:

Edit this app

(You’ll need to connect it to a Google Drive folder full of pictures - cloned apps do not preserve Google Drive credentials!)


Try it for yourself

Build this app for yourself - Log in and follow along, or watch more tutorials in the Anvil Learning Centre.


Next up

Watch Ian build a document storage app, storing and displaying multiple documents, with full version history including who uploaded each version. This shows how to combine some of the most commonly used Anvil features to build a useful business application. The full build takes 15 minutes.

If you’d like to learn the basics of Anvil, start with the Hello, World! tutorial.