Got jquery file upload working

.gitignore

@@ -5,6 +5,7 @@ Thumbs.db
 public/assets/**/*
 public/system/**/*
 public/ckeditor_assets/**/*
+public/uploads/**/*
 config/database.yml
 config/deploy.rb
 sublime-develop.sublime-project

app/controllers/admin/uploads_controller.rb

@@ -0,0 +1,23 @@
+class Admin::UploadsController < ApplicationController
+
+  def index
+      @uploads = Upload.all
+      render :json => @uploads.collect { |p| p.to_jq_upload }.to_json
+    end
+
+  def create
+    @upload = Upload.new(params[:upload])
+    if @upload.save
+      render :json => [@upload.to_jq_upload].to_json
+    else 
+      render :json => [{:error => "custom_failure"}], :status => 304
+    end
+  end
+
+  def destroy
+    @upload = Upload.find(params[:id])
+    @upload.destroy
+    render :json => true
+  end
+
+end

app/helpers/admin/assets_helper.rb

@@ -0,0 +1,2 @@
+module Admin::AssetsHelper
+end

app/models/archive.rb

@@ -0,0 +1,3 @@
+class Archive < Upload
+
+end

app/models/audio.rb

@@ -0,0 +1,3 @@
+class Audio < Upload
+
+end

app/models/document.rb

@@ -0,0 +1,3 @@
+class Document < Upload
+
+end

app/models/image.rb

@@ -0,0 +1,3 @@
+class Image < Upload
+
+end

app/models/upload.rb

@@ -0,0 +1,30 @@
+class Upload < ActiveRecord::Base
+  belongs_to :attachable, :polymorphic => true
+
+  # Paperclip
+  has_attached_file :data,  :styles => { :thumb => "80x80>", :small => "150x150>", :medium => "300x300>", :large => "650x650>" },
+                            :url  => "/uploads/:id/:style/:basename.:extension",
+                            :path => ":rails_root/public/uploads/:id/:style/:basename.:extension"
+
+  # if attachment is not an image prevents the resize post processor from running
+  before_post_process :is_image? 
+
+  # Paperclip Validations
+  validates_attachment_presence :data
+
+  # Used by before_post_process validation to skip images post processing if not an image
+  def is_image?
+    ["image/jpeg", "image/pjpeg", "image/png", "image/x-png", "image/gif", "image/bmp"].include?(self.data_content_type) 
+  end
+
+  def to_jq_upload
+    {
+      "name" => read_attribute(:data_file_name),
+      "size" => data_file_size,
+      "url" => data.url,
+      "thumbnail_url" => data.url(:thumb),
+      "delete_url" => "/admin/uploads/#{id}",
+      "delete_type" => "DELETE" 
+     }
+  end
+end

app/models/video.rb

@@ -0,0 +1,3 @@
+class Video < Upload
+
+end

app/views/layouts/admin.html.erb

@@ -13,32 +13,30 @@
     <title><%= t "admin.general.railsyard_admin_panel" %> - <%= yield :title %></title>        
 
     <%= stylesheet_link_tag "/admin/stylesheets/all.css" %>
-
+    <%= stylesheet_link_tag('jquery.fileupload-ui') %>
+
     <!--[if IE 6]><link rel="stylesheet" type="text/css" href="/admin/stylesheets/ie6.css" media="screen" /><![endif]-->
     <!--[if IE 7]><link rel="stylesheet" type="text/css" href="/admin/stylesheets/ie.css" media="screen" /><![endif]-->
 
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
+    <script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
 
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
-    <%= javascript_include_tag 'jquery_ujs' %>
     <%= javascript_include_tag :ckeditor %>
-    
-    <%= javascript_include_tag "/admin/javascripts/jquery.livequery.js",
+    <%= javascript_include_tag "jquery_ujs",
+                               "/admin/javascripts/jquery.livequery.js",
                                "/admin/javascripts/jquery.ui.nestedSortable.js",
                                "/admin/javascripts/uniform/jquery.uniform.js",
                                "/admin/javascripts/livevalidation/livevalidation_standalone.js",
                                "/admin/javascripts/tipsy/jquery.tipsy.js",
                                "/admin/javascripts/uitotop/js/jquery.ui.totop.js",
                                "/admin/javascripts/DataTables/jquery.dataTables.min.js",
+                               "/admin/javascripts/jquery.iframe-transport.js",
+                               "/admin/javascripts/jquery.fileupload.js",
+                               "/admin/javascripts/jquery.fileupload-ui.js",
                                "/admin/javascripts/application.js"
     %>
     
-    <%#= javascript_include_tag "/admin/javascripts/fancybox/jquery.fancybox-1.3.4",
-                                "/admin/javascripts/jqueryFileTree/jqueryFileTree",
-                                "/admin/javascripts/fullcalendar/fullcalendar.min",
-                                "/admin/javascripts/fullcalendar/gcal"
-    %>
-    
     <%= yield :extra_header %>
     <%= csrf_meta_tag %>
 </head>
@@ -150,6 +148,108 @@
                 <%= yield %>
             </div>            
         </div>
+
+        <!-- TEST AREA - NOT FOR PRODUCTION -->
+        <div class="cell_13">
+            <div id="upload-test">
+                <div id="fileupload">
+                    <%= form_for Upload.new, :url => admin_uploads_path, :html => { :multipart => true } do |f| %>
+                        <div class="fileupload-buttonbar">
+                            <label class="fileinput-button">
+                                <span>Add files...</span>
+                                        <%= f.file_field :data %>
+                            </label>
+                            <!-- <button type="submit" class="start">Start upload</button> -->
+                            <button type="reset" class="cancel">Cancel upload</button>
+                            <!-- <button type="button" class="delete">Delete files</button> -->
+                        </div>
+                    <% end %>
+                    <div class="fileupload-content">
+                        <table class="files"></table>
+                        <div class="fileupload-progressbar"></div>
+                    </div>
+                </div>
+
+                <script id="template-upload" type="text/x-jquery-tmpl">
+                    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+                        <td class="preview"></td>
+                        <td class="name">${name}</td>
+                        <td class="size">${sizef}</td>
+                        {{if error}}
+                            <td class="error" colspan="2">Error:
+                                {{if error === 'custom_failure'}}Custom Error Message
+                                {{else}}${error}
+                                {{/if}}
+                            </td>
+                        {{else}}
+                            <td class="progress"><div></div></td>
+                            <td class="start"><button>Start</button></td>
+                        {{/if}}
+                        <td class="cancel"><button>Cancel</button></td>
+                    </tr>
+                </script>
+                <script id="template-download" type="text/x-jquery-tmpl">
+                    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+                        {{if error}}
+                            <td></td>
+                            <td class="name">${name}</td>
+                            <td class="size">${sizef}</td>
+                            <td class="error" colspan="2">Error:
+                                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                                {{else}}${error}
+                                {{/if}}
+                            </td>
+                        {{else}}
+                            <td class="preview">
+                                {{if thumbnail_url}}
+                                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                                {{/if}}
+                            </td>
+                            <td class="name">
+                                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+                            </td>
+                            <td class="size">${sizef}</td>
+                            <td colspan="2"></td>
+                        {{/if}}
+                        <td class="delete">
+                            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
+                        </td>
+                    </tr>
+                </script>
+
+                <script type="text/javascript" charset="utf-8">
+                    $(function () {
+                        // Initialize the jQuery File Upload widget:
+                        $('#fileupload').fileupload();
+                        // 
+                        // Load existing files:
+                        $.getJSON($('#fileupload form').prop('action'), function (files) {
+                            var fu = $('#fileupload').data('fileupload');
+                            fu._adjustMaxNumberOfFiles(-files.length);
+                            fu._renderDownload(files)
+                                .appendTo($('#fileupload .files'))
+                                .fadeIn(function () {
+                                    // Fix for IE7 and lower:
+                                    $(this).show();
+                                });
+                        });
+
+                        // Open download dialogs via iframes,
+                        // to prevent aborting current uploads:
+                        $('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
+                            e.preventDefault();
+                            $('<iframe style="display:none;"></iframe>')
+                                .prop('src', this.href)
+                                .appendTo('body');
+                        });
+
+                    });
+                </script>
+
+            </div><!-- end upload test -->         
+        </div><!-- end cell_13 -->
+
+
     </div><!-- #wrapper -->
     <div class="hive_16">
         <footer id="template_options" class="clearfix">

config/routes.rb

@@ -47,6 +47,7 @@
       post 'quick_create', :on => :collection
     end
     resource :settings
+    resources :uploads, :only => [:index, :create, :destroy]
   end
 
   # Public routes

db/migrate/20111129162557_create_uploads.rb

@@ -0,0 +1,18 @@
+class CreateUploads < ActiveRecord::Migration
+  def self.up
+    create_table :uploads do |t|
+      t.string :data_content_type
+      t.string :data_file_name
+      t.integer :data_file_size
+      t.datetime :data_updated_at
+      t.string :type
+      t.integer :attachable_id
+      t.string :attachable_type
+      t.timestamps
+    end
+  end
+
+  def self.down
+    drop_table :uploads
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20111128094329) do
+ActiveRecord::Schema.define(:version => 20111129162557) do
 
   create_table "article_layouts", :force => true do |t|
     t.string   "layout_name"
@@ -170,6 +170,18 @@
     t.string   "handler"
   end
 
+  create_table "uploads", :force => true do |t|
+    t.string   "data_content_type"
+    t.string   "data_file_name"
+    t.integer  "data_file_size"
+    t.datetime "data_updated_at"
+    t.string   "type"
+    t.integer  "attachable_id"
+    t.string   "attachable_type"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
   create_table "users", :force => true do |t|
     t.string   "email",                               :default => "", :null => false
     t.string   "firstname"