If a picture is worth a thousand words, then a prototype is worth a thousand pictures. Allowing users, clients, and stakeholders the ability to interact with your product design ideas in a realistic digital environment facilitates buy-in, uncovers design problems, and most importantly generates excitement by giving people the opportunity to get their hands on a realistic product early in the design process.

Axure is one such tool for rapidly prototyping design ideas. While limited in some ways, Axure can be a robust tool for communicating interaction / experience design. I have previously written some tips and tricks for hacking Axure prototypes to be more robust, and these articles have generated some interest from other prototypers looking to solve other problems. Recently, Paul Zaino at Mitchell International reached out and was curious about how to extend my file upload prototype to be able to store images in a database. I figured this would be a good opportunity to write up an approach to accomplish this. Moving forward, if there is interest, I’ll discuss other prototyping problems and solutions here.

Step 1: Set Up Your Axure Prototype

First, figure out the visual characteristics of your design (layout, type, color, etc) using the Axure GUI. I have provided a thorough write-up of the methodology prior, so I won’t go into great detail here. Basically, the idea is first to create objects and elements in Axure and name them:

Later, you will inject javascript using an Axure plugin, using it to modify the elements in question. In this prototype, we will be targeting the “FileInput” button created in the image above and adding an html <input> field. We will go over this in detail later, but for now the important part is creating the visual elements and naming them for use later. At this point, we have the visual representation of the upload button (“FileInput” from the Axure prototype), and a name to access it later.

Step 2: Set Up your Parse Database

Parse is a backend-as-a-service that provides easy database construction and manipulation. To store the images from our prototype, we are going to set up some very simple data tables (code-wary designers: don’t worry, this shouldn’t take more than 5 minutes!).

First, create an account and a project at parse.com. Name your project by entering an “App Name.” Now, navigate to the “Core” subheading under your project. Once there, click to “Add Class.” A parse class is essentially a database table allowing you to store information with different types of attributes. Select “Custom” and name your class. I named my class “Image,” (if you name your class something different, be sure to update the class name in the javascript file).

Click to create the class. Parse will include some default fields (objectId, createdAt, …) which you do not need to worry about. Next, click “+ Col” to add a column to your parse class. Select “File” and name your column “theImage.” This is what you should now be looking at:

That’s it! Now, we need to create the javascript file to handle taking the file from the prototype and sending it to Parse.

Step 3: Send the File to Parse

First, make sure you have included the javascript plugin in your Axure project referenced in Step #1 above (the plugin is here). This plugin will allow you to hack your prototypes and add javascript code to do fun things like storing images ;-).

You will need to store your javascript somewhere accessible externally. I store my files on my own webserver, but you can use Google Drive public folders if you would like, just make sure you are linking directly to the javascript file itself wherever you choose to store it. Enter the url for the javascript file in “State 1" of your javascript plugin:

Now, we will write some javascript to take the file from the prototype and send to Parse. First, we need to turn the “FileInput” button from our Axure prototype into a real html file <input>. We do this via this line of code:

We have created an actual html <input> field and attached it to the “FileInput” button we created earlier in the Axure template.

Next, we are going to watch the file input for changes, and send the file to Parse once we detect a change:

So the things to change here in order to make it work with your project:

1. Your App and Javascript ID’s (from Parse > Settings > Keys)
2. Your Parse “Class” and “Column” names (this example uses “Image” and “theImage,” respectively)

I know, you feel like it should be more difficult and complicated to create this prototype. By harnessing their respective strengths, we are able to easily create a high-fidelity prototype in Axure + Parse.