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.
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.
Input fields are named
Passwordfield type is set to
Buttonname is changed to
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”.
3. To create a new user, click “+Row” in the
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
CREATE NEW > Database Services.
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,
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
5. Switch to
Before you invoke the service you’ve created, you need to add the service to the page:
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”.
Invoke the service to sign in the user, and navigate to a page where you can upload an image. To create the second page:
CREATE NEW > Page.
- Call the screen
Invoking the service
- Open the
- To invoke the service on button click, go to the
DESIGNtab, and open the
EVENTSview (bottom of the screen).
- Select the
signInButton > Click > Invoke Service > signInServiceand click “Save”.
Once you’ve successfully signed in, navigate to the
- Go back to the
signInService > Success > Navigate To Page > Uploadpage.
- Click “Save”.
Add some basic error checking (in case the sign-in failed):
- For the
signInService, add an
- Add the action
1alert ("Signin failed");
- Click “Save”.
- Test the app.
Building the upload page
Button under the
Input component, and name it
upload_button. Also, change its
Text property to
That’s all for the UI.
To upload files, you’ll need to map and invoke the
3. Go back to
DESIGN view, and open the
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:
1alert("Your file was successfully uploaded");
1alert("Error:" + errorThrown);
Testing the app
When you click “Upload” in your app you can see the message “Your file was successfully uploaded”.