Triggering a file upload from an image widget rather than a text box

advanced-prototyping
#1


I want to be able to trigger a file upload dialog via this image button rather than using a textbox on my prototype. I read a post on this forum thats talks about the textbox that works. I have hence created a text box over the file upload image and set the textbox to ‘no outline’ and ‘no fill color’. However, it renders like this in the browser.


I have also attached the RP file.
uploadfile.rp (60.1 KB)

Format "Choose File" button for a text field of File type
Launching the camera application in android mobile prototyping
#2

in axure 8 fire event should help, in axure 7 you can place the textbox in the background and cover it. the problem is that the covering widgets will catch the on click event. the solution for passing events is to add a little bit of css via javascript.
passingEventsThruWidgets.rp (64.8 KB)

Firing event on textfield of type 'file' doesn't work
Scrolling dynamic panel behind another object
#3

Hi Gregor,

Thank you so much for the solution! So this does help if my widget lies on the page directly. But what if the widget is on a dynamic panel? I have attached the same script on the Dynamic panel- Onload event, but I dont think it works. Attaching the file for your reference.
Thanks!uploadfile_dp.rp (66.2 KB)

#4

you forgot to add the field to the stuff inside the repeater. you only need to attach the script once and it will allow the click for all widgets called g.

#5

Hi Gregor,

Thank you so much!!

#6

Any tips on getting fire event working for this in Axure 8? None of the events seem to trigger the file picker.

#7

no chance. alike the flyout of the droplist the file-picker-dialog does only respond to a real user interaction.

#8

Hey!
what do you mean by adding the field to the stuff inside the repeater?

#9

I think it must be inside the panel.

behind the images there should be the text fielt (type file). the image coveres the field to completely hide it. because then it cant be clicked a css is executed and makes all items on the page with the name “g” ignore clicks.

this text field is missing in the uploaded file.

#10

Hi @Gregor , I am trying to use the fire event in axure 8. I want to trigger the file upload screen by pressing a button, instead of the Text field.
The button is labelled Upload and the textfield UploadTextfield.
What i’m doing is the following:
-I Go to the properties of the button and select OnClick

  • Then Fire Onclick on uploadTextfield

When I preview the prototype and click on the button nothing happens.
The upload window only triggers if I click on the textfield.

Am I doing something wrong?

#11

If you will scroll upward you will see Gregor claims that fire event will NOT do the trick for file selection, since it’s reacts only to real user click :roll_eyes:
That means there is no simple workaround here.

Iris–

closed #12