ruby - Jquery-fileupload-rails not working with multiple-part form -

i'm trying crazy jquery-fileupload functionality work carrierwave:

http://railscasts.com/episodes/381-jquery-file-upload?autoplay=true

and causing me kinds of problems. have 3 models - projects, versions , layers. within project, i'm trying create both version , several associated layers within same form (from new.html.erb file in views/versions). i'm following ryan bates railscast #381 , can't seem files upload automatically when selected directly in new view. (on new version page, if select several layer files click 'create version' button, associated layer files upload successfully. in tutorial upload right away when selected via jquery without having click 'create' button. main difference between & i'm trying is uploading files 'paintings' index page...where trying display uploaded files directly on 'new.html.erb' form page...& when user clicks 'create version' form creating both new version , new associated layers @ same time.

i hope makes sense...my code follows, please let me know if should provide further explanation. (i've hunted through many questions examples seems bit more complex 'single-model' jquery-fileupload examples i've come across).

gemfile

source 'https://rubygems.org'  # bundle edge rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.0.4' gem 'pg' gem 'bootstrap-sass', '3.1.1.0' gem 'sprockets', '2.11.0' # use activemodel has_secure_password gem 'bcrypt', '~> 3.1.7' gem 'faker' gem 'bootstrap_form' gem 'will_paginate' gem 'bootstrap-will_paginate' gem "pundit" gem 'rails3-jquery-autocomplete', :git=>'git@github.com:yangbodotnet/rails3-jquery-autocomplete.git' gem 'jquery-fileupload-rails' gem 'remotipart', '~> 1.2'  gem 'rmagick', :require => 'rmagick' gem 'carrierwave'  # use scss stylesheets gem 'sass-rails', '~> 4.0.2'  # use uglifier compressor javascript assets gem 'uglifier', '>= 1.3.0'  # use coffeescript .js.coffee assets , views gem 'coffee-rails', '~> 4.0.0'  # see https://github.com/sstephenson/execjs#readme more supported runtimes # gem 'therubyracer', platforms: :ruby  # use jquery javascript library & jquery ui gem 'jquery-rails' gem 'jquery-ui-rails'  # turbolinks makes following links in web application faster. read more: https://github.com/rails/turbolinks gem 'turbolinks'  # build json apis ease. read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 1.2' 

routes.rb

productionapp::application.routes.draw    resources :users   resources :sessions, only: [:new, :create, :destroy]    resources :projects     resources :versions     match '/settings'=>'projects#settings', :via=>:get, :as=>:settings     match '/collaboration'=>'projects#collaboration', :via=>:get, :as=>:collaboration   end    resources :versions     resources :users   end  end 

new.html.erb (new version page & form. creates new version & associated layers uploaded attachments...however files should upload , display selected...i.e, before user clicks 'create'. or if don't upload right away, need them act of preview of uploads before clicking create...

<% provide(:title, 'new version') %>  <div class="row-fluid">   <div class="col-md-5 no-pad">     <h1>create new version</h1>     <%= bootstrap_form_for @version, :html => {:multipart => true}, :url => project_versions_path, :remote => true |f| %>        <%= render 'shared/error_messages', object: f.object %>      <%= f.text_field :title %>      <%= f.hidden_field :user_id %>      <div class="well">       <h4>drag file uploads here:</h4>       <%= image_tag("icon-large-grey.png", alt: "add files") %>        <%= f.file_field :audio, multiple: true, name: "layer[audio][]", :required=>true %>      </div>      <%= f.button "create now! ", class: "btn btn-lg btn-primary" %>   <% end %>   </div>   <div class="col-md-1 hidden-sm">     <%= image_tag "shadow-vert.png" %>   </div>   <div class="col-md-6 no-pad">    <!-- ------------ below upload previews should show up...but not ------------------------------------------------ -->      <h1>preview changes & additions</h1>     <div id="layers">       <%= render @version.layers %>     </div>   </div> </div> 

audio_uploader.rb (uploaders/audio_uploader.rb...this carrierwave uploader file)

# encoding: utf-8  class audiouploader < carrierwave::uploader::base    # include rmagick or minimagick support:   # include carrierwave::rmagick   # include carrierwave::minimagick    # choose kind of storage use uploader:   storage :file   # storage :fog    # override directory uploaded files stored.   # sensible default uploaders meant mounted:   def store_dir     "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"   end end 

versions_controller

class versionscontroller < applicationcontroller   before_action :find_project    def new     @version = @project.versions.build(user_id: current_user.id)    end    def show     @project = project.find(params[:project_id])      @version = version.find(params[:id])   end    def index     # @user = user.where(:id => @version.user_id) first figure out how set user_id on new versions (its nil now)     @versions = version.paginate(page: params[:page])   end    def create     @project = project.find(params[:project_id])     @version = @project.versions.build(version_params)     if @version.save       @version.create_layers_with_audio(layer_audio_params) if params[:layer]       flash[:success] = "created successfully"       redirect_to project_path(@project)     else       render 'new'     end   end    private    def find_project     @project = project.find(params[:project_id])   end    def version_params     params.require(:version).permit(:title, :project_id, :user_id)   end    def layer_audio_params     params.require(:layer).require(:audio)   end end 

version.rb (version model)

class version < activerecord::base   belongs_to :project   belongs_to :user   has_many :layers, dependent: :destroy   validates :title, presence: true, length: { maximum: 140 }    default_scope -> { order('created_at desc') }    def create_layers_with_audio(audios)     audios.each |au|       self.layers.create(:audio=>au, :project_id=> self.project_id)     end   end end 

layers_controller.rb (layers controller)

class layerscontroller < applicationcontroller   def index     @layers = layer.all   end    def new     @layer = layer.new   end    def show     @layer = layer.find(params[:id])   end    def create     @project = project.find(params[:project_id])     @version = version.find(params[:version_id])     @layer = @version.layers.create(layer_params)     # if @layer.save       # flash[:success] = "audio layers have been added successfully"       # redirect_to @project     # else       # render 'new'     # end   end    def update    end    def destroy    end    private    # def layer_params     # params.require(:layer).permit(:audio, :project_id, :version_id)   # end end 

layer.rb (layer model)

class layer < activerecord::base   belongs_to :project   belongs_to :version    validates :project_id, presence: true   validates :version_id, presence: true   validates :audio, presence: true    mount_uploader :audio, audiouploader end 

create.js.erb (i believe file may i'm going wrong!)

<% if @layer.new_record? %>     alert("failed upload layer: <%= j @layer.errors.full_messages.join(', ').html_safe %>"); <% else %>     $("#layers").append("<%= j render(@layer) %>"); <% end %> 

_layer.html.erb (_layer partial)

<li>    <div class="bg-add">     <%= layer.audio %>   </div>  </li> 

application.js (assets/javascripts)

//= require jquery //= require jquery_ujs //= require jquery.remotipart //= require jquery-fileupload/basic //= require jquery.ui.all //= require autocomplete-rails //= require bootstrap //= require turbolinks //= require bootstrapvalidator/dist/js/bootstrapvalidator.min //= require_tree . 

application.css (assets/stylesheets)

 *= require_self  *= require jquery.ui.all  *= require bootstrapvalidator/dist/css/bootstrapvalidator.min  *= require_tree . 

versions.js.coffee (app/assets/javascripts...)

# place behaviors , hooks related matching controller here. # logic automatically available in application.js. # can use coffeescript in file: http://coffeescript.org/ jquery ->   $('#new_layer').fileupload()     datatype: "script" 

layers.js.coffee (app/assets/javascripts...wasn't sure if js should go in layers or versions since form creates both...so tried including in both)

# place behaviors , hooks related matching controller here. # logic automatically available in application.js. # can use coffeescript in file: http://coffeescript.org/ jquery ->   $('#new_layer').fileupload()     datatype: "script" 

instead of using jquery file upload try remotepart gem, make our rails remote form carry file. please refer http://os.alfajango.com/remotipart/.