I would like to integrate the uploadify plugin with a standard rails form. However I can't figure out how to add a new field and have it get submitted with the file upload. I added a name field into the form, but the valued does not get submitted.
<% dialog_file_description = 'Photos' allowed_extensions = [:jpg, :jpeg, :gif, :png] max_size = 20.megabyte allow_multiple_files = true url = photos_path photo_field = '#photo_photo' %> <%- session_key_name = ActionController::Base.session_options[:key] -%> <% content_for :jstemplates do -%> <%= javascript_tag "window._token = '#{form_authenticity_token}'" %> <%= javascript_include_tag "uploadify/swfobject" %> <%= javascript_include_tag "uploadify/jquery.uploadify.v2.1.0.min" %> <script type="text/javascript"> <% if protect_against_forgery? -%> var AUTH_TOKEN = '<%= form_authenticity_token %>'; <% end -%>
$(document).ready(function() {
$('<%= photo_field %>').uploadify({ uploader : '/javascripts/uploadify/uploadify.swf', script : '<%= url %>', fileDataName : $('#photo_uploader input:file')[0].name, // Extract correct name of upload field from form field cancelImg : '/images/cancel.png', buttonText : 'Browse', //buttonImg : '/images/browse-background.png', fileDesc : '<%= dialog_file_description %> (<%= allowed_extensions.collect { |ext| "*.#{ext}" }.join(';') %>)', fileExt : '<%= allowed_extensions.collect { |ext| "*.#{ext}" }.join(';') %>', sizeLimit : <%= max_size %>, multi : <%= allow_multiple_files %>, onComplete : function(event, queueID, fileObj, response, data) { var data = eval('(' + response + ')');$.getScript(data.photo)}, onAllComplete : function(event, data){ $('#uploadify_cancel').hide('blind'); $('#uploadify_submit').show('blind'); }, onSelect: function(event, queueID, fileObj){ if (fileObj.size > <%= max_size %>) { alert('The image' + fileObj.name + ' is too large.') return false; } }, scriptData : { 'format': 'json', '<%= session_key_name %>' : encodeURIComponent('<%= u cookies[session_key_name] %>'), 'authenticity_token' : encodeURIComponent('<%= u form_authenticity_token if protect_against_forgery? %>') } });
$('#uploadify_submit').click(function(event){ event.preventDefault(); $('<%= photo_field %>').uploadifyUpload(); $('#uploadify_submit').hide(); $('#uploadify_cancel').show(); });
$('#uploadify_cancel').click(function(event){ event.preventDefault(); $('<%= photo_field %>').uploadifyClearQueue(); $('#uploadify_cancel').hide(); $('#uploadify_submit').show(); });
});
</script> <% end -%> <% form_for(:photo, :id => 'photo_upload', :html => { :multipart => true}) do |f| %> <% if protect_against_forgery? -%> <%= f.hidden_field :authenticity_token, :value => (u form_authenticity_token) -%> <% end -%> <%= f.error_messages %> <div> <p>Name:</p> <%= f.text_field :name %> </div> <br /> <div id="photo_uploader"> <%= f.file_field :photo %> </div> <div id="photo_submit"> <a href="#" class="button" id="uploadify_submit">Upload</a><a href="#" id="uploadify_cancel" style="display:none">Cancel</a> </div> <% end %>
