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 the Box service to authenticate end-users of the app as well.

Let’s say, Mr. Lucius Fox of Bart Mobile wants his team to be able to upload files containing schematics from their mobile devices, to an online file sharing and content management service. We can build a Flow app for this in less than an hour! This app can in turn, be embedded in any application, or built upon to represent a whole process that may include things like collaborative working.

Here is a link to the finished app. The app lets you log in with your Box credentials, to upload a file in your Box account.

If you like, you can also download a package of the flow, import it to your tenant, and see how the app works for yourself.

Let’s get building!

This is what your canvas will look like, once you are done:

What you will need:

  1. Boomi Flow username/password. (Please click here to request a free Boomi Flow account.)
  2. Box username 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.)

Let’s get building!
  1. Click LOG IN to log in to the drawing tool.
  2. Let’s create a new flow with Box as the service used for authentication.
  3. Let’s call the flow Box – File Upload. Select Any user that can login with the selected identity service can run this flow as the option for Access. Click Start Building.

Creating the page for file submission
  1. We will create a new page called Upload your file. Drag a Page to the canvas.

    This opens a configuration panel.
  2. Copy-paste the text Upload your file in the Name field.
  3. Click New Page Layout. This opens a new tab called New Page.
  4. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  5. Copy-paste File: Upload in the Name and Label fields and click Save.
  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. Drag an Input component to the Main container.
    This opens a configuration panel.
  2. Write Name in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Required.
  4. The Size should be 25 and Maximum Characters will be 255.
  5. Scroll down to State. The Save the whole selection option should be checked. Click Select or create a new Value.
  6. We will create a String value called Box: Name of file.
  7. Click Save Component.

    This is what the 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. Drag an Input component to the Main container.
  2. Under Settings, check the boxes for Editable and Required.
  3. The Size should be 25 and Maximum Characters will be 255.
  4. Click Select or create a new Value.
  5. We will create a String value called Box: User Phone.

  6. Click Save Component.

Configuring the File Upload component
  1. Drag a File Upload component into the Main container.
  2. Write File upload in the Name and Label fields.
  3. Under Settings, check the boxes for Editable and Required.
  4. Select Box as the Service to load the Files from.
  5. The Save the whole section box should be checked.
  6. Click Select or create a new Value.
  7. Click Create a new Value.
  8. Copy-paste Box: File Uploaded in the Name field.
  9. Select Object from the What kind of Value is this? menu.
  10. Select $File from the What Type of Value is this? menu.
  11. Click Save.
  12. Click Save Component.
  13. Click the Save icon on the right-hand-side navigation to save the page.
  14. Let’s go back to the flow now.
  15. Click Save Page.
  16. Create an outcome from Start to the Upload your file page called Go.

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: