Tutorial: Uploading an Image from the Gallery

Tutorial: Uploading an Image from the Device Gallery

In this article, you will learn how to use the SDK methods to upload an image file to Telerik Platform, then acquire its download URL from Telerik Platform and finally display it on the device's screen.

The examples in this section assume that you are in the context of an Android App and that you have basic familiarity with native Android development.

Steps at a glance:

  1. Download and Add the SDK to Your Project
  2. Declare the Required Permissions for the App
  3. Initialize the Everlive Instance
  4. Prepare the App UI
  5. Add a Method for Uploading a File
  6. Prepare the File for Upload
  7. Add an Image Picker to the App
  8. Handle the Picked Image
  9. Add a Task for Uploading and Displaying the Image
  10. Run the App

Prerequisites

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

Download and Add the SDK to Your Project

  1. Log in to your Telerik Platform account and click Getting Started > Downloads in the top right corner.
  2. Under Download SDKs & Tools click Backend Services to see a list of available downloads.
  3. Follow the instructions on the page to download a ZIP archive containing the Android SDK to your local machine.

    Downloads overview image

  4. Unzip the archive, copy the .jar SDK file to your project and add it as a library.

  5. Add the following statements to import the required namespaces from the SDK:
import com.telerik.everlive.sdk.core.EverliveApp;
import com.telerik.everlive.sdk.core.EverliveAppSettings;
import com.telerik.everlive.sdk.core.query.definition.FileField;
import com.telerik.everlive.sdk.core.result.RequestResult;

Declare the Required Permissions for the App

Reading an image from the device gallery and uploading it in the cloud requires the READ_EXTERNAL_STORAGE and INTERNET permissions.

To request the necessary permissions, add the following declarations in you app's AndroidManifest.xml just before the <application> opening tag:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Initialize the Everlive Instance

The Everlive object connects the client app to a Telerik Platform app. To initialize it and to specify your App ID value, add these literals as static fields of your activity class:

private static final String APP_ID = "your-app-id";

private static EverliveAppSettings everliveAppSettings;
private static EverliveApp everliveApp;

Then initialize the Everlive instance in the onCreate method of the activity by adding the following lines:

everliveAppSettings = new EverliveAppSettings();
everliveAppSettings.setAppId(APP_ID);
everliveAppSettings.setUseHttps(true); //set to false or delete to use HTTP

everliveApp = new EverliveApp(everliveAppSettings);

Prepare the App UI

After configuring the project it is time to build a simple UI for your app. The following Extensible Markup Language (XML) markup creates a couple of controls in the layout—a Button and an ImageView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ImageView android:id="@+id/imageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"></ImageView>
    <Button android:id="@+id/buttonPickImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Pick an Image" android:layout_gravity="center"></Button>
</LinearLayout>

Add a Method for Uploading a File

After setting up the UI, your next step is implementing the UploadFile method that uses the upload SDK method for uploading a file from a binary stream to Telerik Platform.

Add the following private method to your activity class:

private RequestResult UploadFile(EverliveApp app, FileField fileField) {
    return app.workWith().files().upload(fileField).executeSync();
}

Prepare the File for Upload

Before you can upload a file, you need to set a number of file properties such as content type and file name.

Add the following utility method to your activity to set the file properties and prepare the file for upload to Telerik Platform:

private FileField getFileField(Uri uri) throws FileNotFoundException{
    String fileName = new File(uri.getPath().toString()).getName();
    String fileContentType = getContentResolver().getType(uri);
    InputStream imageStream = null;
    try {
        imageStream = getApplicationContext().getContentResolver().openInputStream(uri);
    } catch (FileNotFoundException e) {
        throw new FileNotFoundException(e.toString());
    }

    // prepare the file for upload
    FileField fileField = new FileField();
    fileField.setContentType(fileContentType);
    fileField.setInputStream(imageStream);
    fileField.setFileName(fileName);

    return fileField;
}

Add an Image Picker to the App

Before you can upload an image, you need to acquire it. The following OnCreate event handler uses an intent (pickImageIntent) that allows the user to pick an image from the image gallery.

First, add the following literal as an activity class field:

private static final int LOAD_IMAGE_SUCCESS_RESULT = 1;

Then add the following lines in the OnCreate event handler:

Button buttonPickImage = (Button) findViewById(R.id.buttonPickImage);
buttonPickImage.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View arg0) {
        Intent pickImageIntent = new Intent(
                Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

        startActivityForResult(pickImageIntent, LOAD_IMAGE_SUCCESS_RESULT);
    }
});

When the activity completes, the onActivityResult event handler is called. You will add a body to it in the next step.

Handle the Picked Image

To set the image to be uploaded when you receive the result from pickImageIntent, override the activity's onActivityResult method to call the UploadImageTask method (to be defined in the next step):

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == LOAD_IMAGE_SUCCESS_RESULT && resultCode == RESULT_OK && null != data) {
        Uri selectedImageUri = data.getData();
        new UploadImageTask().execute(selectedImageUri);
    }
}

Add a Task for Uploading and Displaying the Image

Now you need to upload and then display the image on the device.

Add the following UploadImageTask class to your activity. It saves the file in Telerik Platform using a background thread and once that completes, it gets the image URI from the returned metadata and displays the uploaded image in the ImageView element.

For the purposes of this getting started article add the following task in the same file as the activity.

public class UploadImageTask extends AsyncTask<Uri, Void, Bitmap> {

    @Override
    protected Bitmap doInBackground(Uri... uris) {
        Uri fileUri = uris[0];
        Bitmap image = null;
        FileField fileField = null;
        try {
            fileField = getFileField(fileUri);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }

        RequestResult imageUploadResult = UploadFile(everliveApp, fileField);

        if (imageUploadResult.getSuccess()) {
            ArrayList<com.telerik.everlive.sdk.core.model.system.File> imageUploadResultValue;
            imageUploadResultValue = (ArrayList<com.telerik.everlive.sdk.core.model.system.File>)  imageUploadResult.getValue();
            com.telerik.everlive.sdk.core.model.system.File uploadedFile = imageUploadResultValue.get(0);
            String uploadedFileUri = uploadedFile.getUri();

            try {
                image = BitmapFactory.decodeStream((InputStream) new URL(uploadedFileUri).getContent());
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        } else {
            // handle the error here
        }

        try {
            fileField.getInputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return image;
    }

    @Override
    protected void onPostExecute(Bitmap image) {
        ImageView imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setImageBitmap(image);
    }
}

Run the App

Now you are ready to run the app on a physical device on in your preferred emulator.

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