You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil Editor Docs

Quickstart: Google integration

Upload a file to Google Drive

The Anvil Google API Service gives you a simple way to use a range of Google services.

In this quickstart, we’ll build an app that uploads files to your Google Drive.

Create an app

Log in to Anvil and click ‘New Blank App’. Choose the Material Design theme.

Location of the Create App button

Location of the Create App button

Enable the Google API Service

In the App Browser, click the + next to Services.

App Browser showing the plus next to Services

You’ll see a list of available services and integrations. Click on Google API.

Services list with Google highlighted

In the Sidebar Menu, click the blue plus button +. You’ll see a list of available services and integrations. Click on Google API.

Services list with Google highlighted

Create a folder in your Google Drive

If you don’t have a Google account, you need to create one - it’s free and they’re really useful.

Create an empty folder:

The right-click context menu in Google Drive.

Right-click in Google Drive to get this context menu.

Add a file to your Anvil app

Go back to the Anvil Editor.

In the Google API Service, click the Add App File button:

The Google API Service with the Add An App File button highlighted

The Google API Service with the Add An App File button highlighted

A Google login dialog will open in a separate browser window. Log in to see this dialog in the Anvil Editor:

The Add An App File dialog, where you can browser your Google Drive files and select any you want to let Anvil see.

Browse your Google Drive and select the folder you created earlier.

It will be displayed in the Google API Service like this:

A file after adding to the Google API Service. There's a configurable Python Identifier that you can use to access it in Python code. You can set read and write permissions for client code.

Add a FileLoader to your app

Go to the Design View for Form1. Drag-and-drop a FileLoader component FileLoader icon into your app.

The Design View with a single FileLoader dropped in.

The Design View with a single FileLoader dropped in.

Double-click the FileLoader in the Design View to configure a change event. This code will be automatically written for you in the Code View:

  def file_loader_1_change(self, file, **event_args):
    """This method is called when a new file is loaded into this FileLoader"""
    pass

Delete the pass and write this line in its place:

    app_files.my_folder_name.create_file(file.name, file)

Where my_folder_name is the name of the Google Drive folder you added to the app. In my case, that’s production_data_06_2019:

    app_files.production_data_06_2019.create_file(file.name, file)

Run your app

Run your app:

The Anvil Designer's Run app button.

The Anvil Designer's Run app button.

Click on the Upload button, select a file from your computer and hit ‘open’:

A running app with a native file browser open, so the user can select a file to upload.

A running app with a native file browser open, so the user can select a file to upload.

Check your Google Drive - the file you uploaded will be in the folder:

The Design View with a single FileLoader dropped in.

Success! If you don’t see your file, try logging out of Google Drive and back in again. Sometimes the Google Drive UI takes a while to refresh.

The Design View with a single FileLoader dropped in.

Success! If you don’t see your file, try logging out of Google Drive and back in again. Sometimes the Google Drive UI takes a while to refresh.

Copy the example app

Click on the button below to clone a finished version of this app into your account.

The cloned version will not have the permissions that were granted to the original, of course!

You’ll need to click the button to set up your own Google account, and add your own files rather than ours:

The Google API Service with a warning stating that the Google Drive permissions were removed from the app when it was cloned.

Next up

Want more depth on this subject?

There’s much more to the Google API Service.

Want another quickstart?

Every quickstart is on the Quickstarts page.


Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.