In this tutorial, you’ll learn how to build a jQM mobile app that uploads files to the Appery.io database.
Ionic 5 Tutorial: Uploading Multiple Files to Appery.io Database
We can recommend that you check our Uploading Multiple Files to Appery.io Database sample app created with Ionic 5 here!
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:
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 Passwordare both Placeholders.
- Password field type is set to password.
- Button name is changed to signInButton.
- To create a new database, go to https://appery.io/database/, or click the “Database” button.
- For the database name, enter FileDB, and click “Create”.
You’ll see the Collections tab:
- To create a new user, click “+Row” in the Users block.
- Enter the username and password:
Creating database REST services
- Click CREATE NEW > Database Services.
- Select the FileDB database:
- You need a
Login, so check that service. To upload files, you also need to check the
_files > Upload service.
- 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.
- Add the service to the page. Go to the DATA tab, and from the list, select
Service > FileDB_login_service, and click “Add”.
- Rename the service instance; set it to signInService.
- To map the service to the page, click “Mapping” for the
Before sendevent and map the components as follows:
- Switch to the
Before you invoke the service you’ve created, you need to add the service to the page:
sessionTokenshould be saved into storage. Go to 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.
- Now you can create the following mapping for the
Successevent 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:
In the Project view, click CREATE NEW > Page.
Call the screen Upload.
- Open the Login page.
- To invoke the service on button click, go to the DESIGN view, and open the EVENTS tab (bottom of the screen).
- Select the
signInButton > Click > Invoke Service > signInServiceand click “Save”.
Once you’ve successfully signed in, navigate to the Upload page.
- Go back to the DATA view and open the EVENTS tab.
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
alert ("Signin failed");
- Click “Save”.
- Test the app.
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 to upload_button. Also, change its Text property to Upload.
That’s all for the UI.
To upload files, you’ll need to map and invoke the
- Switch to the DATA view, add
FileDB__files_upload_service, and rename the service to uploadService:
- Click “Mapping” for the
Before sendevent and create the following mapping:
- Go back to theDESIGN view, and open the EVENTS tab.
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.
- Click “Save”.
- Switch to the DATA view, and add the following services:
alert("Your file was successfully uploaded");
alert("Error:" + errorThrown);
When the file is selected and uploaded to the browser:
Since the “Multiple” check box 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 to review the uploaded files:
Updated about 2 months ago