tors/jquery-fileupload-rails

jQuery File Upload integrated for Rails

jQuery File Upload for Rails

jQuery-File-Plugin is a file upload plugin written by Sebastian Tschan. jQuery File Upload features multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

jquery-fileupload-rails is a library that integrates jQuery File Upload for Rails 3.1 Asset Pipeline (Rails 3.2 supported).

Plugin versions

• jQuery File Upload Plugin v9.12.5

Installing Gem

gem "jquery-fileupload-rails"

Using the javascripts

Require jquery-fileupload in your app/assets/application.js file.

//= require jquery-fileupload

The snippet above will add the following js files to the manifest file.

//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/vendor/tmpl
//= require jquery-fileupload/vendor/load-image.all.min
//= require jquery-fileupload/vendor/canvas-to-blob
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-image
//= require jquery-fileupload/jquery.fileupload-audio
//= require jquery-fileupload/jquery.fileupload-video
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-ui
//= require jquery-fileupload/locale
//= require jquery-fileupload/jquery.fileupload-angular
//= require jquery-fileupload/jquery.fileupload-jquery-ui
//= require jquery-fileupload/cors/jquery.postmessage-transport
//= require jquery-fileupload/cors/jquery.xdr-transport

If you only need the basic files, just add the code below to your application.js file. Basic setup guide

//= require jquery-fileupload/basic

The basic setup only includes the following files:

//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload

You can also require the following to get the js from the Basic-Plus, AngularJS and jQuery UI Examples:

//= require jquery-fileupload/basic-plus

//= require jquery-fileupload/angularjs

//= require jquery-fileupload/jquery-ui

Using the stylesheet

Require the stylesheet file to app/assets/stylesheets/application.css

*= require jquery.fileupload
*= require jquery.fileupload-ui

There are also noscript styles for Browsers with Javascript disabled, to use them create a noscript.css and add it to your precompile-list and layout inside a noscript tag:

*= require jquery.fileupload-noscript
*= require jquery.fileupload-ui-noscript

Using the middleware

The jquery.iframe-transport fallback transport has some special caveats regarding the response data type, http status, and character encodings. jquery-fileupload-rails includes a middleware that handles these inconsistencies seamlessly. If you decide to use it, create an initializer that adds the middleware to your application's middleware stack.

Rails.application.config.middleware.use JQuery::FileUpload::Rails::Middleware

Example apps

jquery-fileupload-rails-paperclip-example: jQuery File Upload in Rails 3.2 with Paperclip and Bootstrap

rails-resumable-jquery-fileupload: resumable (chunked) uploads with jQuery File Upload in Rails 4.2 using Paperclip

You can also check out Ryan Bate's RailsCast jQuery File Upload episode.

Thanks

Thanks to Sebastian Tschan for writing an awesome file upload plugin.

License

Copyright (c) 2012 Tors Dalid

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jquery-fileupload-rails's Issues

tmpl.load error in 0.3.0

Error: document.getElementById(id) is null
Source File: http://localhost:3000/assets/jquery-fileupload/vendor/tmpl.js?body=1
Line: 36

Offending line -

tmpl.load = function (id) {
    return document.getElementById(id).innerHTML;
};

Object [object Object] has no method 'fileupload' unless ensuring jquery.ui.widget.js is before jquery.fileupload.js

It seems like most people adopt a workaround instead of fixing the problem but it may just be a rare problem that I am encountering every time. I am extending the transcodem(.com) scheduler to use jquery-fileupload-rails on top of carrierwave. I follow the steps stated in the README.md. These are the steps seen on railscasts.com/episodes/381 also. But when I call $(selector).fileupload() I get the error Object [object Object] has no method 'fileupload'. I get it on two fresh copies of the codem scheduler. The problem is the "/assets/jquery-fileupload/jquery.fileupload.js script can not run until /assets/jquery-fileupload/vendor/jquery.ui.widget.js is loaded and run. If you copy the code into console from both files you will see that it will give the error Object function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); } has no method 'widget' if you do them out of order. This is what is happening in the case of the normal includes done by //= require jquery-fileupload/basic in application.js. To overcome this I have added these scripts manually and waited for one to load before adding the next. These should be implemented in a way that ensures the first is loaded before the second tries to run. If this does not happen on a clean install it may be my specific use case or something I am doing wrong. If anyone has this problem please comment. I would like to investigate this issue when I get some time.

UPDATE: I am new to rails but I think this problem would be solved if I was in production mode and the javascript files were combined into one large file then this would obviously execute in the correct order bypassing the issue. So is this a bug or just something to expect in development mode or anytime the scripts are not combined into application.js?

Progress bar is not visible

Progress bar is not visible when I upload image, progress and progressall events are triggering but progress bar progress is not visible.

Use controller or helper instead of model for upload

Is it possible to have controller function to upload files instead of having model ?
I need to use local variables to make path dynamic which is not possible when using model for upload.

following is my code
attr_accessible :upload
has_attached_file :upload,
:url => "/controllers/original/:basename.:extension",
:path => "/files/docs/:basename.:extension"

include Rails.application.routes.url_helpers

def to_jq_upload
{
"name" => read_attribute(:upload_file_name),
"size" => read_attribute(:upload_file_size),
"url" => upload.url(:original),
"delete_url" => upload_path(self),
"delete_type" => "DELETE"
}
end

Incorrect format in IE

Here is my code:

$('#image-form').fileupload({
  dataType: "json",
  ......
});

When I use Chome to upload file, from the Rails log, I can find: Processing by ImagesController#create as *JSON*

But when I use IE8, I found: Processing by ImagesController#create as *HTML*

failing to precompile assets

rake aborted!
Asset compilation with node failed with error:

{ [Error: Error: ENOENT, no such file or directory '/home/gajendra/projects/teamaroo/tmp/assets/load-image.js'
In module tree:
application

at Object.fs.openSync (fs.js:432:18)

]
originalError:
{ [Error: ENOENT, no such file or directory '/home/gajendra/projects/teamaroo/tmp/assets/load-image.js']
errno: 34,
code: 'ENOENT',
path: '/home/gajendra/projects/teamaroo/tmp/assets/load-image.js',
syscall: 'open',
fileName: '/home/gajendra/projects/teamaroo/tmp/assets/load-image.js',
moduleTree: [ 'application' ] } }

Cant include only basic version

All this does not work:

//= require jquery.fileupload/basic

//= require jquery.fileupload.basic

//= require jquery-fileupload/basic

Update To Use Latest Version of JQuery File Upload

It appears that this gem is using 5.31.1.

The current version of JQuery File Upload is: 9.4.2.

templates and buttons

Hello!

I am modelling your index.html.erb to fit my needs.
Firtsly, i want to get rid of "start" buttom in order to prevent single-file upload (I dont want it), but it seems that "start upload"(multiple upload)-button is on "start" button dependent and I could not find how to modify the script in order to get rid of "start"-buttom but to keep the functionality of a "start upload" -button.

Can you give me some hints how to get rid of those dependencies?

Thank you.
Cheers, Katja

On dragover preventDefault and stopPropagation doesn't work

Hi.
Wanna say - AWESOME gem. Have one question.

I tried preventDefault and stopPropagation :) & still getting a lots of console.log('xxx')

  $(function(){
    $("#msg").fileupload({
      dragover: function (e, data={preventDefault: true}) {

        if (data.preventDefault) {
          console.log('xxx');
          e.preventDefault();
          }
     }});
    })

I tried different stuff, like:
console.log('xxx'); in front of IF
if (data.preventDefault) {
e.preventDefault();
}
and here console.log('xxx');

no good :)

Any help will be appreciated.
Thank you very much & Best regards,
Artem

Not working

Hi,
my problem is described here: http://stackoverflow.com/questions/12430044/jquery-fileupload-rails-broken-form and i don't want to duplicate it here.

Have you any ideas? :)

My Ruby version: 3.2.6

Not working with latest Chrome?

Hi i'm using Chrome Version 22.0.1229.79

My implementation of the fileupload was previously working.

It is still working in Safari and Firefox for me.

When testing in Chrome. When I click the Add Photos button I get the system dialog to select a file. I select a known working image file that works in Safari and Firefox. When I click Open on the file dialouge. Nothing else happens. I don't get an entry row for the file and I don't get an entry row with an error. I also don't get any browser console output.

Update required to fix IE10 double click issue?

See blueimp/jQuery-File-Upload#1611

Symptoms: Clicking the add file button requires a double click in IE 10.

This issue is occurring for me when using this gem, but seems fixed in the main jquery-file-upload repo. Perhaps this gem needs updated?

Thanks

Cant integrate S3 with javascript file upload using presigned post

I have spent days now trying to make this work. I am getting this error

"OPTIONS https://bucketname.s3.oregon.amazonaws.com/net::ERR_NAME_RESOLUTION_FAILED"
When trying to upload using javascript file upload. I am using Version 43.0.2357.130 Ubuntu 14.04 (64-bit). Please check my question here http://stackoverflow.com/questions/32040619/rails-amazon-s3-direct-upload-with-jquery-file-uploader

Allowing multiple upload prompts per page.

Is this possible?

Simple example?

Hi there... I'm a Rails newbie and am trying out your gem. Is there a totally simple example somewhere that just manages the files in a directory on the rails server... no database, no ActiveRecord confusing things?

I've searched a lot on the net, but mostly just found outdated examples or examples for PHP.

Thanks

Erik

Doesn't work to resize images on client side

the gem is useless for this HUGE POPULAR JOB.

This gem does not suppoort I18N localization properly

In the javascript files (jquery-fileupload-ui.js, maybe others as well) there are hard coded strings for error handling and other display text. There is a local.js file, but that is never used. It would be great if the local file was implemented so I could provide a locale file for other locales for full I18n support.

Chunk File upload

Hi,

It is possible to upload large files (more than 500 MB) using this plugin in rails 3.2.13.

Thanks
Sabyasachi

preview image/video not working

I use this gem at master branch.

I have a problem. preview not working.
I found that file object doesn't has preview method.

when always callback work and than I print log of file object

var file = data.files[0]
log.console(file)

at demo https://blueimp.github.io/jQuery-File-Upload/basic-plus.html
file has preview method

but ...
at my project
file doesn't has preview method

Cloud you help me please?
Below is my code.

---

at application.js

//= require jquery-fileupload/basic-plus
//= require video_uploader

at video_uploader.coffee

$( document ).ready ->
  btnUploader = $('.fileupload')
  progressBar = $('.fileupload-progress')

  btnUploader.fileupload
    disableImageResize: false,
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true,

    add: (e, data)->
      console.log 'start'
      data.context = $('<div />').appendTo('.videopreview')
      file = data.files[0]
      console.log file.name
      console.log file.preview
      console.log data.context
      node = $('<p/>').append($('<span/>').text(file.name))
      node.appendTo(data.context)
      data.submit()

    submit: (e, data)->
      progressBar.text('Uploading : 0%')
      true

    # send: (e, data)->

    progress: (e, data)->
      progress = parseInt(data.loaded / data.total * 100, 10)
      if progress < 100
        progressBar.text('Uploading : '+progress+'%')
      else
        progressBar.text('Processing Video')

    done: (e, data)->
      progressBar.text('Uploading Finished')

    fail: (e, data)->
      progressBar.text('Uploading Failed!')

    always: (e, data)->
      console.log 'processalways'
      file = data.files[0]
      console.log file
      console.log data.context
      node = $(data.context.children()[0])
      node
        .prepend('<br>')
        .prepend(file.preview)

at _form.html.erb

<div class="form-group">
   <%= f.input :file, as: :file, input_html: { class: 'fileupload' } %>
</div>
<div class="fileupload-progress></div>
<div class="col-xs-offset-3 col-xs-4 videopreview"></div>

[RFC] Remove Middleware

I propose to remove the Rack Middleware that alters some headers for the iframe transport.

• In the past (and currently) the required patches to the jquery-file-upload javscript sources have often been neglected, so it was mostly not active
• It is not generally needed, if the proper content type is returned from the controller that handles uploads and the jquery file upload wiki already contains instruction on how to do that
• It modifies the body to add some wrapper html code to inject original response data, which is no longer present in recent versions of rails due to the streaming support wrapping the original rack response
• Above mentioned wrapper html breaks non-html content handling in the jquery iframe transport (json, xml, script), because the transport expects the iframe body to contain either json, xml or javascript, but not the html/textarea wrapper added by the middleware

It's also hard to adapt the middleware to handle all the different cases of data that might be returned and is supported by the jquery iframe transport, so this is better handled inside the app's controller.

Couldn't find file 'jquery-fileupload' on Heroku

Hello

I have an app on Heroku and i'm working on it for some months (so it is not new). I've integrated jquery-fileupload in it and everything was working fine on my developer's machine. But when i pushed it to Heroku, i recieved an error when accessing the app: " Template error, couldn't find file 'jquery-fileupload' ". And the same thing when i try to include only jquery-fileupload/basic

In my application.js file i added the line:

//= require jquery-fileupload

The

gem 'jquery-fileupload-rails'

is in the :assets group

And in my application.rb file i have this line:

config.assets.initialize_on_precompile = false

because it is required when using Heroku. I have some other jquery plugins that are accessed the same way and no such errors showed up.

Any clues about this issue?

jquery fileupload with nested attributes

Hi there

Can someone guide me about uploading files using carrierwave with nested attributes and jquery-fileupload-rails plugin.

Basically my requirement is I have a Package that has many Images. How can I create a package with package details along with adding multiple images with nested form using jquery fileupload plugin.

When I create a package with multiple images using nested form, it takes too much time to process the request specially if images are of bigger size around 6-7 MBs. I am using and passenger and nginx in my production server.

Thanks
Sangam Gupta

progress bar is not showing any change in progress

Hello! Thanks for the great gem! I love this! I'm hoping I can figure out basically the only issue I'm having with it: I can't get the progress bar to do what I see it do any every example application I've seen using this gem. The upload is working, multiple files is working, the file name and progress bar appears when I use the OS dialogue to choose the files. I even verified that the data.loaded reaches data.total. But the progress bar does not fill with a different color. The css width property gets set to 100% from 0% like it is supposed to. What I'm wondering is if the progress is reaching 100% before the progress bar shows up because I placed jquery statements to display the data.loaded and data.total values every time the progress portion of the fileupload method gets called and those values only appear once and data.load is already the same as data.total.

Does anyone have an idea of what could be going wrong? I'm not sure how to debug this...

upload texts error (0.3.5)

I found that version 0.3.5 raises JS-error when uploading text files (0.3.4 is ok)

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]

load-images.js:85
... .drawImage(img, 0, 0, width, height);

Can we update the assets for this?

The assets are outdated by a few months, can someone update them?

How do control which directory the file is uploaded to?

how to ignore EXIF meta data, to prevent automatic rotation?

subj

example app not working with 0.4.1 gem

Hello,

The example app is working fine with 0.4.0 version but the 0.4.1 seems to broke something.

In console, ('#fileupload').data('fileupload') return undefined and we see a "Error Empty file upload result" when trying to upload.

Working perfectly fine in 0.4.0 version.

version of jQuery-File-Upload

I found the jQuery File Upload User Interface Plugin was updated to 6.8, could you please update this gem?

New gem release required?

I noticed that you've brought in some of the recent changes from the jquery-fileupload plugin but haven't yet released a new version of the gem. Do you have plans to push a new version of the gem to rubygems?

Cheers, Chris

0.4.1 scss breaks projects not using `sass`

I'm using less in my rails projects and as follows cannot compile vendor/assets/stylesheets/jquery.fileupload-ui.scss, please revert to erb or add sass dependency to gemspec. ERB looks like a more flexible solution to me

500: TypeError (no implicit conversion of nil into String)

I cannot figure out what is causing this TypeError. I have another rails app on Rails 4.0.3 where it works, and this Rails 4.1.5 app does not work.

class ImagesController < ApplicationController
  load_and_authorize_resource

  before_action :set_image, only: [:destroy]

  def create

    p_attr = params[:image]
    p_attr[:gallery_id] = params[:image][:gallery_id]
    p_attr[:file] = params[:image][:file].first if params[:image][:file].class == Array

    @image = Image.new(p_attr)
    if @image.save
      respond_to do |format|
        format.js
        format.html {  
          render :json => [@image.to_jq_upload].to_json, 
          :content_type => 'text/html',
          :layout => false
        }
        format.json {  
          render :json => { :files => [@image.to_jq_upload] }     
        }
      end
    else 
      render :json => [{:error => "custom_failure"}], :status => 304
    end



  end

  def destroy
    @image.destroy
    render :json => true
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_image
      @image = Image.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def image_params
      params.require(:image).permit(:gallery_id, file:[])
    end

end

Started POST "/images" for 127.0.0.1 at 2014-10-02 13:48:39 -0400
Processing by ImagesController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"6pvN7Ssl0Epye/CaUXKuakDItf1MkJi3KGA200Kwgvs=", "image"=>{"gallery_id"=>"3", "file"=>[#<ActionDispatch::Http::UploadedFile:0x007ff23c3d0730 @tempfile=#<Tempfile:/var/folders/3m/t1v11gzj32n0fdbhwr823y600000gn/T/RackMultipart20141002-38945-pt6cs6>, @original_filename="P7310618.JPG", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[file][]\"; filename=\"P7310618.JPG\"\r\nContent-Type: image/jpeg\r\n">]}}
Completed 500 Internal Server Error in 24ms

TypeError (no implicit conversion of nil into String):
  carrierwave (0.10.0) lib/carrierwave/uploader/cache.rb:159:in `join'
  carrierwave (0.10.0) lib/carrierwave/uploader/cache.rb:159:in `cache_path'
  carrierwave (0.10.0) lib/carrierwave/uploader/cache.rb:131:in `block in cache!'
  carrierwave (0.10.0) lib/carrierwave/uploader/callbacks.rb:17:in `with_callbacks'
  carrierwave (0.10.0) lib/carrierwave/uploader/cache.rb:122:in `cache!'
  carrierwave (0.10.0) lib/carrierwave/mount.rb:329:in `cache'
  carrierwave (0.10.0) lib/carrierwave/mount.rb:163:in `file='
  carrierwave (0.10.0) lib/carrierwave/orm/activerecord.rb:39:in `file='
  activerecord (4.1.5) lib/active_record/attribute_assignment.rb:45:in `public_send'
  activerecord (4.1.5) lib/active_record/attribute_assignment.rb:45:in `_assign_attribute'
  activerecord (4.1.5) lib/active_record/attribute_assignment.rb:32:in `block in assign_attributes'
  activerecord (4.1.5) lib/active_record/attribute_assignment.rb:26:in `each'
  activerecord (4.1.5) lib/active_record/attribute_assignment.rb:26:in `assign_attributes'
  activerecord (4.1.5) lib/active_record/core.rb:455:in `init_attributes'
  activerecord (4.1.5) lib/active_record/core.rb:198:in `initialize'
  actionpack (4.1.5) lib/action_dispatch/routing/url_for.rb:104:in `initialize'
  activerecord (4.1.5) lib/active_record/inheritance.rb:30:in `new'
  activerecord (4.1.5) lib/active_record/inheritance.rb:30:in `new'
  cancancan (1.9.2) lib/cancan/controller_resource.rb:85:in `build_resource'
  cancancan (1.9.2) lib/cancan/controller_resource.rb:66:in `load_resource_instance'
  cancancan (1.9.2) lib/cancan/controller_resource.rb:32:in `load_resource'
  cancancan (1.9.2) lib/cancan/controller_resource.rb:25:in `load_and_authorize_resource'
  cancancan (1.9.2) lib/cancan/controller_resource.rb:10:in `block in add_before_filter'
  activesupport (4.1.5) lib/active_support/callbacks.rb:440:in `instance_exec'
  activesupport (4.1.5) lib/active_support/callbacks.rb:440:in `block in make_lambda'
  activesupport (4.1.5) lib/active_support/callbacks.rb:160:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:160:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:229:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:229:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:229:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:229:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:166:in `block in halting'
  activesupport (4.1.5) lib/active_support/callbacks.rb:86:in `call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:86:in `run_callbacks'
  actionpack (4.1.5) lib/abstract_controller/callbacks.rb:19:in `process_action'
  actionpack (4.1.5) lib/action_controller/metal/rescue.rb:29:in `process_action'
  actionpack (4.1.5) lib/action_controller/metal/instrumentation.rb:31:in `block in process_action'
  activesupport (4.1.5) lib/active_support/notifications.rb:159:in `block in instrument'
  activesupport (4.1.5) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  activesupport (4.1.5) lib/active_support/notifications.rb:159:in `instrument'
  actionpack (4.1.5) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
  actionpack (4.1.5) lib/action_controller/metal/params_wrapper.rb:250:in `process_action'
  activerecord (4.1.5) lib/active_record/railties/controller_runtime.rb:18:in `process_action'
  actionpack (4.1.5) lib/abstract_controller/base.rb:136:in `process'
  actionview (4.1.5) lib/action_view/rendering.rb:30:in `process'
  actionpack (4.1.5) lib/action_controller/metal.rb:196:in `dispatch'
  actionpack (4.1.5) lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
  actionpack (4.1.5) lib/action_controller/metal.rb:232:in `block in action'
  actionpack (4.1.5) lib/action_dispatch/routing/route_set.rb:82:in `call'
  actionpack (4.1.5) lib/action_dispatch/routing/route_set.rb:82:in `dispatch'
  actionpack (4.1.5) lib/action_dispatch/routing/route_set.rb:50:in `call'
  actionpack (4.1.5) lib/action_dispatch/journey/router.rb:71:in `block in call'
  actionpack (4.1.5) lib/action_dispatch/journey/router.rb:59:in `each'
  actionpack (4.1.5) lib/action_dispatch/journey/router.rb:59:in `call'
  actionpack (4.1.5) lib/action_dispatch/routing/route_set.rb:678:in `call'
  jquery-fileupload-rails (0.4.1) lib/jquery/fileupload/rails/middleware.rb:14:in `_call'
  jquery-fileupload-rails (0.4.1) lib/jquery/fileupload/rails/middleware.rb:10:in `call'
  warden (1.2.3) lib/warden/manager.rb:35:in `block in call'
  warden (1.2.3) lib/warden/manager.rb:34:in `catch'
  warden (1.2.3) lib/warden/manager.rb:34:in `call'
  rack (1.5.2) lib/rack/etag.rb:23:in `call'
  rack (1.5.2) lib/rack/conditionalget.rb:35:in `call'
  rack (1.5.2) lib/rack/head.rb:11:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/params_parser.rb:27:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/flash.rb:254:in `call'
  rack (1.5.2) lib/rack/session/abstract/id.rb:225:in `context'
  rack (1.5.2) lib/rack/session/abstract/id.rb:220:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/cookies.rb:560:in `call'
  activerecord (4.1.5) lib/active_record/query_cache.rb:36:in `call'
  activerecord (4.1.5) lib/active_record/connection_adapters/abstract/connection_pool.rb:621:in `call'
  activerecord (4.1.5) lib/active_record/migration.rb:380:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
  activesupport (4.1.5) lib/active_support/callbacks.rb:82:in `run_callbacks'
  actionpack (4.1.5) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/reloader.rb:73:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/remote_ip.rb:76:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.1.5) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.1.5) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.1.5) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.1.5) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.1.5) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.1.5) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.1.5) lib/active_support/cache/strategy/local_cache_middleware.rb:26:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.1.5) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.1.5) lib/rails/engine.rb:514:in `call'
  railties (4.1.5) lib/rails/application.rb:144:in `call'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:155:in `handle'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:109:in `rescue in block (2 levels) in start'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:106:in `block (2 levels) in start'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:96:in `each'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:96:in `block in start'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:76:in `loop'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:76:in `start'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/lib/nack/server.rb:12:in `run'
  /Users/joel/Library/Application Support/Pow/Versions/0.4.3/node_modules/nack/bin/nack_worker:4:in `<main>'


  Rendered /usr/local/rvm/gems/ruby-2.1.2/gems/actionpack-4.1.5/lib/action_dispatch/middleware/templates/rescues/_source.erb (0.5ms)
  Rendered /usr/local/rvm/gems/ruby-2.1.2/gems/actionpack-4.1.5/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (0.5ms)
  Rendered /usr/local/rvm/gems/ruby-2.1.2/gems/actionpack-4.1.5/lib/action_dispatch/middleware/templates/rescues/_request_and_response.text.erb (0.7ms)
  Rendered /usr/local/rvm/gems/ruby-2.1.2/gems/actionpack-4.1.5/lib/action_dispatch/middleware/templates/rescues/diagnostics.erb (13.5ms)

0.4.1 Version Number (Feb 2013) not updated with few files which were added later the date

0.4.1 Version Number (Feb 2013) not updated with few files which were added later the date(May 2013). Few JS files were missing in my project as i was using the version 0.4.1. I referenced git commit id to get those changes on to my project. It would be a good idea to create a new version and release it for the sake of projects on Rails 3+

Rails update to 3.2.13 breaks multiple upload

I'm using the multiple option to choose an upload multiple photos, which works fine in Rails 3.2.12, but once I upgrade to 3.2.13 the functionality fails. However, if I remove the multiple: true option in the form helper, it also uploads images fine...but this multiple option is a necessity (unfortunately).

I'm using Paperclip to handle the files and receive an error in the logs stating: Paperclip::AdapterRegistry::NoHandlerError - No handler found for [#<ActionDispatch::Http::UploadedFile:0x007fdb5d070888 @original_filename="C70476_File002_Large.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name="machine_image[image][]"; filename="C70476_File002_Large.jpg"\r\nContent-Type: image/jpeg\r\n", @tempfile=#File:/var/folders/2c/2hqcq4k55g1_v_h447vn96q40000gn/T/RackMultipart20130319-14961-7i2zm1>]

Any thoughts on this? I'm not sure if this is a Paperclip or a jQuery Fileupload-Rails issue . Here's my form:

= simple_form_for [@machine, MachineImage.new], :html => {:multipart => true} do |f|
  =f.input :image, label: "Upload image(s):", :input_html => { multiple: true, name: "machine_image[image]" }

Here's my Javascript/Coffeescript:

jQuery ->
  $("#new_machine_image").fileupload
    dataType: "script"
    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))
        $('#new_machine_image').append(data.context)
        data.submit()
      else
        $("#upload-errors ul").prepend("<li>#{file.name} is not a gif, jpeg, or png image file.</li>")
        $("#upload-errors").show()
        # alert()
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')
    done: (e, data) ->
      if data.context
        data.context.hide()

Any help or direction on this would be greatly appreciated. Thanks!

Could you fix a small error in documentation

You use //= require jquery-fileupload/vendor/load-image.all.min file, not //= require jquery-fileupload/vendor/load-image. It may be important for those who attach files manually (like me). Fix it please

uninitialized constant JQuery

I tried to drop this into an initializer, but it gave me uninitialized constant JQuery error, I also tried to drop in

# Add in jQuery middleware for FileUploading
config.middleware.use ::JQuery::FileUpload::Rails::Middleware

But, I still get the same error as above, am I missing something? Should I require a certain file or something? When I run the server with rails s, i dont' get an issue, but capistrano keeps throwing errors when I'm trying to migrate the database or try to reboot the server.

TypeError: data.context is undefined , data.context.find('.preview span').each(function (index, element) {

Showing an error when uploading a single file.

 $(document).ready(function() {
    profile_services();
  call_upload('fileupload', #{@user.id}, 'template-upload', 'template-download')
  function call_upload(id, u_id, u_temp, d_temp) {
  // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({autoUpload: true, uploadTemplateId: u_temp, downloadTemplateId: d_temp, _renderPreviews: renderPreviews, done: uploadDone, destroy: destroyDone, add: uploadPreview, maxFileSize: 5000000, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i });
    $('#fileupload').bind('fileuploadsend', function(event, data) {
      auth_token = $('meta[name="csrf-token"]').attr('content');
      data.url = data.url + '?authenticity_token=' + encodeURIComponent(auth_token);
      $.blueimp.fileupload.prototype.options.send.call(this, event, data);
    });
    // Load existing files:
    $.getJSON($('#fileupload').prop('action'), function (files) {
      console.log(files);
      var fu = $('#fileupload').data('blueimpFileupload') ||$("#fileupload").data('fileupload'),template;
      fu._adjustMaxNumberOfFiles(-files.length);
      console.log(files);

      template = fu._renderDownload(files).appendTo($('#fileupload .files'));
      console.log(template);
      // Force reflow:
      fu._reflow = fu._transition && template.length && template[0].offsetWidth;
      template.addClass('in');
      $('#loading').remove();
  });
  }
  function uploadDone(e, data) {
    var that = $(this).data('blueimp-fileupload') || $(this).data('fileupload'),
        files = that._getFilesFromResponse(data),
        template,
        deferred;
    if (data.context) {
        data.context.each(function (index) {
            var file = files[index] || {error: 'Empty file upload result'},
                deferred = that._addFinishedDeferreds();
            if (file.error) {
                that._adjustMaxNumberOfFiles(1);
            }
            that._transition($(this)).done(
                function () {
                    var node = $(this);
                    $('#fileupload .template-download').remove();
                    $('#fileupload .btn-success span').html('Change');
                    template = that._renderDownload([file]).replaceAll(node);
                    that._forceReflow(template);
                    that._transition(template).done(
                        function () {
                            data.context = $(this);
                            that._trigger('completed', e, data);
                            that._trigger('finished', e, data);
                            deferred.resolve();
                        }
                    );
                }
            );
        });
    } else {
        if (files.length) {
            $.each(files, function (index, file) {
                if (data.maxNumberOfFilesAdjusted && file.error) {
                    that._adjustMaxNumberOfFiles(1);
                } else if (!data.maxNumberOfFilesAdjusted &&
                        !file.error) {
                    that._adjustMaxNumberOfFiles(-1);
                }
            });
            data.maxNumberOfFilesAdjusted = true;
        }
        template = that._renderDownload(files)
            .appendTo(that.options.filesContainer);
        that._forceReflow(template);
        deferred = that._addFinishedDeferreds();
        that._transition(template).done(
            function () {
                data.context = $(this);
                that._trigger('completed', e, data);
                that._trigger('finished', e, data);
                deferred.resolve();
            }
        );
    }
 }
 // Callback for file deletion:
  function destroyDone(e, data) {
      var that = $(this).data('blueimpFileupload') ||$(this).data('fileupload');
      if (data.url) {
          $.ajax(data);
          that._adjustMaxNumberOfFiles(1);
      }
      that._transition(data.context).done(
          function () {
              $(this).remove();
              $('#fileupload .btn-success span').html('Add Image');
              that._trigger('destroyed', e, data);
          }
      );
  }
      // The add callback is invoked as soon as files are added to the fileupload
      // widget (via file input selection, drag & drop or add API call).
      // See the basic file upload widget for more information:
  function uploadPreview (e, data) {
    var that = $(this).data('blueimpFileupload') ||$(this).data('fileupload'),
        options = that.options,
        files = data.files;
    $(this).fileupload('process', data).done(function () {
        //Removing Errors
        $('#fileupload .template-upload').remove();

        that._adjustMaxNumberOfFiles(-files.length);
        data.isAdjusted = true;
        data.files.valid = data.isValidated = that._validate(files);
        data.context = that._renderUpload(files).data('data', data);
        options.filesContainer[
            options.prependFiles ? 'prepend' : 'append'
        ](data.context);
        that._renderPreviews(files, data.context);
        that._forceReflow(data.context);
        that._transition(data.context).done(
          function () {
            if ((that._trigger('added', e, data) !== false) && (options.autoUpload || data.autoUpload) && data.autoUpload !== false && data.isValidated) {
              $('#fileupload .template-download').hide();
              data.submit();
            }
          }
        );
    });
  }
});

r

Release gem v.0.4.4

Hey @tors, I've created a release tag v0.4.4, so you can push it to rubygems.org

Release gem v0.4.6

Hey @tors, there is a new tag v0.4.6 ready to be released at rubygems.org. Thanks :)

Error during precompiling

bundle exec rake assets:precompile 15:12:04
/Users/andoriyu/.rvm/rubies/ruby-1.9.3-p194/bin/ruby /Users/andoriyu/.rvm/gems/ruby-1.9.3-p194/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
Invalid CSS after "*": expected "{", was "html .fileinput..."

"html" may only be used at the beginning of a selector.
(in /Users/andoriyu/Git/Ruby/sarp/app/assets/stylesheets/application.scss)

Tasks: TOP => assets:precompile:primary
(See full trace by running task with --trace)
rake aborted!
Command failed with status (1): [/Users/andoriyu/.rvm/rubies/ruby-1.9.3-p19...]

Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

broken down in the latest version of Chrome

Everything works fine before I have my Chrome upgraded to version 22.0.1229.79

Version 0.4.1 breaks chai test for `fileupload` data attribute

I am not really sure if it is a problem of jquery-fileupload-rails but I have no other clue than that 0.4.1 fails my test and 0.4.0 passes. Perhaps somebody has a similar problem or can help me with this error.

describe 'Fileupload', ->

  it 'initializes the fileuploader', ->
      $('#fileupload').fileupload()
      expect($('#fileupload')).to.have.data('fileupload')

This passes with 0.4.0 but fails with 0.4.1 with the following backtrace:

TypeError: Cannot read property 'ownerDocument' of null
    at Function.Sizzle.contains (http://localhost:3500/assets/jquery.js?body=1:4393:16)
    at Function.jQuery.extend.clone (http://localhost:3500/assets/jquery.js?body=1:6385:20)
    at HTMLDocument.<anonymous> (http://localhost:3500/assets/jquery.js?body=1:6034:18)
    at http://localhost:3500/assets/jquery.js?body=1:301:20
    at Function.jQuery.extend.map (http://localhost:3500/assets/jquery.js?body=1:774:13)
    at jQuery.fn.jQuery.map (http://localhost:3500/assets/jquery.js?body=1:300:33)
    at jQuery.fn.extend.clone (http://localhost:3500/assets/jquery.js?body=1:6033:15)
    at $.fn.inspect (http://localhost:3500/assets/chai-jquery.js?body=1:25:39)
    at formatValue (http://localhost:3500/assets/chai.js:3315:22)
    at formatProperty (http://localhost:3500/assets/chai.js:3487:19)

• jquery-fileupload-rails 0.4.1
• jquery_rails 2.2.1
• jquery 1.9.1
• chai-jquery-rails 1.1.1
• chai 1.4.2
• konacha 2.5.0

0.4.1 to 0.4.2 fails

When I updated the gem from 0.4.1 to 0.4.2, this gem doen't work. I downgrade to 0.4.1 and it is work.

It's strange that I didn't get any error messages both in browser console and rails app logs.

Here is my code:

image.js

$(document).on("ready page:load", function () {
  $("#new_image").fileupload({
    dataType: "script", 
    autoUpload: false,
  })
  .on("fileuploadadd", function (e, data) {
    $.each(data.files, function (index, file) {
      data.context = $(tmpl("template-upload", file));
      $('#upload-process-status').append(data.context);
    });
  })
  .on('fileuploadprogress', function (e, data) {
    var progress = Math.floor(data.loaded / data.total * 90);
    if (data.context) {
      data.context.each(function () {
        $(this).find('.progress-bar').css('width', progress + '%');  
      });
    }
  })
  .on("fileuploaddone", function (e, data) {
    if (data.context) {
      data.context.each(function () {
        $(this).find('.progress-bar').css('width', 100 + '%');  
        $(this).fadeOut();
      });
    }
  });
});

$(document).bind('dragover', function (e) {
  var dropZone = $('#dropzone'),
  timeout = window.dropZoneTimeout;
  if (!timeout) {
    dropZone.addClass('in');
  } else {
    clearTimeout(timeout);
  }
  var found = false,
  node = e.target;
  do {
    if (node === dropZone[0]) {
      found = true;
      break;
    }
    node = node.parentNode;
  } while (node != null);
  window.dropZoneTimeout = setTimeout(function () {
    window.dropZoneTimeout = null;
    dropZone.removeClass('in');
  }, 100);
});

rails from

<div class="row well">
  <%= form_for([:dashboard, @work, @image], id: "new_image") do |f| %>
    <span class="btn btn-success fileinput-button">
      <%= icon("plus", "新增圖片") %>
      <%= f.file_field :image, multiple: true, name: "image[image]", hide_label: true %>
    </span>
  <% end %>

  <hr>

  <div id="upload-process-status">

  </div>
  <script id="template-upload" type="text/x-tmpl">
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
      {%=o.name%}
    </div>
  </div>
  <hr>
  </script>
</div>

Integrate rack-iframe-transport

Dealing with the iframe fallback for jquery file upload is a little bit tricky.

There's a nice Rack middleware, rack-iframe-transport that wraps up transforming a response into something consumable by jquery-iframe-transport. Since Rails is Rack, I think it would be a good addition to roll this functionality directly into jquery-fileupload-rails.

File name uniqueness

When i upload a file with the same name as an existing file, i get a rollback on the create action.
But when ajax reloads the index-action, it seem to show that the file got uploaded but with an "Internal Server Error" box.

At the index loading process i get :

ERROR NoMethodError: undefined method `bytesize' for :datafile_file_name:Symbol

It's should support rails 4

Release gem v0.4.5

Hey @tors, a new release tag v0.4.5 is ready to push to rubygems.org, if you don't mind. Thanks!

middleware broken remotipart

Here is the reference issuce JangoSteve/remotipart#69.
The middleware always add a text-area wrapper and it broken the remotipart cause remotipart has added a text-area tag. Any ideas?