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.