secret
Created

Uploadify

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
<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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.