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
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
- Tutorial level: intermediate.
- 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
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:
Under the hood
Using Cordova FileTransfer plugin
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
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:
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
filescollection. Its URL should be:
RESTservice also contains the
dataparameter in the
Request > Bodytab:
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
DATAtab 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
.png if empty
web_upload– name of the datasource based on
Apperyio.storage.image_base64.get()– get the local storage variable with