Hopefully this is the right category for this issue, as I’m at the intersection of Haxe and Javascript.
I need to allow users to select a file from their machine in an html5 game. Unfortunately, sys.Filesystem isn’t available on html5, and lime.ui.FileDialog doesn’t support loading files on html5 yet. I found this set of examples, and tried the Browse.hx example. I confirmed using jsfiddle that (minus the intermingled Haxe code) it does indeed add the filebrowser. I tested it in Firefox and Chrome and neither had a problem. However, when using the example in my app, it works perfectly in Chrome but not in Firefox.
Using the Firefox dev console I was able to determine that the input element is indeed created and added, but its type is “hidden”, not “file”, and its id is just and empty string. I tried adding the element before setting attributes, after setting attributes, setting attributes by getting the element from the DOM, and nothing I tried worked in Firefox. The element’s attributes just can’t be set. I understand the security implications of programmatically sending clicks like this, but since the element isn’t even being setup properly, it seems like this is a different issue.
Am I missing something obvious? Is there a better way to give the user a file dialog on html5?
the FileReference object is what you are looking for.
It is not the best documented example but here I load an image and show it.
look what I do with my fr object.
the event “Event.SELECT” is when the user finally picks a file, so I wire that to my “load” event.
the “Event.COMPLETE” is fired when the load is complete.
to show the dialog is fr.browse(...)
to actually load the data from the user computer is fr.load()
the loaded bytes live inside fr.data
Okay, I managed to get it working on all browsers. I’m using HaxePunk, not pure OpenFL, so I wasn’t using event listeners to determine when the user clicks the load button. Instead, I was using HaxePunk’s input API, and when the user clicked, I check if they clicked on the load button. It seems that due to some difference in the way input is handled, Firefox decided this wasn’t the user initiating a dialog but rather the app initiating it. Once I added a listener for the CLICK event and handled the dialog in there, I was able to get FileReference to work on Firefox. From what I’ve seen, all modern browsers should differentiate between user- and program-initiated events, for security reasons, so I do wonder why only Firefox was preventing the dialog.
