Appcelerator Titanium code for uploading a TiBlob image object, transforming, and deleting stored images via the Cloudinary API

readme.md

TiCloudinary

The easiest way to get started using Cloudinary in Appcelerator Titanium apps to upload, transform, and remove stored images via the Cloudinary API! Obviously you must signup for a Cloudinary account (no worries, they have a free plan). So once you have your Cloudinary API credentials, replace the dummy credentials with yours in Ti.Cloudinary.js

var cloudName = 'Your_Cloud_Name';
var apiKey = 999999999999;
var apiSecret = 'XXXXXXXXXX-XXXXX-XX';

Great, now that you're all setup...to begin using it, simply save or copy the TiCloudinary.js code I've provided here to your project's lib folder and then require it as a commonJS module in your project where you want to use it.

var TiCloudinary = require('/lib/TiCloudinary');

From here, you can upload images and start transforming them right away. The uploadAndTransform function takes 3 arguments: blob - the TiBlob object of the image to be uploaded/transformed, transformParams - a list of supported query string parameters for performing transforms on the image uploaded (read more on supported parameters at http://cloudinary.com/documentation/image_transformations), and callback - the callback function called with an argument object containing the response public_id and transform url to call the Cloudinary API with to perform the transformation. An example call would look like this:

var transformSuccess = function(transformObj) {
  Ti.API.info('transformObj', JSON.stringify(transformObj)); // resulting in the url to call to perform a 134px x 134px, centered-by-face, circle-cropped PNG
};
var transformObj = TiCloudinary.uploadAndTransform(myBlob, 'w_134,h_134,c_fill,g_face,r_max', transformSuccess);

And lastly, when images no longer needed to be stored in Cloudinary, simply destroy them by calling the deleteImage function while passing it the public_id of the image you want to delete. An example call would look like this:

Ti.Cloudinary.deleteImage(transformObj.public_id);

TiCloudinary.js

var moment = require('alloy/moment');
// Cloudinary credentials - **Replace these with your creds!!!
var cloudName = 'Your_Cloud_Name';
var apiKey = 999999999999;
var apiSecret = 'XXXXXXXXXX-XXXXX-XX';
// Image API URL base
var apiBaseUrl = 'http://api.cloudinary.com/v1_1/';

// Create and send alert on error
function alert(message, title, ok, callback) {
  a = Ti.UI.createAlertDialog({
    message: message,
    title: title || L('alert_title', 'Alert'),
    ok: ok || L('alert_ok', 'OK')
  });
  a.show();
  if (callback) {
    a.addEventListener('click', callback);
  }
}

exports = {
  /**
   * Upload image from a TiBlob object and return the transformation url
   *
   * @param blob {Object} - TiBlob object of the image to be uploaded/transformed
   * @param transformParams {String} - List of supported query string parameters for performing
   * transforms on the image uploaded - read more on supported parameters at
   * http://cloudinary.com/documentation/image_transformations
   * @param callback {Function} - Optional callback function, called with an argument object containing the
   * response `public_id` and transform url to call the Cloudinary API with to perform the transformation
   */
  uploadAndTransform: function(blob, transformParams, callback) {
    var nowUnix = moment().unix();
    var signature = Ti.Utils.sha1('timestamp=' + nowUnix + apiSecret);
    var url = apiBaseUrl + cloudName + '/image/upload';
    var client = Ti.Network.createHTTPClient({
      onload: function(e) {
        Ti.API.info('Upload Response', this.responseText);
        var response = JSON.parse(this.responseText);
        var transformImgUrl = 'http://res.cloudinary.com/' + cloudName + '/image/upload/' + transformParams + '/' + response.public_id + '.png';
        if (callback) {
          callback({
            public_id: response.public_id,
            transformImgUrl: transformImgUrl
          });
        }
      },
      onerror: function(e) {
        Ti.API.info('Cloudinary Upload Error', JSON.stringify(e));
        alert('Please verify your data connection and try again.', 'Uh Oh');
      },
      timeout: 4000
    });
    client.setRequestHeader('enctype', 'multipart/form-data');
    client.setRequestHeader('Content-Type', 'image/png');
    client.open('POST', url);

    var params = {
      api_key: apiKey,
      file: blob,
      //public_id: someUniqueName, // if added, make sure the signature sha1 starts with:'public_id=' + someUniqueName + '&timestamp=...'
      signature: signature,
      timestamp: nowUnix,
    };
    client.send(params);
  },

  /**
   * Delete uploaded image
   *
   * @param public_id {String} - `public_id` of the image to be deleted
   */
  deleteImage: function(public_id) {
    var url = apiBaseUrl + cloudName + '/resources/image/upload?public_ids[]=' + public_id;
    var client = Ti.Network.createHTTPClient({
      onload: function(e) {
        Ti.API.info('Delete Response', this.responseText);
      },
      onerror: function(e) {
        Ti.API.info('Cloudinary Delete Error', JSON.stringify(e));
      },
      timeout: 4000
    });
    client.setUsername(apiKey);
    client.setPassword(apiSecret);
    client.open('DELETE', url);
    client.send();
  }
};