Ionic 5 Camera and File Upload Plug-ins App

Follow the steps of this tutorial to learn how to add the files and/or photos preview and upload functionality without using a line of code.

From this codeless tutorial, you can learn how to build an Ionic 5 app where you can use:
Part 1. File Upload service to select a file, preview it in the Image component and then upload it to the Appery.io database.
Part 2. Camera service to run the camera on your device, take a photo, preview it in the Image component and upload it to the Appery.io database.

👍

Important Pre-condition

First of all, create an Appery.io database(you are free to use an existing database) and name it myDB.
For this app, we will use the Master API Key of the created database that can be found under the Databases > Settings tab:

📘

API key

A database API key is always used when making requests to REST API. It is added as X-Appery-Database-Id header (can also be found in the browser address bar).

❗️

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.

Creating New App

  1. To create a new Ionic 5 app, under the Apps tab of the Appery.io platform, click the Create new app button.
  2. In the new window, provide the new app's name, for example, Ionic 5 File Upload App (or any other name you like), and confirm by clicking Create:
  1. After the App Builder loads, open Pages >Screen1 in the Project view tree, select Toolbar Title of the screen Header and change its Text property to File Upload App:
  1. Now, select the Page component from the breadcrumbs (you can also use the OUTLINE view to locate the needed component) and set the page Footer property to False as we will not use it in the app (you will also be asked to confirm changing the property):

Part 1. Adding File Upload Service

In this part, we will demonstrate how to add the Appery.io FileRead to your app that will enable the File Upload service used to upload files, preview them in the Image component and then upload them to the Appery.io database.

Adding File Select Option

  1. Drag & drop an Input component from PALETTE to the Content area of the Screen1 page and modify its properties as follows:
  • Type = File;
  • Color = medium;
  • Label > Text = Select file;
  • Label > Color = secondary:
*Input* component in *Mozilla Firefox**Input* component in *Mozilla Firefox*

Input component in Mozilla Firefox

That's it for the Input component.

🚧

Note!

In different browsers, page components might look slightly different. For example, if you work in Google Chrome you will notice that the predefined selection button text is Choose File, not Browse...:

*Input* component in *Google Chrome**Input* component in *Google Chrome*

Input component in Google Chrome

  1. In this step, you can already test your app: click the TEST button in the App Builder Toolbar to run the app in the preview and then click the Browse.../Choose File to select the needed file on your drive and the corresponding entry will be instantly shown:

But since we are working with a web app, the opened file cannot be read for preview without having a linked full path to it.
So, first of all, let's add the option of previewing files before they can be uploaded to the database.

Adding File Preview Option

  1. First of all, drag & drop an Image component from PALETTE to the screen:
  1. Now, go to the Project view tree and click CREATE NEW > From Plugin to select the FileRead plug-in from the preconfigured Appery.io plug-ins list.
  2. Then, enable the corresponding checkbox and confirm import:
  1. Now, let's open the page DATA panel and define the added service.
  2. First of all, add a datasource for the FileReadService. To do it, select FileReadService in the Add datasource dropdown, click Add:
  1. Rename the service, for example, to filePreviewSrv and click the corresponding button to edit the Before send mapping:
  1. In the mapping editor, map the Input1 object to the fileInput service request. And make sure that the resultFormat service request has the DataURL value:
**filePreviewSrv** **Before Send** mapping**filePreviewSrv** **Before Send** mapping

filePreviewSrv Before Send mapping

📘

resultFormat Values

The resultFormat service request values are to be specified to read different file formats:

  • String - to be used for reading text files;
  • ArrayBuffer and Blob- to be used if some further specific processing is needed;
  • FormData - to be used if we need to send it;
  • DataURL - to be used to show file in the picture;
  1. When done, click Save & Replace to go back to the datasource components and select the Success mapping of the filePreviewSrv service:
  1. Create the following mapping to allow previewing file on the screen and click Save & Replace:
**filePreviewSrv** **Success** mapping**filePreviewSrv** **Success** mapping

filePreviewSrv Success mapping

  1. To finish, we need to go back to the DESIGN panel and select the input to define its Change event: select the Invoke service action with indicating the filePreviewSrv datasource. Then click Save:
  1. It's time for testing how the preview option works:

Adding File Upload Option

Actually, when you have got a needed file, you would naturally like to store it in the Appery.io database that we created in the very beginning (in this case, it's myDB).

  1. So, first of all, let's add a button that will be used for activating the file upload service:
    Drag & drop a Button component from PALETTE to the Content area and modify its properties:
  • Component Name = uploadFileButton;
  • Text = Upload File;
  • Icon > Style = cloud-upload-outline (to open the icon selection window click the No icon button);
  • Icon > Color = Dark;
  • Icon > Slot = Icon Only:
  1. To upload files to the database, we will need to link this database by importing the corresponding service.
    To import the needed database service (here, upload) click CREATE NEW > Database Service, select the needed database from the list (here, myDB) select the upload option and confirm by clicking Import selected services:
  1. Two database services will be instantly imported into the Services folder under the App Builder Project view tree: myDB__files_upload_service and myDB_settings:

Since we are not planning to integrate any login functionality into this particular app, we will use the database X-Appery-Master-Key.

❗️

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. First, open the myDB_settings file, add the X_Appery_Master_Key parameter and define it with the X-Appery-Master-Key value of your database (can be found on the Databases > Settings page):
  1. Now, go to myDB__files_upload_service and edit its X-Appery-Session-Token request header name by replacing it with X-Appery-Master-Key.
  2. Now, provide the service X-Appery-Master-Key value as {myDB_settings.X_Appery_Master_Key}:

To be uploaded to the database, your files will need to be read again but their format should be different now since they are to be uploaded via the network.

  1. To arrange for that, let's create a new datasource, fileReadSrv: go to the Screen 1 DATA panel and add another FileReadSrv datasource by selecting it on the list and clicking Add, then name it to fileReadSrv:
  1. Click the Before send service mapping button to open the mapping editor and define it like the following (this is similar to what was done with the filePreviewSrv mapping here (Step 7) with the only difference in the resultFormat service request value: in this case, it's left to the default FormData value:
  1. To temporarily save data from the filePreviewSrv service and then pass it to the fileReadSrv service, a storage variable fileData of type Any under Project > Model and Storage> Storage should be created (for Storage, select Variable):
  1. Now, go back to the DATA panel, open the Success mapping editor of the fileReadSrv service, and define it as follows:
  1. Click Save & Replace to go back to the datasource components and add one more service; for the datasource, select myDB__files_upload_service and click Add:
  1. Now, rename the service to fileUploadSrv and define its Before send mapping as follows:
  1. Click Save & Replace, delete the Success mapping since it will not be used in the app, but let's add some success toasts instead.
  2. To add the toast indicating the successful file upload, click the arrow button next to the service Success event and select the Present toast action from the list. Then define the action like the following:
  • Message = Done!;
  • Color = success;
  • Position = middle;
  • Duration = 500:
  1. Similarly, add the Present toast action to the Error event to show an error message about an unsuccessful upload defined like this:
  • Message = Sorry, some error occurred;
  • Color = danger;
  • Position = middle;
  • Duration = 500:
  1. After the file is read, the upload service needs to be invoked, so, for the fileReadSrv service Success event, select the Invoke service action with the fileUploadSrv as its datasource:
  1. Finally, select the UPLOAD FILE button and for its Click event select the Invoke service action defined with the fileReadSrv service:

Here is how the DATA panel with all the events defined should look like (click Show all):

Now, when you have defined the service that can upload files to your database and doesn't need authentication, you can test the app in preview: select the file, preview it and then click the UPLOAD FILE button:

In a moment, you can open your database (here, it's myDB) to check its Files collection and make sure that a new file entry is already there (you may need to click the Refresh button to update the list):

Note that this app is specifically configured to preview certain image file types, but can be modified to be used for uploading (and previewing) other file formats.
For example, if you now try uploading a .pdf file, you will get the image error message in preview:

However, if you proceed with uploading it to the database and then go back to check the database Files collection (you may need to click the Refresh button to update the files list), the file will be there:

In the next section, we will demonstrate how you can add the camera service to the app/

Part 2. Adding Camera Service

In this part, we will demonstrate how to use a device camera and take photos from the app and then upload them to the database. For this, we will use the Appery.io Camera plug-in for Ionic 5 apps based on Cordova Camera Plug-in and Ionic Native Camera Plug-in.

Adding Take Photo and Preview Photo Options

  1. First of all, let's modify the app UI and add a button that will activate the camera service:
    Drag & drop a Button component from PALETTE to the Content area and modify its properties:
  • Component Name = takePhotoButton;
  • Text = Take Photo;
  • Icon > Style = camera-outline (to open the icon selection window click the No icon button);
  • Icon > Color = Dark;
  • Icon > Slot = Icon Only:
  1. We will also need another Button component to invoke the photo upload service, so let's add it from PALETTE and set its properties as follows:
  • Component Name = uploadPhotoButton;
  • Text = Upload Photo;
  • Icon > Style = cloud-upload-outline (to open the icon selection window click the No icon button);
  • Icon > Color = Dark;
  • Icon > Slot = Icon Only.
  1. To finish with the page UI, add one more Image component so, drag it from PALETTE and then drop it under the UPLOAD PHOTO button.
    When ready, the page should look like this:
  1. Now, let's add the camera service to the app: click Create New > From Plugin, locate the Camera plug-in, and import it into your app:

👍

You can now navigate to Project > App settings > Cordova plugins > Core Cordova plugins to make sure that the Camera Cordova plug-in is enabled.

  1. Open the Screen1 DATA panel. The first step is to add a datasource for the Camera service. Select Service > CameraService and click the Add button. Rename the datasource to takePhotoSrv:
  1. Switch to the DESIGN panel and unfold the EVENTS tab from the bottom, select the TAKE PHOTO button and, define its Click event with the Invoke service action; for the datasource, select takePhotoSrv from the drop-down list and save:
  1. Now, you can switch back to the page DATA panel and open the Before send mapping of the takePhotoSrv service to review the right mapping panel. Here, you can set up or edit different camera settings such as quality, camera direction, etc. To do it, click the Expand all link:
  1. Click Save & Replace to exit this view.

Adding Photo Upload Option

To save the photo file after the service processed it, we will need to create another variable.

  1. To do it, open Project > Model and Storage > Storage and add a storage variable fileURI of type String (for Storage, select Storage):
  1. Next, switch back to the Screen1 DATA panel, click the Success mapping button next to the takePhotoSrv service, create the following mapping and save:

Now, when we have the URI of the photo image, we need to read it before it can be uploaded to the database.

  1. To add this functionality, in the Screen1 DATA panel, select the FileReadService datasource and click Add, then rename the service to photoReadSrv:
  1. Open the mapping editor for the Before send event, create the following mapping and click Save & Replace:
  1. The service Success mapping should be defined as follows:

To add the photo upload functionality, we will invoke the same upload service used for uploading files.

  1. Click the arrow button next to Add of the photoReadSrv service Success and select Invoke service from the actions list:
  1. Define the event with the fileUploadSrv service and save:
  1. Finally, go to the DESIGN panel and select the UPLOAD PHOTO button.
  2. Then define its Click event with the Invoke service action; for the datasource, select photoReadSrv from the drop-down list and save:

Here is how the page EVENTS tab should look like with all the needed components defined (click the Show all button to see all events):

Don't forget to save your changes.
Congratulations! You are ready to test the app.

App Testing

To use the Cordova camera service, you need to run the app on the device.
You can, for example, export the app as an Android binary by clicking EXPORT > Binary (both iOS and Android options are available) in the top menu.
Once the build is completed, the file can be downloaded and you can also see a QR code:

You can now scan the QR code shown to install it on your device.

📘

App Export

Please check this section to learn more about app export.

When in the app, click the TAKE PHOTO button to start the Camera service but before you can use it, you will also need to allow taking pictures, recording videos, and accessing photos and media on your device:

Here is how the app should look like on your device:

The app in actionThe app in action

The app in action

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

Updated ***Files*** collectionUpdated ***Files*** collection

Updated Files collection

📘

You might also like this Appery.io Community video that shows how to create an Ionic 4 application using the Appery.io Take Photo and Upload into Appery.io Database plug-in:

📘

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: