Sample Custom upload form

Create a web form and upload files to Box with Box Platform and Stamplay

With Box Platform, developers can integrate Box’s secure cloud content management and collaboration capabilities into any app.

In this example, we’ll show you how to create custom web forms and upload files to Box using the Box Platform APIs thanks to some of the turn-key features available with Stamplay like hosting and data storage. These two features of Stamply, along with the capabilities of the Box Platform APIs, let you build custom app on the Box Platform very easily.

To get started, you’ll need an account on Stamplay and Box. If your business already uses Box, you can sign up for a free Box Developer account using an email address other than your business email address to use with this tutorial.

Project Setup

First, create a new project on Stamplay. On the left sidebar in the Stamplay console, click on Objects and create a new object called formdata. Objects are data models that Stamplay uses to generate a database and a set of full fledged REST APIs to work with the database.

Once the object is initialized, let’s add properties (attributes) as follows:

• email, firstname, lastname, phone, and a filename of type string
• attachment of type file

The end result look like this:

The formdata object in Stamplay

Here, we create an attribute for each form field that we want to store and, potentially, apply them as metadata on the file in Box. By doing so, Stamplay can now receive data from a client (in this example, is a web form) and forward it to Box via the Box Platform APIs using a Flow.

Create the Flow

Once the Object structure is created, let’s build a Flow in Stamplay to send the file attachment to Box. In the Stamplay console, click on Flows and create a new Flow called Upload Flow and add the following steps:

1. On New Object Saved

2. Upload file on Box

As you can see on this second step, we’re grabbing some data from Step #1 (the filename and the attachment URL) while providing a static ID for the destination folder of our uploaded file.

Any other attribute of the Object formdata could be used to add more info on our uploaded file on Box, as we can imagine to add another step to add metadata on our file. Another idea could be to create folders dynamically to host this file based on the data sent from the form.

Setup the web form

Every Stamplay project comes with web hosting included and this allows you to build custom html/js front-end apps like the one that you can see here: https://box-custom-upload-form.stamplayapp.com/

You can now start from that boilerplate and customize it just by following the steps below:

• Download the frontend app here
• Open the file index.html and edit line 24 adding the appId of your project

<script>
 var appId = ‘REPLACE YOUR APP ID HERE’;
</script>

The appId can be found in the Dashboard -> Settings view of your project.

Finding AppID and APIKey in the settings view

• Open the file stamplay.json and replace the value of appID and apiKey with the ones of your project
• Install our command line tool runningnpm install -g stamplay-cli on your terminal (you need to have NodeJS installed on your machine)
• From the folder that contains the index.html file enter the following commands (in this order):

stamplay deploy
stamplay open

Once you’ve completed these steps, you should see your up and running on a URL that looks like this: yourappid.stamplayapp.com.

Just in case you’re wondering if we allow you to configure a custom URL, the answer is yes, we can do that too. :)

Customizations

If you want to customize this template to fit your own form, you have to:

• Add a property on the Object formdata for each field you want to add to your web form
• Create a matching form field in the HTML page used for the upload

Make sure that the properties of your object data model reflect the names of your fields in the form.

Nothing needs to be changed in the Flow, as this one only passes the file to Box using the Box Platform APIs, but if you want to use the other form fields and apply them as metadata on the file in Box, have a look at these other tutorials here and here.

Conclusion

At Stamplay, we make it easy for people to automate processes and create high-value integrations by tying together APIs. If you need help connecting your apps or have an API that you want to make easy to connect, tweet us at @stamplay and/or drop us an email at support@stamplay.com.