Picture Upload Sample jQM App

Sample jQuery Mobile app to upload a picture or a file to the database.


We highly recommend considering Ionic 5 for creating your new projects: Ionic 5 apps generally perform and look better than jQuery Mobile hybrid apps but would like you to know that Appery.io still supports the JQuery Mobile framework as it is considered to be a very simple framework and is still used by many developers.


The Picture Upload App shows how to upload a file or a picture taken with the camera to the Appery.io Database.

Sample app to upload a picture or a file to a database.Sample app to upload a picture or a file to a database.

Sample app to upload a picture or a file to a database.

This sample app shows the following features:

  • jQuery Mobile UI.
  • Database.
  • Two files uploading approaches used:
    • Upload files via Web API (this approach uses only the browser API).
    • Upload files via Cordova FileTransfer plugin.

The database requires a sessionToken for uploading files to the database. To make the sample app simpler to use, it uses the Master Key. So, to configure this app, you should provide the ID of the database that will be used to store files and Master Key instead of sessionToken.

Getting the App

First, you are going to get the app. The app is available as a plugin.

  1. Go to the Apps tab.
  2. Click the Create new app button.
  3. Select jQuery Mobile tab, then select the Blank template. Name the app: Register and click the Create button.
  4. When the visual App Builder loads, click CREATE NEW > From Plugin.
  5. Under Appery.io Examples, select Picture Upload to Database App.
  6. Click Import select plugins.
  7. On the next screen, click Apply settings button to finish importing the plugin.

Before configuring the app you need to create or use an existing database.

Database Setup

You can create a new database or use an existing database. The actual files will be uploaded to the default Files collection.

In the database, go to the Settings page. There, you will see the API key (database ID) and the Master Key. You will use both values in the next step.

Connecting the App with the Database

You are going to configure the app services to use the database.

  1. Inside the App Builder, open Services > FileUpload_settings.
  2. Here, set the database ID and the Master Key values.
  3. Save all the changes.

That's all the setup you need to do.

Testing the App

You are ready to test the app.

The page (webupload) that uses the Web API will work directly in the browser. You can select a picture or a file from your computer/device and upload it.

To use Cordova upload (cordovaupload), you need to run the app on the device.

Once you upload a picture or a file, head to the database and open the Files collection. There you should see the file you uploaded.


The little things you should know.

File Upload Name

By default, the upload logic doesn’t change the original file name. However, Appery.io Database has some restrictions to file names. The valid file name should contain only a-zA-Z0-9%.- characters, and file name length is limited to 218 characters. If the file contains an invalid character such as space, you should replace spaces with a character such as **** before uploading the file.

Did this page help you?