Uploadify

gistfile1.js

<script>
<% key = Rails.application.config.session_options[:key] %>
var uploadify_script_data = {};
var csrf_param = $('meta[name=csrf-param]').attr('content');
var csrf_token = $('meta[name=csrf-token]').attr('content');
uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
uploadify_script_data['<%= key %>'] = '<%= cookies[key] %>';

// Image Upload / Management
// There is a div which contains the images + a form to upload 
// - the outside form has an id of #photo-classes
// - the inside divs have a class of .photo-class-#{id}
// Uploaded images are inserted just before the form (which has an id of #photo-form)
// There is also a form which contains a hidden field for each image, in order to pass that info along
// - this has an id of #listing_photos_form

// When a file is uploaded
// - Change the thumb
// - Add to listing_photos_form (to get passed to the next section)

// there is buttonImg attribute you can set to an image
// http://www.uploadify.com/documentation/
$('#uploadify').uploadify({
  uploader        : '/assets/uploadify.swf',
  script          : '/photos',
  cancelImg       : '/assets/cancel.png',
  buttonImg       : '<%= image_path "btn-add-photo.png" %>',
  height          : 175,
  width           : 222,
  auto            : true,
  multi           : false,
  removeCompleted : true,
	wmode						: 'transparent',
  scriptData      : uploadify_script_data,
  onComplete      : function(event, ID, fileObj, response, data) {
    var image = $.parseJSON(response);
    var special_class = "photo-class-"+image.id;

    insertThumbImage(image, special_class);
    // addToListingPhotosForm(image, special_class);
  }
});

function insertThumbImage(image, special_class){
  // if it is the first image set to be the default
  var c = ($(".image-exists").length == 0) ? 'btn default btn-primary' : 'btn btn-info default'
  
  var imageDiv = "<li class='uploaded-image-container "+special_class+"'><div class='image-exists'>"+
    "<img src='"+image.image.size260x160.url+"' width='260' height='160' class='img bor' />"+
    "<a href='#' class='remove ir x-icon one' data-content='"+special_class+"'>Remove</a>"+
    "<textarea rows='3' cols='20' class='img-description' data-object-id='"+image.id+"'></textarea>"+
		"<a href='#' class='"+c+"' data-object-id='"+image.id+"'>Make Default</a>"+
    "</div></li>"
  // insert image before form
  $(imageDiv).insertBefore(".photo-form-container");
}

function addToListingPhotosForm(image, special_class){
  var hiddenField = '<%= hidden_field_tag "photo_ids[]" %>'
  
  // add the hidden field to the beginning of the form (before the submit button)
  $("#listing_photos_form").prepend(hiddenField);
  // update the attributes for the hidden field
  // - id needs to be changed just so we don't select it in the future
  // - set the value to image id
  // - add special_class as a class so it gets removed with the remove button
  $("#photo_ids_").attr('id','image_'+image.id).attr('value',"["+image.id+", 'test']").addClass(special_class);
}

$(function() {

/* Toggle the Default Image */
$('.default').live('click',function(){
	
	if ( $(this).hasClass('btn-primary') ) {
		console.log('Currently Active');
	} else {
		$('.default.btn-primary').removeClass('btn-primary').text('Make Default');
		$(this).removeClass('btn-info').addClass('btn-primary').text('Default Image');
		
	}
	return false;
});

// if it is removed, then set the next one 
$(".remove").live('click',function(){
  // if there is no default image and images exist
  if($(".default.btn-primary").length == 0 && $(".image-exists").length > 0){
    $(".image-exists:first .btn-info").removeClass('btn-info').addClass('btn-primary').text('Default Image');
  }
});

$("#listing_photos_form").submit(function(e){
  // validation
  // need to have at least one image
  if($(".image-exists").length === 0){
    alert("Need at least one image");
    return false;
  }
  // need to have at least one default
  if($(".default.btn-primary").length === 0){
    alert("need a default image set");
    return false;
  }
  
  // set the default value
  $("#listing_photo_id").attr('value',$('.default.btn-primary').attr('data-object-id'));

  // add each image to the form
  $(".img-description").each(function(){
    var hiddenField = '<%= hidden_field_tag "photo_ids[]" %>'
    
    // add the hidden field to the beginning of the form (before the submit button)
    $("#listing_photos_form").prepend(hiddenField);
    
    // update the attributes for the hidden field
    // - id needs to be changed just so we don't select it in the future
    // - set the value to image id
    // - add special_class as a class so it gets removed with the remove button
    // alert("new field being added ["+$(this).attr('data-object-id')+","+$(this).val()+"]");
    $("#photo_ids_").attr('value',"["+$(this).attr('data-object-id')+", \""+$(this).val()+"\"]");
  });
  

  // return false;
});

});

</script>