Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Tutorial: Uploading an Image from the Device Camera

Tutorial: Uploading an Image from the Device Camera

After you have learned the basics of using Files in Getting Started with Files you can proceed with integrating Files in your hybrid app.

In this article you will learn how to capture an image using the device camera and then upload it as a cloud file.

Steps at a glance:

  1. Create a Hybrid App
  2. Add the JavaScript SDK to the Project
  3. Initialize the JavaScript SDK
  4. Define the Upload Function
  5. Configure the Device Camera
  6. Capture the Photo and Upload It

Prerequisites

  • A Telerik Platform account.
  • The App ID for your Telerik Platform app. You can access it from Settings.
  • The Data service enabled.

Create a Hybrid App

After preparing your files in the portal, you are ready to integrate them in your app. Begin this tutorial by creating a Hybrid Telerik Platform app. Click the Create app button, select Cordova Hybrid, give the app a name, and finally click Create App.

Add the JavaScript SDK to the Project

In the AppBuilder window, include the following script resource in your index.html file immediately after the cordova.js reference.

<script src="https://bs-static.cdn.telerik.com/latest/everlive.all.min.js">

You can learn about other ways to install and access the SDK in your project from JavaScript SDK.

Initialize the JavaScript SDK

The first step is to initialize the Everlive instance. Include this snippet in the onDeviceReady handler in js/index.js right after the navigator.splashscreen.hide(); call. Don't forget to substitute your app's App ID for the placeholder.

var everliveAppId = "your-app-id";
var everliveScheme = 'https';

var everlive = new Everlive({
    appId: everliveAppId,
    scheme: everliveScheme
});

Define the Upload Function

Next, you need a function to upload the captured image.

The onPictureSuccess function from the following snippet receives the image file from the device camera, generates a random file name for it, and then uploads it to Files using the everlive.Files.create method from the JavaScript SDK.

function onPictureSuccess(imageData) {
    var file = {
        Filename: Math.random().toString(36).substring(2, 15) + ".jpg",
        ContentType: "image/jpeg",
        base64: imageData,
    };

    everlive.Files.create(file, function(response) {
        var fileUri = response.result.Uri;

        var imgEl = document.createElement("img");
        imgEl.setAttribute('src', fileUri);
        imgEl.style.position = "absolute";
        document.body.appendChild(imgEl);
    }, function(err) {
        navigator.notification.alert("Unfortunately the upload failed: " + err.message);
    });
};

You also need a function that handles the case where the picture can't be obtained from the device camera. This example simply displays an on-screen message to notify the user about the error:

function onPictureError() {
    navigator.notification.alert("Unfortunately we were not able to retrieve the image");
};

Configure the Device Camera

Before capturing the image, you need to configure the device camera output. The following object requests a 400 by 300 px output resolution and base64 encoding:

var cameraConfig = {
    destinationType: Camera.DestinationType.DATA_URL,
    targetWidth: 400,
    targetHeight: 300
};

Capture the Photo and Upload It

The final step is to combine all of the above in a single call. The getPicture method takes a picture using the camera settings you specified above and then uploads the file to Files:

navigator.camera.getPicture(onPictureSuccess, onPictureError, cameraConfig);

See Also

Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.