If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

The Upload File to Database plugin is a set of solutions you can use in your app to implement file uploading. For instance, you can take a picture with the camera and upload it to the database. Or, for another example, you take a picture with the camera, upload it to the database and then use it to send an MMS message via the Twilio API.

See Using the camera component for more about camera.

There are two files uploading approaches used in this plugin:

  • Upload files via Web API (this approaches uses only the browser API).
  • Upload files via Cordova file-transfer.

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

You can learn how to implement user authentication and registration with Appery.io here.

This plugin is configured out-of-the-box to work with the Appery.io database, but it can be modified to work with any other API provider that allows file upload. You will need to change the upload REST API and update any parameters.

Before you begin

  1. Tutorial level: intermediate.
  2. Prerequisites: An Appery.io account.

Creating an Appery.io app

1. Open Appery.io and click “Create new app,” enter any app name, and click “Create”.

Once the mobile editor loads, you’ll see a start page.

Importing the Upload File to Database plugin

1. To import the plugin, click CREATE NEW > From Plugin:
create_from_plugin

2. Check the box for the Upload File to Database plugin. Click “Import selected plug-ins”:import_plugin

Once the plugin is successfully installed, you will be asked to choose a start page and enter API keys. Select the check box and choose webupload as the start page:init_page

In the FileUpload_settings, you should provide your database ID and Master Key. Go to https://appery.io/database/ and open the database that will be used to store the files. Go to the Settings tab and copy the API Key:
api_key

Paste it to database_id in FileUpload_settings:
database_id

Also, copy the Master Key and paste it to the database_master_key:
settings

Under the hood

The plugin consists of two pages – cordovaupload and webupload:
pages

Using Cordova FileTransfer plugin

The cordovaupload uses the Cordova file-transfer plugin. Once the user takes a photo, its URI is stored into a local storage variable. Then, by clicking “Upload,” the CordovaFileUpload service will be invoked and it will upload the image to the Appery.io database. As this approach uses native API, the app has to run on the device or via the Appery.io Tester app.

Using Web API

The webupload page uses the browser FormData API to upload a file. If there is no image taken by the user, and the “Upload” button is clicked, a sample image will be uploaded to the database. This image is encoded to base64 string and stored to the image_base64 local storage variable. Image code is in SampleImageScript.js. This will work directly in the browser and also on the device. You can use this approach to test the app in the browser, which is faster than on the device without taking a picture each time.

Web API can be also used to upload images taken via the camera on the device. If the app is running on the device and there is an image taken by user, clicking “Upload” will upload the taken image (not the sample image) to the database.

Invoking Web API uploading function

In this plugin, you have everything working out-of-the-box, but here’s some basic instruction on how to invoke Web API to upload files:

By clicking “Upload” on the Web upload page, uploadBinaryHelper function is triggered. Here is how it looks:
event

The uploadBinaryHelper function is in the FileUploadHelper.js file. This function has 4 arguments:

  • datasource (required) – a common REST service with POST method to create a file in files collection. Its URL should be:
    REST service also contains the data parameter in the Request > Body tab:
    data_param
    You can create this REST manually or automatically import it performing CREATE NEW > Database Services > Select Database > _files > Create.
    Don’t forget to add the datasource on the DATA tab based on this REST service.
  • imageBase64Data (required) – a base64 string of the image.
  • name (optional) – name with which file will be stored. If empty, current date will be used as name.
  • type (optional) – image format as .jpg or .png if empty .jpg is used.

Invoke the function as following via JavaScript:

  • web_upload – name of the datasource based on Create REST service
  • Apperyio.storage.image_base64.get() – get the local storage variable with image_base64 name.