GalleryPlugin

I've updated the GalleryPlugin to the Cordova 2.2.0 API but I've realized that I've never really talked about it. The GalleryPlugin is used when you need to add or remove a file from the Gallery or Music apps. Typical use cases include downloading an image from the internet and wanting it to show up in the Android Gallery app or conversely you delete a file and you don't want the dreaded black rectangle to be left in the Gallery app.


First lets take a look at what the gallery.js file. It's written using the cordova.define template but it still adds itself into window.plugins for those of you using the old style plugins:

	cordova.define("cordova/plugin/gallery",
	function(require, exports, module) {
	var exec = require("cordova/exec");
	var Gallery = function () {};
	Gallery.prototype.add = function(imagePath,success,fail) {
	exec(success,fail,"Gallery","add",[imagePath]);
	};
	Gallery.prototype.remove = function(imagePath,success,fail) {
	exec(success,fail,"Gallery","remove",[imagePath]);
	};
	var gallery = new Gallery();
	module.exports = gallery;
	});
	if (!window.plugins) {
	window.plugins = {};
	}
	if (!window.plugins.gallery) {
	window.plugins.gallery = cordova.require("cordova/plugin/gallery");
	}

view raw gallery.js hosted with ❤ by GitHub

Then will move on to the Java code. I've trimmed down code only to show the execute method for brevity.

	public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
	final CallbackContext cbContext = callbackContext;
	String imagePath = args.optString(0);
	if ("".equals(imagePath)) {
	Log.d(LOG_TAG, "No image path passed in");
	cbContext.sendPluginResult(new PluginResult(PluginResult.Status.ERROR, 0));
	return true;
	}
	imagePath = stripFileProtocol(imagePath);
	if (action.equals("add")) {
	PluginResult result = new PluginResult(PluginResult.Status.NO_RESULT);
	result.setKeepCallback(true);
	cbContext.sendPluginResult(result);
	MediaScannerConnection.scanFile(this.cordova.getActivity(),
	new String[] { imagePath }, null,
	new MediaScannerConnection.OnScanCompletedListener() {
	public void onScanCompleted(String path, Uri uri) {
	cbContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, uri.toString()));
	}
	});
	return true;
	} else if (action.equals("remove")) {
	File fp = new File(imagePath);
	fp.delete();
	try {
	this.cordova.getActivity().getContentResolver().delete(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
	MediaStore.Images.Media.DATA + " = ?",
	new String[] { imagePath });
	} catch (UnsupportedOperationException t) {
	// don't do anything
	}
	cbContext.sendPluginResult(new PluginResult(PluginResult.Status.OK));
	return true;
	}
	callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.INVALID_ACTION));
	return false;
	}

view raw GalleryPlugin.java hosted with ❤ by GitHub

In order to use this plugin you'll need to include the gallery.js in your HTML as a script tag:

	<script type="text/javascript" charset="utf-8"
	src="gallery.js"></script>

view raw scriptinc.js hosted with ❤ by GitHub

and add a line to res/xml/config.xml to tell the JavaScript side where to find your Java class:

	<plugin name="Gallery"
	value="com.simonmacdonald.cordova.plugins.GalleryPlugin"/>

view raw gallery.xml hosted with ❤ by GitHub

Now you should be able to add and remove images from the gallery. Here is some sample code to get you going:

	function addpic() {
	window.plugins.gallery.add("file:///sdcard/image.png", function() {
	console.log("pic added");
	}, function() {
	console.log("error adding");
	});
	};
	function delpic() {
	window.plugins.gallery.remove("file:///sdcard/image.png", function() {
	console.log("pic removed");
	}, function() {
	console.log("error removing");
	});
	};

view raw galleryexample.js hosted with ❤ by GitHub