I'm trying to do resizing of images before uploading to server, in order to add to my web site. I'm doing using Ruby-on-Rails, and the base that I'm using is based on the code from RailsCasts Episode #381: jQuery File Upload and trying to add things that I've found on the following links:
https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing
Using jquery fileupload with coffeescript - resizing image when using add callback
How to resize images client side using jquery file upload
Here is my code (paintings.js.coffee):
jQuery ->
$('#fileupload').fileupload
imageMaxWidth: 100
imageMaxHeight: 100
disableImageResize: false
imageCrop: true
process:[
{
action: "load"
fileTypes: /(\.|\/)(gif|jpe?g|png)$/i #/^image\/(gif|jp?g)$/
maxFileSize: 20000 # 20KB
},
{
action: "resize"
imageMaxWidth: 100
imageMaxHeight: 100
},
{
action: "save"
}
]
add: (e, data) ->
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)
current_data = $(this)
data.process(->
return current_data.fileupload('process', data);
).done(->
data.formData = {token: unique_token};
data.context = $('.preview:last');
data.context.find('.abort').click(abortUpload);
xhr = data.submit();
data.context.data('data',{jqXHR: xhr});
)
else
alert("#{file.name} is not a gif, jpeg, or png image file")
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
done: (e, data) ->
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)
data.context.remove() if data.context # remove progress bar
fail: (e, data) ->
alert("#{data.files[0].name} failed to upload.")
console.log("Upload failed:")
console.log(data)
Here is my code (application.js):
//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/vendor/load-image
//= require jquery-fileupload/vendor/canvas-to-blob
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require jquery-fileupload/jquery.fileupload-ui
//= require_tree .
Here is the part which is relevant of the Gemfile:
gem 'jquery-fileupload-rails'
gem 'jquery-file-upload-railed'
I needed to include the
gem 'jquery-file-upload-railed'
Due to the requires on the application.js:
//= require jquery-file-upload/jquery.fileupload-process
//= require jquery-file-upload/jquery.fileupload-validate
//= require jquery-file-upload/jquery.fileupload-image
Result: I got this error:
Uncaught TypeError: Object # has no method '_super'.
On the file:
jquery.fileupload-process.js?body=1:165
164 _create: function () {
165 this._super();
166 this._processing = 0;
167 this._processingQueue = $.Deferred().resolveWith(this)
168 .promise();
169 }
Since the problem seemed to be on the file: jquery.fileupload-process.js, I removed the 3 requires that were depending on the gem 'jquery-file-upload-railed'. Remove lines from application.js:
//= require jquery-file-upload/jquery.fileupload-process
//= require jquery-file-upload/jquery.fileupload-validate
//= require jquery-file-upload/jquery.fileupload-image
I removed as well the gem from Gemfile:
gem 'jquery-file-upload-railed'
Then I got another error:
Uncaught TypeError: Object # has no method 'process'
On the file:
paintings.js?body=1:28
22 add: function(e, data) {
23 var current_data, file, types;
24 types = /(\.|\/)(gif|jpe?g|png)$/i;
25 file = data.files[0];
26 if (types.test(file.type) || types.test(file.name)) {
27 current_data = $(this);
28 return data.process(function() {
29 return current_data.fileupload('process', data);
30 }).done(function() {
31 var xhr;
32 data.formData = {
33 token: unique_token
34 };
35 data.context = $('.preview:last');
36 data.context.find('.abort').click(abortUpload);
37 xhr = data.submit();
38 return data.context.data('data', {
39 jqXHR: xhr
40 });
41 });
42 } else {
43 return alert("" + file.name + " is not a gif, jpeg, or png image file");
44 }
45 },
Then I decided to change the add: callback from the file paintins.js.coffee. Before:
add: (e, data) ->
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)
current_data = $(this)
data.process(->
return current_data.fileupload('process', data);
).done(->
data.formData = {token: unique_token};
data.context = $('.preview:last');
data.context.find('.abort').click(abortUpload);
xhr = data.submit();
data.context.data('data',{jqXHR: xhr});
)
else
alert("#{file.name} is not a gif, jpeg, or png image file")
After:
add: (e, data) ->
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)
current_data = $(this)
current_data.fileupload('process', data);
data.submit();
else
alert("#{file.name} is not a gif, jpeg, or png image file")
Result: Now the uploading to S3 works. But it does not the client-side resizing image. Anyone could help me on this. The documentation is really scarce, I've been working based on others people experience, but so far none of them has helped me.
Thanks in advance.
