Unable to display all the images in anvil form

Anvil Q&A
1

I’m currently working on a task. I’m taking input path of the folder containing multiple images from user and then successfully resizing them (by 200x200) using a python function. But i’m unable to display all the resized images in anvil forms.

Can you please help me in this problem? Currently i’m just able to display one image using anvil.BlobMedia. But i need “all of the resized images to display”.

https://anvil.works/build#clone:O2DQWU2SHJPIJWLO=IWPVOVW7RCUAAHT5Y7KYIURF

image
image1029×479 68.4 KB

2

First it looks like you’re returning inside The loop of your server function - this means only the first image will be returned.

Consider returning a list of images to the client.
Then consider adding images to a container in code rather than using the design view.

Or better - use a RepeatingPanel and set its items property to the list of images. (But make the list of images a list of dicts)

[{'image':BlobMedia_object1}, ...]

If you’ve not used repeatingPanels before then add one to the form and in the ItemTemplate Form you can add an image component.

Now you can bind each image component’s source property to self.item['image']

The main code will look like

self.repeating_panel.items = anvil.server.call('get_images')
3

Thank you so much for your response. I got your point and tried to improve my coding part as you said.

Since i’m new to anvil, i’m unable to do this part “[{‘image’:BlobMedia_object1}, …]” as you mentioned. I think i’m also making some mistakes in my python code on particularly this part.
Currently i’m getting this error, and unable to remove it:

image
image1360×417 23.6 KB

Can you please have a look at this again? I’m just a few steps away from my goal. A sample code/video would be highly appreciated.

https://anvil.works/build#clone:O2DQWU2SHJPIJWLO=IWPVOVW7RCUAAHT5Y7KYIURF

4

from your code example I meant something more like this:

@anvil.server.callable
def task1(path):  
  
    ret = []    # empty array for storing images
    
    for i in os.listdir(path):
        img = tf.keras.preprocessing.image.load_img(path+'\\' +i, target_size=(200,200))        
        bs = io.BytesIO()
        ret.append({'image' : anvil.BlobMedia('image/jpeg', bs)})
        
    return ret
5

All errors removed. But i think i’m messing with the image component in repeating panels. Got the following output:

image
image1028×609 16.9 KB

I have 3 images in this folder and successfully got 3 cards but no images.
https://anvil.works/build#clone:O2DQWU2SHJPIJWLO=IWPVOVW7RCUAAHT5Y7KYIURF

6

Hi @hirasharif1998,

I think the main issue here is that you’re trying to access files on the User’s computer, but your Server Module code is running on the Anvil server, where there are no images at that path. You probably want to look at the FileLoader component, which lets users select files on their computer and upload them to Anvil. (In this case, it looks like you’ll want to make sure the multiple property is ticked, so they can select several files at once).

When the user has selected the files, you can pass them to the server. Something like this on the client:

def file_loader_1_change(self, files, **event_args):
    # Pass the selected files to the server
    results = anvil.server.call("process_files", files)

And something like this on the server:

import anvil.media

@anvil.server.callable
def process_files(files):  
  
    ret = []    # empty array for storing images
    
    for f in files:
        with anvil.media.TempFile(f) as file_name:
            # Process the image
            img = tf.keras.preprocessing.image.load_img(file_name, target_size=(200,200))
            bs = io.BytesIO()

            # TODO: Write the image bytes to `bs`

            ret.append({'image' : anvil.BlobMedia('image/jpeg', bs)})
        
    return ret

This is just an example - as noted in the code above, you will still need to actually get the bytes of the converted image. Alternatively, you could write the converted image to a temporary file, then convert that file to a Media Object you can return.

I hope that helps!