Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    Latest Updates

Picture Upload Sample App

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

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.

This sample app shows the following features:

  • jQuery Mobile UI.
  • Database.
  • Two files uploading approaches used:
    • Upload files via Web API (this approaches 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 Apps tab.
  2. Click Create new app button.
  3. Select jQuery Mobile tab, then select 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 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 you computer/device and upload it.

To use Cordova upload (cordovaupload), you need to run the app on the device. A very quick and simple way to run the app on the device is to use the Appery.io Tester App.

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.

Quirks

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 restriction to file names. 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.