JQM: Uploading multiple files to the Appery.io database

🚧

Important Note!

The option of creating new apps with the jQuery Mobile framework was removed but we still support the projects that were created with it earlier.

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

👍

Ionic 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 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 this:

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 Passwordare 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:

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 the Before send event and map the components as follows:

4. Save.
5. Switch to the 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. 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.
7. Now you can create the following mapping for the 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:

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

Invoking the service

1. Open the Login page.
2. To invoke the service on button click, go to the DESIGN view, and open the EVENTS tab (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 view and open the EVENTS tab.
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:

alert ("Signin failed");

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 to 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 the DATA view, add FileDB__files_upload_service, and rename the service to uploadService:

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

3. Go back to theDESIGN view, and open the EVENTS tab.
4. Select upload_button > Click > Run JavaScript.

Add the following JavaScript:

uploadMultipleFilesHelper(uploadService, Apperyio('file_input'));

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 the DATA view, and add the following services:

uploadService > Success > Run JavaScript > add the following:

alert("Your file was successfully uploaded");

uploadService > Error > Run JavaScript > add the following:

alert("Error:" + errorThrown);

Testing the app

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: