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.

Quickstart: Files, Media and Binary Data

Make your app handle files

Anvil has built-in support for uploading, storing, downloading, and manipulating files and other binary data.

Follow this quickstart to load files into your app, access their contents and properties, and display an image file on the page.

Create an app

Log in to Anvil and click ‘create app’. Choose the Material Design theme.

Location of the Create App button

Add a FileLoader component

You will see your app in the centre of the screen. On the right is the Toolbox, which contains components to drag-and-drop.

Drop a FileLoader FileLoader icon into the page.

App in the Design View with a single FileLoader in it

Now scroll to the bottom of the Properties Panel. There is a list of events for this FileLoader. Click the blue arrows next to ‘change’.

Events for a FileLoader with the 'change' event highlighted

You will be taken to the Code View. The file_loader_1_change method runs when a file is loaded into the FileLoader:

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

There is a Python object named file that represents whatever file the user loads in. It is an Anvil Media object.

Add some print statements to output the properties and contents of the file:

  def file_loader_1_change(self, file, **event_args):
    """This method is called when a new file is loaded into this FileLoader"""
    print("The file's name is: %s" % file.name)
    print("The number of bytes in the file is: %s" % file.length)
    print("The file's content type is: %s" % file.content_type)
    print("The file's contents are: '%s'" % file.get_bytes())

Run your app

Now click the ‘Run’ button at the top of the screen.

You’ll see your app running. Click the ‘upload’ button - you will get a file selection dialog.

A running app with a FileLoader, showing a Mac OS file selection dialog

Upload a short text file. Here’s what happens if you upload a file containing the text Anvil represents files as Media objects:

Output Panel showing the name, length, content type, and contents of a simple text file

Display an image file

Stop the app and go back to the Design View of the Form Editor.

Drag-and-drop an Image Image icon component onto the page and change its display_mode to original_size in the Properties Panel:

App in the Design View with a single FileLoader and a single Image in it

Go back to the code view and modify the file_loader_1_change event handler to this:

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

Run your app again and upload an image file. Your image will be displayed in the app:

App running with an image displayed by the Image component

Copy the example app

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

Next up

Want more depth on this subject?

Read more about Files, Media and Binary Data to see what else you can do with Media Objects.

Media objects are a powerful way to handle binary data: Anvil supports storing, downloading, emailing, displaying as images, streaming into Server Modules, saving as temporary files in Server Modules, and more.

Want another quickstart?

Every quickstart is on the Quickstarts page.