I am using the s3_direct_upload gem to upload images to s3 with Rails. This gem is based on this Railscast and uses jQuery-file-upload. It is working well.
I would now like to resize my images before uploading them. A fork was created for a way to implement this but the author mentioned that:
"I had to comment out the add method since it halts the process queue. I'm not sure why... But since I was not uploading many files at the same time, it seems I did not need that callback anyway."
I have been able to implement this fork but the progress bar and upload events are no longer called so I have tried to implement a fork myself to implement all of my features.
The coffeescript code below does not throw any error but it does not do the resize either:
setUploadForm = ->
$uploadForm.fileupload
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent)
imageMaxWidth: settings.image_max_width
imageMaxHeight: settings.image_max_height
disableImagePreview: true
So now I am trying to replace the add
event as suggested by the author but I am struggling with the logic. The original code looks like:
add: (e, data) ->
file = data.files[0]
file.unique_id = Math.random().toString(36).substr(2,16)
unless settings.before_add and not settings.before_add(file)
current_files.push data
if $('#template-upload').length > 0
data.context = $($.trim(tmpl("template-upload", file)))
$(data.context).appendTo(settings.progress_bar_target || $uploadForm)
else if !settings.allow_multiple_files
data.context = settings.progress_bar_target
if settings.click_submit_target
if settings.allow_multiple_files
forms_for_submit.push data
else
forms_for_submit = [data]
else
data.submit()
and the author replaced the above with:
send: (e, data) ->
file = data.files[0]
if settings.before_send
settings.before_send(file)
I would like to replace add
with send
if it is going to allow the images to resize but I also want to keep the upload progress bar and upload events. I have tried replacing before_add
with before_send
but it creates an infinite loop:
unless settings.before_send and not settings.before_send(file)
My fork can be found here
The problem was in the initialize function:
this.initialize = function() {
$uploadForm.data("key", $uploadForm.find("input[name='key']").val());
//binded add function here to let the plugin execute it's default add behaviour
setUploadForm().bind('fileuploadadd' , function(e, data) {
var file;
file = data.files[0];
file.unique_id = Math.random().toString(36).substr(2, 16);
if (!(settings.before_add && !settings.before_add(file))) {
current_files.push(data);
if ($('#template-upload').length > 0) {
data.context = $($.trim(tmpl("template-upload", file)));
$(data.context).appendTo(settings.progress_bar_target || $uploadForm);
} else if (!settings.allow_multiple_files) {
data.context = settings.progress_bar_target;
}
//this part was causing the problem it was adding images for processing which hasn't been processed.
/*if (settings.click_submit_target) {
if (settings.allow_multiple_files) {
return forms_for_submit.push(data);
} else {
return forms_for_submit = [data];
}
} else {
return data.submit();
}*/
}
});
return this;
};