CODEWITHSUNDEEP
ruby-on-railsjquery-file-upload
Sean Kelley
Sean Kelley

Reputation: 501

jQuery File Upload in Rails 4 with Image Resizing

I have followed this how-to and have full-size images saving to S3: https://github.com/uploaders/direct-aws-sdk-rails-4.2

but I am having trouble resizing photos first. I am getting a js error on the chrome console when loading the view that has input form.

Uncaught TypeError: Cannot read property 'fileupload' of undefined related to these two files:

jquery.fileupload-process var originalAdd = $.blueimp.fileupload.prototype.options.add; and jquery.fileupload-image $.blueimp.fileupload.prototype.options.processQueue.unshift(

I am copy-pasting js files listed here: https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

My upload JS looks like: 

...
fileInput.fileupload({
  fileInput:       fileInput,
  url:             "http://" + s3params.url.host,
  type:            'POST',
  autoUpload:       true,
  formData:         s3params.fields,
  paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
  dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
  replaceFileInput: false,
  disableImageResize: false,
  disableImageResize: /Android(?!.*Chrome)|Opera/ 
    .test(window.navigator && navigator.userAgent),
  imageMaxWidth: 800,
  imageMaxHeight: 800,
  imageCrop: true, // Force cropped images    
...

I believe my confusion might be related to how I am including the javascript files in my project. I have put the source of the listed files in my:

vendor/assets/javascripts

and referenced them in the application.js like so:

//= require jquery
//= require jquery_ujs
//= require turbolinks

//= require jquery.ui.widget
//= require load-image.all.min
//= require jquery.fileupload-image
//= require canvas-to-blob.min
//= require jquery.iframe-transport
//= require jquery.fileupload-process
//= require z.jquery.fileupload
//= require_tree .

If I remove:

//= require jquery.fileupload-process
//= require jquery.fileupload-image

I can upload again but do not have resizing.

Upvotes: 1

Views: 931

Answers (1)

Sean Kelley
Sean Kelley

Reputation: 501

I finally figured out that jquery.fileupload-process and jquery.fileupload-image needed to load after jquery.fileupload (i renamed without z.) and changed the order of load:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.widget
//= require load-image.all.min
//= require canvas-to-blob.min
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require jquery.fileupload-process
//= require jquery.fileupload-image

//= require_tree .

Upvotes: 1

Related Questions