File upload from link click

Feature Requests
1

What I’m trying to do:
I want to create a system where when an image is clicked the user can choose an image from their computer to upload to the app. I don’t want to use the FileLoader ui, the image must be what is clicked.
What I’ve tried and what’s not working:
I’ve tried to put an image inside a FileLoader , but as expected it is not a container. I also tried to put the image inside a link and make it’s click event trigger the click event of a hidden file loader. but it seems that can’t be triggered in code.
Code Sample:

  def user_image_link_click(self, **event_args): 
    self.user_image_loader.click()
2

I have tried off and on for the past few hours, and I can’t figure out a way to get the FileLoader component to trigger from code in any possible way either. I even tried getting the DOM node and having javascript run the .click() on it, but nothing happens.

I wonder if this should stay in Q&A, or get changed into a feature request? I can’t see a good reason why you shouldn’t be able to call a file loader from code, and its not in the docs if there is a way.

As for the image component, the mouse_down event should really do the same thing as click, it just has more information explicitly passed to the function, like where on the image the mouse was when the event happened.
image

3

From the ever inventive mind of Stu comes the answer in a previous forum post: Use a Hidden Fileloader via a Link - #2

1 Like
4

That is a nice one. But I still think it should still be possible to do that by calling the function, or by wrapping other components with the FileLoader component.

5

If you try:

import anvil.js

  def user_image_link_click(self, **event_args): 
    loader_dom = anvil.js.get_dom_node(self.user_image_loader)
    loader_dom.querySelector("input").click()

It’ll probably work.

We’ll make a note to look at supporting this use case without js interop

2 Likes