Ok I figured it out. The main problem I was having is that the uploader coffeescript was not executing again after the form was added via ajax. The revised #136 railscast got the basic ajax form working, but in order to get the uploader form working via ajax, I just included uploader coffeescript as normal javascript in my new.js.erb file. That way when the new.js.erb file is executed, it loads the form and executes the uploader javascript.
new.js.erb:
$('#new_link').hide().after('<%= j render("images/form") %>');
jQuery(function() {
return $('#fileupload').fileupload({
add: function(e, data) {
var file, types;
types = /(\.|\/)(gif|jpe?g|png)$/i;
file = data.files[0];
if (types.test(file.type) || types.test(file.name)) {
data.context = $(tmpl("template-upload", file));
$('#fileupload').append(data.context);
data.form.find('#content-type').val(file.type);
return data.submit();
} else {
return alert("" + file.name + " is not a gif, jpeg, or png image file");
}
},
progress: function(e, data) {
var progress;
if (data.context) {
progress = parseInt(data.loaded / data.total * 100, 10);
return data.context.find('.bar').css('width', progress + '%');
}
},
done: function(e, data) {
var content, domain, file, path, to;
file = data.files[0];
domain = $('#fileupload').attr('action');
path = $('#fileupload input[name=key]').val().replace('${filename}', file.name);
to = $('#fileupload').data('post');
content = {};
content[$('#fileupload').data('as')] = domain + path;
$.post(to, content);
if (data.context) {
return data.context.remove();
}
},
fail: function(e, data) {
alert("" + data.files[0].name + " failed to upload.");
console.log("Upload failed:");
return console.log(data);
}
});
});