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 ‘New Blank App’. Choose the Material Design theme.
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 into the page.
Print the properties of your files
Click on the FileLoader component to bring up the Object Palette. Click on change event
to create a function that will run when a file is uploaded.
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’.
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(f"The file's name is: {file.name}")
print(f"The number of bytes in the file is: {file.length}")
print(f"The file's content type is: {file.content_type}")
print(f"The file's contents are: '{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.
Upload a short text file. Here’s what happens if you upload a file containing the text Anvil represents files as Media objects
:
Display an image file
Stop the app and go back to the Design View of the Form Editor.
Drag-and-drop an Image component onto the page and change its display_mode
to original_size
in the Properties Panel:
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:
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.
Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.