add multiple upload to gallery

Gemfile

@@ -63,6 +63,7 @@ gem 'high_voltage', github: 'thoughtbot/high_voltage'
 gem 'acts_as_list'
 gem 'pusher'
 gem 'jquery-datatables-rails', '~> 2.1.10.0.2'
+gem 'jquery-fileupload-rails'
 gem 'lodash-rails'
 gem 'ancestry'
 

Gemfile.lock

@@ -121,6 +121,9 @@ GEM
     jquery-datatables-rails (2.1.10.0.3)
       jquery-rails
       sass-rails
+    jquery-fileupload-rails (0.4.1)
+      actionpack (>= 3.1)
+      railties (>= 3.1)
     jquery-rails (3.1.1)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
@@ -323,6 +326,7 @@ DEPENDENCIES
   high_voltage!
   jbuilder (~> 2.0)
   jquery-datatables-rails (~> 2.1.10.0.2)
+  jquery-fileupload-rails
   jquery-rails
   jquery-turbolinks
   jquery-ui-rails

app/assets/javascripts/admin/admin.js

@@ -39,6 +39,9 @@
 //= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 //= require dataTables/extras/dataTables.responsive
 //= require dataTables/extras/dataTables.tableTools
+//= require jquery-fileupload/basic
+//= require jquery-fileupload/vendor/tmpl
+//= require admin/photos
 //= require admin/yt_player
 //= require cocoon
 //= require autonumeric

app/assets/javascripts/admin/photos.js.coffee

@@ -1,3 +1,27 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+
+jQuery ->
+  $('#photo_file').attr('name','photo[file]')
+  $('#new_photo').fileupload
+    dataType: 'script'
+    add: (e, data) ->
+      types = /(\.|\/)(gif|jpe?g|png|mov|mpeg|mpeg4|avi)$/i
+      file = data.files[0]
+      if types.test(file.type) || types.test(file.name)
+        data.context = $(tmpl("template-upload", file))
+        $('#new_photo').append(data.context)
+        $('.actions input[type="submit"]').click (e) ->
+          $('.actions input[type="submit"]').attr("disabled", true)
+          data.submit()
+          e.preventDefault()           
+      else
+        alert("#{file.name} is not a gif, jpg 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) ->
+      $('.actions input[type="submit"]').off('click')
+      $('.actions input[type="submit"]').attr("enabled", true)

app/controllers/admin/photos_controller.rb

@@ -52,7 +52,7 @@ def set_photo
 
     # Never trust parameters from the scary internet, only allow the white list through.
     def photo_params
-      params.require(:photo).permit(:file, :gallery_id, :category_id, :gallery, :category)
+      params.require(:photo).permit(:file, :gallery_id, :category_id, :gallery, :category, :uploaded_file)
     end
 
 end

app/views/admin/photos/_form.html.erb

@@ -1,18 +1,28 @@
 <% @photo = @gallery.photos.new %> 
 
-<%= form_for [:admin, @gallery, @photo], :class=>"form-horizontal panel" do |f| %>
+<%= form_for [:admin, @gallery, @photo], :class=>"form-horizontal panel", :html=> {multipart: true} do |f| %>
 	<div class="panel-body">
-	<%= f.file_field :file %>
-	</div>
-	<div class="panel-footer text-right">
-	<%= f.submit :action, :class=> "btn btn-primary" %>
-	</div>
+	<% if @photo.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(@photo.errors.count, "error") %> prohibited this photo from being saved:</h2>
 
+      <ul>
+        <% @photo.errors.full_messages.each do |msg| %>
+          <li><%= msg %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  
+    
+    <%= f.file_field :file, multiple: true, name: 'photo[file]', :hint=> "You can select multiple files" %>
+
+  </div>
+  <div class="panel-footer text-right actions">
+  	 <%= f.submit "Start Upload", :class=> "btn btn-primary", data: { disable_with: "Please wait..." }  %>
+  </div>
 <% end %>
 
-<script>
-      $(function(){
-
-          $('#photo_file').pixelFileInput({ placeholder: 'No file selected...' });
-      });
-  </script>
+<% # jquery photo template # %>
+<script id="template-upload" type="text/x-tmpl"><div class="upload">{%=o.name%}<div class="progress"><div class="progress-bar bar" style="width: 0%"></div></div></div></script>

app/views/admin/photos/_upload.html.erb

@@ -0,0 +1 @@
+<%= image_tag(@photo.file.url(:small), class: 'thumb')  %>

app/views/admin/photos/create.js.erb

@@ -0,0 +1,5 @@
+<% if @photo.new_record? %>
+  alert('Failed');
+<% else %>
+  $('ul.thumbnails').append("<%=j render partial: 'photos/upload', locals: { photo: @photo } %>");
+<% end %>