Accessing specific HTML elements

Anvil Q&A
1

Hi all,
I am trying to access the HTML input that is under the FileLoader Anvil’s component.
I found a way, but it’s horrible.
I did my homework, or at least I tried for a reasonable amount of time.
According to this doc page I can find the FileLoader’s HTML DIV Element with the code:

jso_foto = anvil.js.get_dom_node(self.file_loader_1)

Matching Anvil’s page structure and the jso_foto content, points me to the file-loader class, while I need the file-input in order to modify its attributes.

firefox_vUgQOE8eQI
firefox_vUgQOE8eQI855×159 11.7 KB

I found this very rude way to reach it:

js_input_foto = jso_foto.childNodes[0].childNodes[3].childNodes[0]

Is there a more elegant, robust way to get that specific input element child of jso_foto?
I need it to be its child because on the page I could have more FileUploaders so I cannot simply rely on searching the class file-input in the whole page.

Thanks for your help!

PS - if you’re asking what I’m trying to accomplish, I am trying to access directly photo camera, video camera and sound recorder in mobile devices. I have found that simply setting file_type to video/*;capture=camera is not enough, attributes video and capture must be set separately.

This app demonstrates what I mean.
https://anvil.works/build#clone:6WADN5YBXDMWDWQR=FJCWWF3QJ6ZZC5EJO73ZNBWX

2

I can’t find the reference at the moment, but I hit this a little while back and found that the spec for that has changed. On modern browsers, you can just use image/* for the file_type and a mobile device will fire up its camera.

3

Hi @aldo.ercolani

Good question! There is a slightly more elegant way to do what you’re asking, using more features of the anvil.js package:

import anvil.js
from anvil.js.window import jQuery

jso_foto = anvil.js.get_dom_node(self.file_loader_1)
js_input_foto = jQuery(jso_foto).find("input") # Search descendents of the file loader only.

At this point, js_input_foto is a jQuery object, so you can do:

js_input_foto.attr("capture", "...")

Or if you want the raw DOM node:

js_input_foto_node = js_input_foto[0]

That should get you going! But do check the latest version of the spec as @owen.campbell suggests before you go too far down the rabbit hole :slight_smile:

2 Likes
4

https://www.w3schools.com/TAGS/att_input_accept.asp

5

Thanks Owen
I tried this but this opens the Photo Gallery on my phone, not the Camera.
You can try it out cloning the app (just updated) or using it here:

Go to Form 2, last method.

However, thanks for your help!

6

Thanks @daviesian
this was exactly what I was looking for!
I tried to import jQuery and messed around a little trying to figure out the sequence of statements you outlined.
I think a little more in the Docs about how to use jQuery from Anvil could be helpful.

Thanks a lot!

7

It seems it’s browser related. Your app works fine for me on Firefox but not chrome (android).