Multiple upload of images and open each of the images in new tab

Anvil Q&A
1

What I’m trying to do:
I want to upload multipe images and open each image in new tab when I click on it , if possible rotate the image in new tab.

What I’ve tried and what’s not working:
I’m able to upload multiple images but I’m only able to see the last uploaded image on the screen. When I click on the image, it downloads. I want the image to open in a new tab.

I have tried

  • window.open()
  • tried to remove the download attribute from the anchor tag using jquery and JavaScript
    • with removeAttr() func in the native libraries.

Clone link:

https://anvil.works/build#clone:ZW6NW2J2V73Q5OMR=EIWLNQCZYM5LBAGQOQ4B5IP6

@stucork can you please have a look

3

hi @kvanitha780 and welcome to the forum,

There’s no obvious way to do this right now. There are some un-documented ways to do this.
(un-documented since we do plan to create a supported api to do this sort of thing).

You have two types of media going on

The file from the file uploader - this is a BlobMedia
The file when add it to a data table row - LazyMedia

both have a .get_url() method, which can take a single argument.

You can force a url on a BlobMedia object using file.get_url(True).
This will be a url that can be opened in a new tab.
It’s equivalent to generating a url like this:

import base64

b64data = base64.b64encode(file.get_bytes())
url = f"data:{file.content_type};base64,{b64data.decode()}"

For the LazyMedia object, i.e. row['my_media']:

  • row['my_media'].get_url(True) will be a downloadable url (same as with no argument)
  • row['my_media'].get_url(False) will be a url that should open in a new tab

Side note: you can get the row object in the server call and return it

@anvil.server.callable
def upload_file(file):
    row = app_tables.files.add_row(file=file)
    return row

Like I said - this is un-documented and we hope to replace it with a supported api in the future.

1 Like
4

Thanks @stucork , it works!!