Hi There,
Objective: enable user to select a file, and show a success message after file selection (file name appears inside the input field).
So, I am looking an event to use to catch a file selection.
Tried OnLoad, OnTextChange, OnFocusLost and none worked.
Since this type of input file cannot be triggered by a button, or designed, I doubt If what I want is even doable, but still I wonder: did anyone was able to find a relevant event to catch the file selection completion?
Thanks,
Iris-
It might help folks help you better if you could post your .rp file.
How does a user “select a file” in your prototype? Whatever user action achieves that is where you want to attach your action (interaction code) to set the text of your input field.
Challenge accepted.
I created just an example to explain what I mean, and in search for.
In the ‘Upload File’ input field the user clicks the ‘Choose file’ button.
This is an Axure feature when you define the input type of the field to be a file. I cannot control the design, the message, nothing.
What I am looking for is to trigger a success message, and enabling the ‘CREATE’ button.
I simply could not find any interaction (OnTextChange for example) that will work.
It looks that Axure activate a MAC file selection API, and update the html with the selected file, but does not trigger any interaction… it’s simply ignores interactions (and other widget features such as styles, hints, etc) that in other input types will work…
You can test easily by changing the input type.
input field - file type.rp (56.3 KB)
I am maybe overlooking something, or there’s a hack I missed somewhere, that’s why I posting here.
Iris-
Where is your “Choose file” element in your file? The preview has it, but I cant find it in the mock.
This is a tricky one! I think I found a solution–look at Page 2 of this updated file and see if it works for you. (Caveat: I did this on Windows 10 system with Chrome browser.)
input field - file type.rp (74.7 KB)
Your approach makes sense–using the OnTextChange event to evaluate the filename–the text content of the File Input Field. I noticed you were testing if the text value did not equal “No file chosen” --but that is not actually the text value of the input field. Rather, that is its “hint” value. The actual default text value is blank. A reliable way to test if text is “not blank” is to evaluate the “length of the widget value”; if it is greater than 0 (zero) it must not be blank. However, fixing this still did not work. it turns out the OnTextChange event never gets fired, even after the text does change, so nothing happens. This to me appears like a bug.
To figure out what was going on, I assigned “dummy actions” to all the possible events for the File Input Field and then in the browser, viewed the Axure Console and started the Trace. It turns out that when user clicks on the File Input Field, it gets focus–firing the OnFocus event, which makes sense. This also triggers the OS file dialog to open, and the input field loses focus (firing its OnLostFocus event)–also makes sense. When the OS file dialog closes it returns focus to the File Input Field, once again firing its OnFocus event. So, I thought, “Aha! just use the OnFocus event to test the length of text value.” but this also failed. It takes some small amount of time after the focus is returned for the OS and/or browser to change the text on the File Input Field, so if the OnFocus event evaluates its own text, it will not yet have changed. So, we have to wait a little bit for the filename to come in before testing the text value. To accomplish this, I added a “Wait 1000 ms” and then an action to “Move success by (0, 0)”. This won’t result in any actual movement but it will trigger the OnMove event for the “success” widget, which you want to show if a file has been chosen (correct?) The OnMove has a condition to test the length of the “file name” widget text value, and if greater than zero, show itself and enable the CREATE button. …Whew!
To make this more reliable and add some feedback for the user, you could extend the Wait duration and show a little rotating “busy” GIF or text with “Uploading file…” or something.
The “Choose file” button is automatically added as part of the “File” type for the input field. It is an HTML standard input form type. Its visual style will vary depending on what OS and what browser is used, but the functionality is the same: when clicked, open the OS file dialog window.
Do you need the actual file explorer to appear when you click the Choose file button? I ask because you can set it up to look like you’re selecting a file and then have the file name appear. I don’t see how you would be able to pull a file name from the actual file explorer and display it.
This happens automatically when you have an input field set to “Type: File”. Clicking on the input field (or the “Choose File” button which is part of the input field) opens a “file explorer” dialog window via the OS. You can browse and select an actual file and then click the “Open” button. That will close the dialog and set the text value of the input field to the filename (and path). Try out my .rp file in post above, or just drag in a Text Input Field widget into any prototype, set its type to “File” and preview it. Also works the same in RP8.
I’ve attached a file that shows what i’m referring to.input field - file type-updated.rp (62.2 KB)
Off course this is a clever hack to a feature that does not behave as expected. If they would create a separate widget type (not just a specific input type), they could remove the option to add any interaction. Thing is it looks the same as any input field, and all interaction types are available for the user - makes you try each one and wonder why this does not work. 
Very confusing.
@Axure support - 
- I call you to improve this feature. The widget itself is very useful, we just wish to it trigger something we can catch and act upon!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.