Uploading an image from local computer

Anvil Q&A
1

How can I upload an image that resides on my local computer into my web application? Sample code would be greatly appreciated. Thanks!

1 Like
2

Here’s a starting point for reading :
https://anvil.works/doc/#fileloader

But in essence, drag a fileuploader to a form and put this in its “change” event :

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

Then run the app and upload a simple, small text file.

That should get you started.

Here’s a demo of that :
https://anvil.works/build#clone:WKESOAFUAJTFXZ4K=DBIBGXLNLLRLSBX6UGLSJLK4

3

Hi @wcravero7, and welcome to the forum!

First question: Do you want to upload an image once, when you’re building your application (ie as a static asset)? Or do you want your users to be able to upload an image into your application and store it (eg) in your Data Tables?

Edit - Looks like David beat me to it!

4

I want to upload an image once as a static asset…

5

Thanks for the quick app. I believe the file loader is used by the user to dynamically upload files. I’m actually looking for a way to upload an image once as a static asset. How can I do this?

6

Ah, sorry. I assumed it was part of the app.

How do you intend to use the image? By that I mean there’s an Image component for the forms which will allow you to upload if it’s going to be part of the form layout.

But if you want to upload an image for use by custom HTML, you can also go to the “Assets” under “Theme” in the app browser on the IDE :

image

If you click that choose “upload file” in the “choose an asset to edit” drop down :

image
image.png1627Ă—381 21.7 KB

you can then reference the resulting file like so (for example) :

<img src="_/theme/imagefilename.jpg" />
``
2 Likes
7

You are the man! Thank you!