I'm on main so maybe there's a difference, but I'm actually getting a files key, it's just not serializing correctly. The following code:

import idom
@idom.component
def Test():
 return idom.html.input({"type": "file", "id": "my-input", "onChange": print})
idom.run(Test, port=8000)

Produces the following output when a file is added:

{'value': 'C:\\fakepath\\some-file.txt', 'files': {'0': {}}}

@ksmoore17 I think the reason you're not seeing the latest updates is due to a bug in how the JS build dir is updated. You should get the same output as me if you run idom restore. This will be fixed in the next release.

Seeing that files key now! And with a dict representation of the file object. Realizing now that I will need to use the js FileReader api or something similar (File.arrayBuffer()) since the python side can't really work with the files from the "handles" (the dicts returned in the files key). I tried for a bit to return it in those dicts in the hasFiles callback (tacking it on as a string). This was the general idea:

files: Array.from(target.files).map((file) => {
 var bytes;
 file.arrayBuffer().then((buffer) => {bytes = buffer});
 return {
 lastModified: file.lastModified,
 name: file.name,
 size: file.size,
 type: file.type,
 bytes: bytes
 }
})

This seems like a dead end because it's an async process, and it was supposed to be a hack anyway. I think it would be nice to have a python idom.util function or something like a useFile hook that can take this file handle that is being successfully sent to the python event handler and access the FileReader api on the browser to send back the bytes array. Let me know what you think, I would be interested in working on this.

I think this might be best written as a custom component, the API for which has been subject to change in the past. However I think it'll be mostly finalized in the next release so once it's out I can make the necessary changes and remove the warning from the template repository.

I can imagine the JS module might look like this:

export function createElement() {};
export function renderElement() {};
export function unmountElement() {};
export function FileInput({ onChange }) {
 const handleChange = (event) => {
 const fileDataPromises = Array.from(event.target.files).map(promiseFileData);
 Promise.all(fileDataPromises).then((files) => onChange({ files: files });
 };
 return <input onChange={handleChange} />
} 
function promiseFileData(file) {
 return file.arrayBuffer().then((bytes) => (
 {
 lastModified: file.lastModified,
 name: file.name,
 size: file.size,
 type: file.type,
 bytes: bytes
 }
 ))
}