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    

Ionic 4 Camera Upload Tutorial

In this tutorial, we will show how to build an Ionic 4 app where you can use the Camera service to run a camera on your device, take a photo, preview this photo in the image component on screen and upload it to Appery.io database.

Important pre-condition

First of all, create an Appery.io database and name it photoDb.

Creating New App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 Blank as the application type, enter an app name, and click Create.

Part 1. Adding Camera Service

In this part, we will demonstrate how to use device camera and take photos from the app. For this, we will use Appery.io Camera Plugin for Ionic4 apps based on Cordova Camera Plugin and Ionic Native Camera Plugin.

  1. Click Create New > From Plugin, locate the Camera plugin and import it into your app:
Importing **Camera** plugin

Importing Camera plugin

You can navigate to Project > App settings > Cordova plugins > Core Cordova plugins to make sure that the Camera Cordova plugin is enabled.

  1. Open Pages > Screen1. Select Toolbar Title of the screen header and change its Text property to Photo App.
  2. Drag & drop a Button component from PALETTE to the Toolbar Buttons area and modify its properties:
    1) Component Name = takePhotoButton
    2) Color = primary
    3) Icon.Slot = Icon Only
    4) Icon.Style = camera
    5) Text = empty:
Screen1

Screen1

  1. Open the Screen1 DATA tab. The first step is to add a datasource for the Camera service. Select Service > CameraService and click the Add button. Rename the datasource to getPhoto.
  2. Now, you can open the Before send mapping and look at the right mapping panel. Here. you can set up or edit different camera settings such as quality, camera direction, etc.:
Camera plugin settings

Camera plugin settings

  1. Go back to the DESIGN tab, select takePhotoButton, open the EVENTS panel and save a Click event with the invoke service action for the getPhoto datasource:
**takePhotoButton** event

takePhotoButton event

Congratulations! You are ready to test the app.
To use the Cordova camera service, you need to run the app on the device.
So, first of all, export the app and install it on your device.
Once you click the Take Photo button, the camera service starts allowing you to take a photo but before you can use the service, you will also need to allow taking photos, recording videos and accessing photos, media, and files on your device.

Part 2. Adding Photo Preview Option

After having taken a photo you will definitely want to check if it looks good. So, to make it possible, let's add the photo preview option to our app.

  1. Add an Image component to the screen. Set its Class property with ionic native class ion-hide to hide the component until we get a photo.
  2. Open the DATA tab, click on the Mapping button for the Success event of the getPhoto service (or open it under the EVENTS panel).
  3. Map fileSrc from service response to the Src property of the Image component:
  1. To show the image, we also need to map fileSrc from service response to the Class property of the Image component. To do it, click the TS button next to the Class property and add a short TS code to the editor window: return {'ion-hide': !value};:
Adding TS code

Adding TS code

This will show our image if the photo is taken successfully and will keep it hidden if it isn't.
Don't forget to save your changes.

Now, if you build an app .apk or .ipa and install it to your device, you will be able to not only take a photo but also view the result on the screen of your device.

Part 3. Defining File Upload to Appery.io DB

Actually, when we have got a nice photo on our device we would naturally like to store it in the Appery.io database that we created in the very beginning. For this, we will use Appery.io File Read Plugin for Ionic4 apps based on Cordova File Plugin and Appery.io Database API .

Important Security Issue

Please be informed that using the database X-Appery-Master-Key can be insecure as it gives full access to the database, so it is recommended that you use X-Appery-Session-Token instead if you need to add extra protection to your data.

  1. Click Create New > From Plugin, locate the File Read plugin and import it into your app.

You can navigate to Project > App settings > Cordova plugins > Core Cordova plugins to make sure that the File Cordova plugin is enabled.

  1. Click Create New > Database Service and import the Upload service for the photoDb _files collection.
Creating DB service

Creating DB service

The service will be instantly imported into the Services folder under the App Builder Project view.

  1. Open the photoDb__files_upload_service asset from the Project tree.
  2. Edit the service Request Headers: remove the X-Appery-Session-Token header and add X-Appery-Master-Key header.
  3. Set the Master Key value ( it can found on the database Settings page):
Locating the database Master API key

Locating the database Master API key

Now, you have the service that can upload files to your database and doesn't need authentication.

  1. Open the Screen1 DESIGN tab. Add one more Button from PALETTE and set up its properties:
    1) Class = ion-hide
    2) Color = primary
    3) Component Name = uploadPhotoButton
    4) Expand = Full
    5) Icon.Style = cloud-upload
    6) Icon.Slot = Start
    7) Text = I like it! Lets save it!:
Defining **uploadPhotoButton**

Defining uploadPhotoButton

  1. Open the CODE tab. Add 2 variables: imageURI of String type and tempData of type Any:
Adding variables

Adding variables

  1. Open the DATA tab. Edit Success Mapping for the getPhoto datasource. Map the imageURI service response to the imageURI variable and the fileSrc service response to uploadPhotoButton Class property. Then add the following TS code that will remove the ion-hide class when we get a photo: return {'ion-hide': !value};. Save the changes:
**Success Mapping** for the  **getPhoto** datasource

Success Mapping for the getPhoto datasource

  1. Now let's add a datasource for the FileReadService. To do it, select FileReadService in the Add datasource dropdown, click Add and rename it to readFile.
    At first, you need to edit the Before send mapping and map the imageURI variable to filePath service request. And make sure that the resultFormat service request has the default FormData value:
**Before Send Mapping** for the  **readFile** datasource

Before Send Mapping for the readFile datasource

  1. Then go to the Success mapping of the readFile datasource and map service response data to the tempData variable. This will read photos from the device's file system and create a formdata object that is ready to be uploaded to the database:
**Success Mapping** for the  **readFile** datasource

Success Mapping for the readFile datasource

  1. Next, you need to add another datasource for the upload service. Select photoDb__files_upload_service in the Add datasource dropdown and click Add. Rename the datasource to uploadFile:

Edit its Before send mapping and map the tempData variable to data service request.

**Before Send Mapping** for the  **uploadFile** datasource

Before Send Mapping for the uploadFile datasource

As we need to start uploading right after reading files from the file system, we should add an Invoke uploadFile service action to the Success event of the readFile datasource:

Adding **Invoke uploadFile service** action

Adding Invoke uploadFile service action

Almost done, just a couple of finishing touches left.

Reading files and uploading them to the database can take time, so let's add a loader just to show that loading is in progress.

  1. We start reading files from the Before send event of the readFile service. So, click the Add button next to it and select Present loading for action.
  2. Review the EVENTS panel: there are some settings for it and we can change them. Select Spinner and select crescent, for Message, type uploading awesome photo, and enable Show Backdrop. Don't forget to save your work.
Defining **Present loading** action

Defining Present loading action

  1. We also need to hide this loader when everything is done or in case of some error. So, add the Dismiss loading action to the readFile Error event and both uploadFile Success and *uploadFile Error events one by one:
Defining **Dismiss loading** action

Defining Dismiss loading action

  1. The last step is to add the Invoke readFile service action to the uploadPhotoButton click event. To do it, open the DESIGN tab, select uploadPhotoButton, expand the EVENTS panel and add this action.
    When done, the datasource panel should look like this:
Datasources defined

Datasources defined

Testing App

The app is finally done and you can test it now: build its .apk or .ipa and install it to your device, take a nice photo and upload it to the database.
Here is how the app should look like on your device:

The app in action

The app in action

In a couple of moments, when you check the Files collection of the photoDB database, you will see that that the photo entry is already there:

Updated ***Files*** collection

Updated Files collection

You can also check this Appery.io community video that shows how to add a camera service to mobile application in an Ionic 4 app.

Updated 3 days ago

Ionic 4 Camera Upload Tutorial


In this tutorial, we will show how to build an Ionic 4 app where you can use the Camera service to run a camera on your device, take a photo, preview this photo in the image component on screen and upload it to Appery.io database.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.