If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to build a mobile app that uploads files to the Appery.io database.

It’ll be an HTML5 app that uses a browser File API (different from the Appery.io Database File API). The File API is supported by most desktop browsers. However, if you want to run this app in a mobile browser, you’ll need to install the Firefox Mobile or Opera Mobile browser.

You can find more information about which browsers support the File API via the link.

The app will look like:

Before you begin

  • Tutorial level: advanced.
  • Prerequisites: complete at least 1 beginner and 1 other advanced tutorial.

Creating new app

Create a new app; from the Apps page, enter UploadingFilesApp for the name and click “Create”.

Building the sign in page

File upload functionality requires a user to be signed in. User management features are built into the Appery.io database, so it’s easy to implement.

Rename the default first page to Login and build the following page:

The Input fields are named username and password.

  • Name and Password are both Placeholders.
  • Password field type is set to password.
  • Button name is changed to signInButton.

Creating a new database & user

1. To create a new database, go to https://appery.io/database/, or click the “Database” button.

2. For the database name, enter FileDB, and click “Create”.

You’ll see the Collections tab:

3. To create a new user, click “+Row” in the Users block.

4. Enter the username and password:

You can create as many users as you want.

It’s also possible to create users via a REST API, but in this tutorial, you’ll manually enter a user directly into the database.

Signing in the user

Creating database REST services

1. Click CREATE NEW > Database Services.

2. Select the FileDB database:

3. You need a Login, so check that service. To upload files, you also need to check the  _files >Upload service.

4. Click “Import selected services.”

Next, you’ll need to add the login service to the page and map it. If you open the service, you will see that the URL, request and response parameters are all defined.

Mapping the service to the page

1. Add the service to the page. Go to the DATA tab, and from the list, select Service > FileDB_login_service, and click “Add”.

2. Rename the service instance; set it to signInService.

3. To map the service to the page, click “Mapping” for Before send event and map the components as follows:

4. Save.

5. Switch to Success mapping.

Before you invoke the service you’ve created, you need to add the service to the page:

6. The sessionToken should be saved into storage. Project > Model and Storage and open the Storage tab. For the new storage variable name enter token, and click “Add”. The variable will be shown under “Storage”.

7. Now you can create the following mapping for Success event  and save:

Invoke the service to sign in the user, and navigate to a page where you can upload an image. To create the second page:

  1. In Project view, CREATE NEW > Page.
  2. Call the screen Upload.

Invoking the service

  1. Open the Login page.
  2. To invoke the service on button click, go to the DESIGN tab, and open the EVENTS view (bottom of the screen).
  3. Select the signInButton > Click > Invoke Service > signInService and click “Save”.

Once you’ve successfully signed in, navigate to the Upload page.

  1. Go back to the DATA tab, open EVENTS view.
  2. Select signInService > Success > Navigate To Page > Upload page.
  3. Click “Save”.

Add some basic error checking (in case the sign-in failed):

  1. For the signInService, add an error event.
  2. Add the action Run JavaScript, and then enter:
  3. Click “Save”.
  4. Test the app.

Building the upload page

The Upload page will contain the following UI:

Add an Input component to the page, and name it file_input. Also, change the Type property to file and check the newly-appeared option, Multiple:

Place the Button under the Input component, and name it upload_button. Also, change its Text property to Upload.

That’s all for the UI.

Uploading files

To upload files, you’ll need to map and invoke the FileDB__files_upload_service:

1. Switch to DATA view, add FileDB__files_upload_service, and rename the service to uploadService:UploadService

2. Click “Mapping” for Before send event and create the following mapping:BSUploadMapping

3. Go back to DESIGN view, and open the EVENTS tab.

4. Select upload_button > Click > Run JavaScript.

Add the following JavaScript:

Where: uploadMultipleFilesHelper is the native Appery.io function that helps to upload files. It takes two parameters: service name, which will upload the files and input – the component that can be obtained by invoking the Appery.io function.

5. Click “Save”.

6. Switch to DATA view, and add the following services:

  • uploadService > Success > Run JavaScript > add the following:
  • uploadService > Error > Run JavaScript > add the following:

Testing the app

When the file is selected and uploaded to the browser:

Since the “Multiple” checkbox is checked in the Input properties panel, you can choose multiple files at once:

When you click “Upload”  in your app you can see the message “Your file was successfully uploaded”.

Now you can navigate to the Files tab in the app database and see the uploaded files: