Tutorial: Uploading files in Box using an app

We can use Boomi Flow to build an app that will upload files to Box. We can use Box for authentication as well.

Here is a use case: Mr. Lucius Fox of Dwayne Industries wants to build a simple app, that will let him upload images and text files containing schematics of a new car his team is working on, to an online file sharing and content management service.

Here is a link to the finished app we built following the instructions – you can run it on your browser. Once you authenticate yourself, a screen opens where you can upload the file.

Flows can be exported/imported as a JSON (JSON or JavaScript Object Notation is a lightweight data-interchange format). You can download a JSON of the flow, import it to your tenant, open the flow, and customize it to meet your requirements.

Let’s get building!

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.

This is what our canvas will look like, once we are done:

screen-shot-2016-11-04-at-12-10-10-am-minishadow

What we will need

  1. Boomi Flow username/password. (If you do not have a Boomi Flow login, please click here to request one.)
  2. Box account and password. (You can create a Box account here.)
  3. Box Service for Boomi Flow configured. (To see a list of Services you have installed, click Services in the Home screen sidebar. To learn more about Services, click here.)

 Naming the flow and configuring authentication
  1. Click LOG IN to login to the Boomi Flow Drawing Tool and click New Flow.
  2. Select Flows in the sidebar, and click New Flow. 
  3. From the drop-down Which Service should be used for authentication? menu, select Box and click Continue. This opens the Flow: New Flow screen.
  4. In the Name field, type a name for your flow (Example: Box – File Upload).
  5. Select Any user that can login with the selected identity service can run this flow from the Access drop-down menu.
  6. Select None from the Social feed for collaboration drop-down menu.
    screen-shot-2016-10-31-at-8-55-52-pm-minishadow
  7. Click Start Building! This opens the Canvas where we will build our flow.

Creating the page for file submission
  1. Drag a Page element from the sidebar, to the Canvas.
  2. In the Configuration Panel, copy-paste the text Upload your file in the Name field.
  3. Click New Page Layout. This opens a new tab called New Page. We will create the page here.
    screen-shot-2016-09-29-at-5-02-01-pm-minishadow
  4. Click the icon-ios7-gear-128gears icon on the right-hand-side. This opens the Settings screen for the page.
    screen-shot-2016-10-31-at-9-07-35-pm-minishadow
  5. Write File: Upload in the Name and Label fields and click Save.
    screen-shot-2016-10-31-at-9-10-50-pm-minishadow
  6. Click the Save icon the right-hand-side navigation to save the page.
Tip: You need to click the Save icon before anything gets saved on a Page. Keep saving your page as you work.

Configuring the input component for Name
  1. From the Input section in the sidebar, drag a Input component into Main container.
    screen-shot-2016-09-29-at-5-18-47-pm-minishadow
  2. This opens the Configuration Panel for the Page Component. Write Name in the Name and Label fields.
    screen-shot-2016-09-29-at-5-27-47-pm-minishadow
  3. Under Settings, check the boxes for Editable and Required.
  4. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  5. Under State, click Create a new Value.
  6. In the Value dialog box, copy-paste Box: Name of file in the Name field.
  7. Select String from the What kind of Value is this? menu and click Save.
  8. Click Save Component.
    screen-shot-2016-11-01-at-2-10-03-pm-minishadow
    This is what the File Upload screen looks like now:

Configuring the input component for phone number

We will repeat the same procedures as above to create a field for Phone.

  1. From the Input section in the sidebar, drag a Input component into Main container.
  2. This opens the Configuration Panel for the Page Component. Write Phone in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Required.
  4. Under Size, write 25 in the Size field and 255 in the Maximum Characters field.
  5. Under State, click Create a new Value.
  6. In the Value dialog box, copy-paste Box: User Phone in the Name field.
  7. Select String from the What kind of Value is this? menu and click Save.
  8. Click Save Component.

Configuring the file upload
  1. From the Data section in the sidebar, drag a File Upload component into Main container.
  2. This opens the Configuration Panel for the Page Component. Write File upload in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Required.
  4. Under Data Source, select Box.
  5. Under State, check the Save the whole section box, and click Create a new Value.
  6. In the Value dialog box, copy-paste Box: File Uploaded in the Name field.
  7. Select Object from the What kind of Value is this? menu.
  8. Select $File from the What Type of Value is this? menu and click Save.
    screen-shot-2016-09-29-at-6-54-53-pm-minishadow
  9. Click Save Component.  
  10. Click the Save icon on the right-hand-side navigation to save the page.
    screen-shot-2016-11-01-at-2-39-23-pm-minishadow
  11. Click the Box – File Upload tab.
  12. Click Save Page.
    screen-shot-2016-11-01-at-2-44-02-pm-minishadow

Creating the first outcome

A flow begins with the Start element, which is fixed on the canvas. The first outcome in the flow is the outcome of the Start element, which connects an arrow from Start, to the first element the builder places on the canvas.

Outcomes show how a flow progresses. The ‘Label’ text on outcomes gets converted into clickable buttons.

  1. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Start to Upload your file. This opens a Configuration Panel on the right-hand side.
  3. In the Configuration Panel, type Go in the Name text field and click Save Outcome.

That was fast!

You have just built an app that uploads files to Box. Congratulations!

This is what the canvas looks like now:

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around 45 minutes to build an app that can upload files to Box.

This is what the first screen of the app looks like on a browser:

We are using Box to authenticate users as well. Once the user has signed in, a simple screen lets her upload a file:

On your mobile, this is what the first screen looks like:

Once the user logs in, she can upload a file:


Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, Drawing Tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.