#image picker

Form Gallery is a jQuery/Bootstrap plugin that allows the user to select and preview images just like a gallery. Designed to replace the native file input.

Demo

Download

In a recent refinerycms project I noticed a strange bug / error after upgrading the system to one of rails's security patches.

Within a custom engine model, there is a nested form which uses the cocoon gem to show and remove itself. Within the nested form itself, is a link to call the js image picker within refinerycms to select an image for upload. Problem is this: because the nested field is dynamic which means that the image selector link is not generated until the 'Add This' link is clicked and the nested form is on the screen, the image selector link does not get instantiated within a new nested model form.

This can be seen with this piece of js code from refinerycms-core ver 1.0.11, in public/javascripts/refinery/admin.js

$(document).ready(function(){ // other initialization code init_modal_dialogs(); })

init_modal_dialogs() is a function which opens up a modal window in an iframe for selecting images or attachments. Since my dialog selectors are not going to be present until the nested fields are added, I bind the click event to the live action once the link is clicked. e.g.

$('a.add_nested_image_link').live('click', function(e)){ init_modal_dialogs() })

This fixes the dialog open and also shows the currently selected image within the nested form.

To remove the image or to replace it is a bit tricky.

Refinerycms by default uses a class of '.remove_picked_image' to define the remove image link within the dialog. Here we have another problem. Since the dialog is not created until the nested model forms are added, we need to bind the 'remove_picked_image' links to the live event too else it won't work:

Please note that the above only works if you are using a nested model form within your own engine in refinerycms with the cocoon gem.

When you are using image picker to capture photo, the image is not going to be automatically saved to the photo albums. Assuming you have successfully implemented image picker delegate and photo is successfully captured, take a look at the code snippets below to save it.

Image Picker Delegate ============================

- (void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {     //Get original photo     UIImage* photo = [(UIImage*) [info objectForKey:UIImagePickerControllerOriginalImage] retain];

    //Ensure image source is from the device camera     if(picker.sourceType == UIImagePickerControllerSourceTypeCamera)     {         UIImageWriteToSavedPhotosAlbum(photo, self, nil, nil);     }