CloudBoost Android File upload and download

images

What is CloudBoost

CloudBoost is a Database as a Service.  CloudBoost’s primary service is a complete database which provides an API that allows developers to store, query, search, and have real-time data on multiple clients.
CloudBoost is increasingly becoming popular among developers; partly because of the inherent power that it avails to developers and partly because Facebook announced that its own mobile Backend as a Service in the name of Parse will be closing business in early 2017. 

With all this, its only wise for a forward looking developer to equip themselves with the CloudBoost ecosystem.
This is first in a series of Android tutorials I will be writing to share what I have done with cloudboost. If you have areas that you would like to see me cover in this series, don’t hesitate to email me. For further reference about CloudBoost, headover to the documentation page.

CloudBoost-ImageUpload-Android

In this tutorial, we are going to create a simple android app that does 5 things:

  • Picks an image from the phone gallery
  • Uploads this image to CloudBoost
  • Downloads the image from the cloudboost
  • saves the downloaded image to internal storage
  • fetches the image from internal storage and shows it in an imageview

Tools used

  • eclipse indigo 3.7 with ADT 23.0.6
  • CloudBoost JavaSDK
  • okhttp-2.4.0
  • okhttp-ws-2.4.0
  • okio-1.4
  • socket.io client for java

All the jars listed above are available to you in the libs folder when you clone the JavaSDK. Please head over to github to do so.

Create the app

Create a new android application in eclipse: File–new–android application project, call it CloudBoostImageApp.
We want a simple interface so that we focus on the core 5 items listed above, so lets take a look at our main activity screen and understand the different views used.

  1. This is just a TextView with static text declared in the activity_main.xml to act as the heading for our app.
  2. This is an empty ImageView area. When we pick our image from internal storage in item 5 of our specs, we shall set it to appear in this area.
  3. Another TextView, but this time its not static. We set text to it according to what stage we are at. At the beginning, it indicates “no image selected”, when you have selected an image from gallery, its text changes to the URL of the selected file on the local file system. When you successfully upload the image to CloudBoost, its text changes to the URL of the image on cloudboost. We may also use it to show any error messages.
  4. Clicking this button calls the fetchImage() method which creates an intent to open the gallery so that the user can select an image of his choice, after selecting, we are brought back to this screen.
  5. Clicking this button uploads the image selected to cloudboost.
  6. Clicking this button downloads the uploaded image from cloudboost, and sets it to area #2 which contains an ImageView.

activity_main.xml

<xml version="1.0"
encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Upload and download image" />
<ImageView
    android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
<TextView
    android:id="@+id/info"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="no image selected" />
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="fetchImage"
    android:text="pick image" />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="uploadImage"
    android:text="Upload image" />
</LinearLayout>
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="downloadImage"
    android:text="Download from cloudboost" />
</LinearLayout>

Lets take a look at the layout xml that gives rise to this screen.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    CloudApp.init("bengi123", "mLiJB380x9fhPRCjCGmGRg==");
    setContentView(R.layout.activity_main);
    info=(TextView)
    findViewById(R.id.info);
    image=(ImageView);
    findViewById(R.id.image);
}

It’s pretty self explanatory, so we shall look at the MainActivity.java class.

MainActivity

In the onCreate method, we have to initialize our CloudApp with app_id and client_key, otherwise the SDk will tell use “app_id not found”:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    CloudApp.init("bengi123", "mLiJB380x9fhPRCjCGmGRg==");
    setContentView(R.layout.activity_main);
    info=(TextView)
    findViewById(R.id.info);
    image=(ImageView);
    findViewById(R.id.image);
}

Please replace the app_id and client_key with your own from the dashboard.
Fetching Image from gallery

 

This stage needs 2 methods, namely:

public void fetchImage(View view) {
    // Create intent to Open Image applications 
    //like Gallery, Google Photos
    Intent galleryIntent = new Intent(Intent.ACTION_PICK,
	  android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    // Start the Intent
    startActivityForResult(galleryIntent,RESULT_LOAD_IMG);
}

This method creates an intent to select an image in the gallery and calls startActivityForResult.

When the selection is completed, onActivityResult is called, so you have to override it as well

@Override
protected void onActivityResult(int requestCode, int resultCode, 
        Intent data) {
	super.onActivityResult(requestCode,resultCode, data);
    if (requestCode == RESULT_LOAD_IMG&&resultCode== RESULT_OK
	    &&null != data) {
            Bitmap bitmap = getImageFromPath(data.getData());
            Log.d("ACTIVITRESULT", "bitmap:" + bitmap);
            imageFile =bitmapToFile(bitmap, "cloudboostimage");
            if (imageFile != null) {
                info.setText(imageFile.getPath());
            }
            else
                Toast.makeText(this, "Failed to get image",
			      Toast.LENGTH_SHORT).show();
                imageView.setImageBitmap(bitmap);
    }
}

uploading image to cloudboost

 

We create an async task to perform this operation in a background thread:

class uploadTask extends AsyncTask { 
    /**
     * Before starting background thread ShowProgress Bar Dialog
     * */
    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        UPLOAD = true;
        DIALOG_MESSAGE = "uploading to CloudBoost";
        showDialog(PROGRESS_BAR);
    }
 
    /**
     * uploading file in background thread
     * */
    @Override
    protected String doInBackground(String... filename) {
        if (imageFile == null) {
            Toast.makeText(MainActivity.this, "No image file selected",
			  Toast.LENGTH_SHORT).show();
            return null;
        }
        try {
            CloudFile file = new CloudFile(imageFile);
            file.save(new CloudFileCallback(){
 
                @Override
                public void done(CloudFile arg0,CloudException arg1)
                  throws CloudException {
                    if (arg0 != null) {
                        Log.d("UPLOAD TASK","file upload complete url="+
                          arg0.getFileUrl());
                        CLOUDBOOST_IMAGE_URL = arg0.getFileUrl();
                        runOnUiThread(new Runnable() {
                            public void run() {
                                info.setText(CLOUDBOOST_IMAGE_URL);
                            }
                        });
                    }
					else
                        Log.d("UPLOAD TASK","File upload failed:" + arg1.getMessage());
                }
            });
 
        }
        catch (Exception e) {
            Log.e("Error: ", e.getMessage());
        }
 
        return null;
    }
 
    /**
     * Updating progress bar
     * */
    protected void onProgressUpdate(String... progress) {
        // setting progress
        percentage pDialog.setProgress(Integer.parseInt(progress[0]));
    }
 
    /**
     * After completing background task Dismiss the progress dialog
     * **/
    @Override
    protected void onPostExecute(String file_url) {
        // dismiss the dialog after the file was downloaded
        dismissDialog(PROGRESS_BAR);
    }
}

Notice how we retrieve the saved image’s URL and save it to a global variable with the following line
CLOUDBOOST_IMAGE_URL=arg0.getFileUrl();





This URL will be used in the file download phase:

download file from cloudboost

This stage is the easiest when it comes to the cloudboost part of it. Its everyday file download code, you just use CLOUDBOOST_IMAGE_URL.

Downloaded and set to imageview

You can download complete source code and run.