Axure’s default text field has a file input type. However, the upload button is not very beautiful, and there is no subsequent interaction after uploading. In this tutorial, we will learn how to solve that problem.
Features to be Realized
1. When the button is clicked, the browser’s file selector is called. When the file selection is completed, the uploading dynamic panel is shown.
2. Hide the upload panel when you click it.
How to Realize these Features
1. Drag in a button, a text field, a dynamic panel. Name the text field file and set the input type to File. Create a rectangle in the dynamic panel, add texts, and name it panel. Style button and dynamic panel.
2. Pin the dynamic panel to browser window.
3. Set dynamic panel and input to hidden. We will call up the browser to add file when we click the button, and show the dynamic panel after selecting the file.
1. Set input to open an external window when loaded, and enter the following code into the text field:
$(“[data-label=’panel’]”).css(“visibility”, “visible”); });
2. Set when the upload button is clicked, open the external link, and enter in the input box:
F is the variable just entered. Call its click method to open the file upload dialog.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.