rails-uploader 0.0.8 → 0.1.0

data/README.md

@@ -98,19 +98,19 @@ Stylesheets:
 or FormBuilder:
 
 ``` ruby
-<%= form.uploader_field :photo %>
+<%= form.uploader_field :photo, :sortable => true %>
 ```
 
 ### Formtastic
 
 ``` ruby
-<%= f.input :picture, :as => :uploader %>
+<%= f.input :pictures, :as => :uploader %>
 ```
 
 ### SimpleForm
 
 ``` ruby
-<%= f.input :picture, :as => :uploader %>
+<%= f.input :pictures, :as => :uploader, :input_html => {:sortable => true} %>
 ```
 
 ## Contributing

data/app/controllers/uploader/attachments_controller.rb

@@ -11,6 +11,16 @@ module Uploader
       render_resourse(@asset, 201)
     end
     
+    def update
+      @assets = Array.wrap(params[:assets] || [])
+
+      @assets.each_with_index do |id, index|
+        @klass.where(:id => id).update_all(:sort_order => index)
+      end
+
+      render_json(:files => [])
+    end
+
     def destroy
       @asset = @klass.find(params[:id])
       @asset.uploader_destroy(params, request)
@@ -20,22 +30,22 @@ module Uploader
     protected
     
       def find_klass
-        @klass = params[:klass].blank? ? nil : params[:klass].safe_constantize
+        @klass = Uploader.constantize(params[:klass])
         raise ActionController::RoutingError.new("Class not found #{params[:klass]}") if @klass.nil?
       end
       
       def render_resourse(record, status = 200)
         if record.errors.empty?
-          render_json([record].to_json(:root => false), status)
+          render_json({:files => [record]}, status)
         else
-          render_json([record.errors].to_json, 422)
+          render_json(record.errors, 422)
         end
       end
       
-      def render_json(body, status = 200)
+      def render_json(hash_or_object, status = 200)
         self.status = status
         self.content_type = "application/json"
-        self.response_body = body
+        self.response_body = hash_or_object.to_json(:root => false)
       end
   end
 end

data/app/views/uploader/default/_container.html.erb

@@ -21,10 +21,12 @@
 	<%= render :partial => "uploader/#{field.theme}/init", :locals => {:field => field} %>
 	<%= render :partial => "uploader/#{field.theme}/upload", :locals => {:field => field} %>
   <%= render :partial => "uploader/#{field.theme}/download", :locals => {:field => field} %>
+  <%= render :partial => "uploader/#{field.theme}/sortable", :locals => {:field => field} if field.sortable? %>
   
 	<script type="text/javascript">
     $(function() {
-      var container = $("#<%= field.id %> div.uploader-files");
+      var uploader, container;
+      container = $("#<%= field.id %> div.uploader-files");
       
       $('#<%= field.id %> input[type="file"]').bind("init.uploader", function(e){
         $(this).fileupload({
@@ -40,7 +42,8 @@
         });
         
         <% if field.exists? -%>
-          $(this).data("fileupload")
+          uploader = ($(this).data('blueimp-fileupload') || $(this).data('fileupload'));
+          uploader
             ._renderDownload(<%=raw field.values.to_json(:root => false) %>)
             .appendTo(container);
         <% end -%>

data/app/views/uploader/default/_download.html.erb

@@ -1,12 +1,15 @@
 <!-- The template to display files available for download -->
 <script id="template-download-<%= field.klass %>" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
-  <div class="attach_item template-download">
+
+  <div id="asset_{%=file.id%}" class="attach_item template-download">
 		<div class="delete">
-		  <a href="/" class="del_btn" data-type="DELETE" data-url="/uploader/attachments/{%=file.id%}?klass=<%= field.klass %>"></a>
+		  <a href="#" class="del_btn" data-type="DELETE" data-url="/uploader/attachments/{%=file.id%}?klass=<%= field.klass %>"></a>
 		</div>
 		<div class="thumbnail preview">
-		  <a href="{%=file.url%}"><img src="{%=file.thumb_url%}" title="{%=file.filename%}" rel="gallery"></a>
+		  <a href="{%=file.url%}" download="{%=file.filename%}">
+		  	<img src="{%=file.thumb_url%}" title="{%=file.filename%}" rel="gallery" />
+		  </a>
 		</div>
 		<div class="infoHolder">
 			<div class="fileName">{%=file.filename%}</div>

data/app/views/uploader/default/_sortable.html.erb

@@ -0,0 +1,24 @@
+<script type="text/javascript">
+  $(function() {
+    var container, data;
+
+    container = $("#<%= field.id %> div.uploader-files");
+
+    container.sortable({
+      placeholder: "attach_item",
+      cursor: "move",
+      update: function(event, ui) {
+        data = $(this).sortable("serialize", {key: "assets[]"});
+
+        $.rails.ajax({
+          url: "<%= uploader.attachment_path(field.klass) %>",
+          type: "PUT",
+          dataType: "json",
+          data: data + "&klass=<%= field.klass %>"
+        });
+      }
+    });
+
+    container.disableSelection();
+  });
+</script>

data/config/routes.rb

@@ -1,3 +1,3 @@
 Uploader::Engine.routes.draw do
-  resources :attachments, :only => [:create, :destroy]
+  resources :attachments, :only => [:create, :update, :destroy]
 end

data/lib/uploader.rb

@@ -10,7 +10,7 @@ module Uploader
     autoload :FormBuilder, 'uploader/helpers/form_builder'
     autoload :FieldTag, 'uploader/helpers/field_tag'
   end
-  
+
   def self.guid
     SecureRandom.base64(15).tr('+/=', 'xyz').slice(0, 10)
   end
@@ -25,6 +25,11 @@ module Uploader
       list
     end
   end
+
+  def self.constantize(klass)
+    return if klass.blank?
+    klass.safe_constantize
+  end
 end
 
 require 'uploader/engine'

data/lib/uploader/helpers/field_tag.rb

@@ -55,6 +55,10 @@ module Uploader
       def exists?
         values.map(&:persisted?).any?
       end
+
+      def sortable?
+        @options[:sortable] == true
+      end
       
       def klass
         @klass ||= @object.class.fileupload_klass(method_name)

data/lib/uploader/version.rb

@@ -1,3 +1,3 @@
 module Uploader
-  VERSION = "0.0.8".freeze
+  VERSION = "0.1.0".freeze
 end

data/spec/dummy/log/test.log

@@ -274,3 +274,55 @@ Started POST "/uploader/attachments" for 127.0.0.1 at 2012-09-12 16:41:07 +0300
    (79.3ms)  DELETE FROM sqlite_sequence where name = 'assets';
    (79.6ms)  DELETE FROM "articles";
    (79.3ms)  DELETE FROM sqlite_sequence where name = 'articles';
+Connecting to database specified by database.yml
+   (0.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" 
+Migrating to CreateAssets (20120508093416)
+Migrating to CreateArticles (20120508093830)
+   (256.6ms)  DELETE FROM "assets";
+   (0.2ms)  DELETE FROM sqlite_sequence where name = 'assets';
+   (256.3ms)  DELETE FROM "articles";
+   (0.2ms)  DELETE FROM sqlite_sequence where name = 'articles';
+
+
+Started POST "/uploader/attachments" for 127.0.0.1 at 2013-02-25 01:51:39 +0200
+   (0.2ms)  begin transaction
+  SQL (142.8ms)  INSERT INTO "assets" ("assetable_id", "assetable_type", "created_at", "data_content_type", "data_file_name", "data_file_size", "guid", "type", "updated_at", "user_id") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)  [["assetable_id", 1], ["assetable_type", "Article"], ["created_at", Sun, 24 Feb 2013 23:51:40 UTC +00:00], ["data_content_type", nil], ["data_file_name", "rails.png"], ["data_file_size", nil], ["guid", "SOMESTRING"], ["type", "Picture"], ["updated_at", Sun, 24 Feb 2013 23:51:40 UTC +00:00], ["user_id", nil]]
+   (577.5ms)  commit transaction
+   (0.1ms)  begin transaction
+  SQL (0.7ms)  INSERT INTO "articles" ("content", "created_at", "title", "updated_at") VALUES (?, ?, ?, ?)  [["content", "MyText"], ["created_at", Sun, 24 Feb 2013 23:51:41 UTC +00:00], ["title", "MyString"], ["updated_at", Sun, 24 Feb 2013 23:51:41 UTC +00:00]]
+   (398.0ms)  commit transaction
+   (0.2ms)  begin transaction
+  SQL (0.7ms)  INSERT INTO "assets" ("assetable_id", "assetable_type", "created_at", "data_content_type", "data_file_name", "data_file_size", "guid", "type", "updated_at", "user_id") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)  [["assetable_id", 1], ["assetable_type", "Article"], ["created_at", Sun, 24 Feb 2013 23:51:41 UTC +00:00], ["data_content_type", "image/png"], ["data_file_name", "rails.png"], ["data_file_size", nil], ["guid", nil], ["type", "Picture"], ["updated_at", Sun, 24 Feb 2013 23:51:41 UTC +00:00], ["user_id", nil]]
+   (341.3ms)  commit transaction
+   (0.3ms)  SELECT COUNT(*) FROM "assets" WHERE "assets"."type" IN ('Picture')
+
+
+Started DELETE "/uploader/attachments/2" for 127.0.0.1 at 2013-02-25 01:51:42 +0200
+  Picture Load (0.4ms)  SELECT "assets".* FROM "assets" WHERE "assets"."type" IN ('Picture') AND "assets"."id" = ? LIMIT 1  [["id", "2"]]
+   (0.1ms)  begin transaction
+  SQL (0.4ms)  DELETE FROM "assets" WHERE "assets"."type" IN ('Picture') AND "assets"."id" = ?  [["id", 2]]
+   (379.4ms)  commit transaction
+   (0.3ms)  SELECT COUNT(*) FROM "assets" WHERE "assets"."type" IN ('Picture')
+
+
+Started POST "/uploader/attachments" for 127.0.0.1 at 2013-02-25 01:51:42 +0200
+   (490.1ms)  DELETE FROM "assets";
+   (442.8ms)  DELETE FROM sqlite_sequence where name = 'assets';
+   (335.7ms)  DELETE FROM "articles";
+   (548.4ms)  DELETE FROM sqlite_sequence where name = 'articles';
+   (0.1ms)  begin transaction
+  SQL (0.6ms)  INSERT INTO "articles" ("content", "created_at", "title", "updated_at") VALUES (?, ?, ?, ?)  [["content", "MyText"], ["created_at", Sun, 24 Feb 2013 23:51:44 UTC +00:00], ["title", "MyString"], ["updated_at", Sun, 24 Feb 2013 23:51:44 UTC +00:00]]
+   (487.8ms)  commit transaction
+   (0.1ms)  begin transaction
+  SQL (0.6ms)  INSERT INTO "assets" ("assetable_id", "assetable_type", "created_at", "data_content_type", "data_file_name", "data_file_size", "guid", "type", "updated_at", "user_id") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)  [["assetable_id", 1], ["assetable_type", "Article"], ["created_at", Sun, 24 Feb 2013 23:51:45 UTC +00:00], ["data_content_type", "image/png"], ["data_file_name", "rails.png"], ["data_file_size", nil], ["guid", nil], ["type", "Picture"], ["updated_at", Sun, 24 Feb 2013 23:51:45 UTC +00:00], ["user_id", nil]]
+   (481.1ms)  commit transaction
+  Picture Load (0.5ms)  SELECT "assets".* FROM "assets" WHERE "assets"."type" IN ('Picture') AND "assets"."guid" IS NULL LIMIT 1
+  SQL (2057.4ms)  UPDATE "assets" SET "assetable_id" = 1000, "guid" = NULL WHERE "assets"."type" IN ('Picture') AND "assets"."guid" IS NULL AND "assets"."assetable_type" = 'Article'
+  Picture Load (0.2ms)  SELECT "assets".* FROM "assets" WHERE "assets"."type" IN ('Picture') AND "assets"."id" = ? LIMIT 1  [["id", 1]]
+  Picture Load (0.4ms)  SELECT "assets".* FROM "assets" WHERE "assets"."type" IN ('Picture') AND "assets"."guid" = 'h4uBeA8SVy' LIMIT 1
+   (0.2ms)  begin transaction
+   (0.1ms)  commit transaction
+   (901.4ms)  DELETE FROM "assets";
+   (684.1ms)  DELETE FROM sqlite_sequence where name = 'assets';
+   (900.7ms)  DELETE FROM "articles";
+   (764.7ms)  DELETE FROM sqlite_sequence where name = 'articles';

data/vendor/assets/javascripts/uploader/jquery.fileupload-fp.js

@@ -0,0 +1,223 @@
+/*
+ * jQuery File Upload File Processing Plugin 1.2.1
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint nomen: true, unparam: true, regexp: true */
+/*global define, window, document */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            'jquery',
+            'load-image',
+            'canvas-to-blob',
+            './jquery.fileupload'
+        ], factory);
+    } else {
+        // Browser globals:
+        factory(
+            window.jQuery,
+            window.loadImage
+        );
+    }
+}(function ($, loadImage) {
+    'use strict';
+
+    // The File Upload FP version extends the fileupload widget
+    // with file processing functionality:
+    $.widget('blueimp.fileupload', $.blueimp.fileupload, {
+
+        options: {
+            // The list of file processing actions:
+            process: [
+            /*
+                {
+                    action: 'load',
+                    fileTypes: /^image\/(gif|jpeg|png)$/,
+                    maxFileSize: 20000000 // 20MB
+                },
+                {
+                    action: 'resize',
+                    maxWidth: 1920,
+                    maxHeight: 1200,
+                    minWidth: 800,
+                    minHeight: 600
+                },
+                {
+                    action: 'save'
+                }
+            */
+            ],
+
+            // 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:
+            add: function (e, data) {
+                $(this).fileupload('process', data).done(function () {
+                    data.submit();
+                });
+            }
+        },
+
+        processActions: {
+            // Loads the image given via data.files and data.index
+            // as img element if the browser supports canvas.
+            // Accepts the options fileTypes (regular expression)
+            // and maxFileSize (integer) to limit the files to load:
+            load: function (data, options) {
+                var that = this,
+                    file = data.files[data.index],
+                    dfd = $.Deferred();
+                if (window.HTMLCanvasElement &&
+                        window.HTMLCanvasElement.prototype.toBlob &&
+                        ($.type(options.maxFileSize) !== 'number' ||
+                            file.size < options.maxFileSize) &&
+                        (!options.fileTypes ||
+                            options.fileTypes.test(file.type))) {
+                    loadImage(
+                        file,
+                        function (img) {
+                            if (!img.src) {
+                                return dfd.rejectWith(that, [data]);
+                            }
+                            data.img = img;
+                            dfd.resolveWith(that, [data]);
+                        }
+                    );
+                } else {
+                    dfd.rejectWith(that, [data]);
+                }
+                return dfd.promise();
+            },
+            // Resizes the image given as data.img and updates
+            // data.canvas with the resized image as canvas element.
+            // Accepts the options maxWidth, maxHeight, minWidth and
+            // minHeight to scale the given image:
+            resize: function (data, options) {
+                var img = data.img,
+                    canvas;
+                options = $.extend({canvas: true}, options);
+                if (img) {
+                    canvas = loadImage.scale(img, options);
+                    if (canvas.width !== img.width ||
+                            canvas.height !== img.height) {
+                        data.canvas = canvas;
+                    }
+                }
+                return data;
+            },
+            // Saves the processed image given as data.canvas
+            // inplace at data.index of data.files:
+            save: function (data, options) {
+                // Do nothing if no processing has happened:
+                if (!data.canvas) {
+                    return data;
+                }
+                var that = this,
+                    file = data.files[data.index],
+                    name = file.name,
+                    dfd = $.Deferred(),
+                    callback = function (blob) {
+                        if (!blob.name) {
+                            if (file.type === blob.type) {
+                                blob.name = file.name;
+                            } else if (file.name) {
+                                blob.name = file.name.replace(
+                                    /\..+$/,
+                                    '.' + blob.type.substr(6)
+                                );
+                            }
+                        }
+                        // Store the created blob at the position
+                        // of the original file in the files list:
+                        data.files[data.index] = blob;
+                        dfd.resolveWith(that, [data]);
+                    };
+                // Use canvas.mozGetAsFile directly, to retain the filename, as
+                // Gecko doesn't support the filename option for FormData.append:
+                if (data.canvas.mozGetAsFile) {
+                    callback(data.canvas.mozGetAsFile(
+                        (/^image\/(jpeg|png)$/.test(file.type) && name) ||
+                            ((name && name.replace(/\..+$/, '')) ||
+                                'blob') + '.png',
+                        file.type
+                    ));
+                } else {
+                    data.canvas.toBlob(callback, file.type);
+                }
+                return dfd.promise();
+            }
+        },
+
+        // Resizes the file at the given index and stores the created blob at
+        // the original position of the files list, returns a Promise object:
+        _processFile: function (files, index, options) {
+            var that = this,
+                dfd = $.Deferred().resolveWith(that, [{
+                    files: files,
+                    index: index
+                }]),
+                chain = dfd.promise();
+            that._processing += 1;
+            $.each(options.process, function (i, settings) {
+                chain = chain.pipe(function (data) {
+                    return that.processActions[settings.action]
+                        .call(this, data, settings);
+                });
+            });
+            chain.always(function () {
+                that._processing -= 1;
+                if (that._processing === 0) {
+                    that.element
+                        .removeClass('fileupload-processing');
+                }
+            });
+            if (that._processing === 1) {
+                that.element.addClass('fileupload-processing');
+            }
+            return chain;
+        },
+
+        // Processes the files given as files property of the data parameter,
+        // returns a Promise object that allows to bind a done handler, which
+        // will be invoked after processing all files (inplace) is done:
+        process: function (data) {
+            var that = this,
+                options = $.extend({}, this.options, data);
+            if (options.process && options.process.length &&
+                    this._isXHRUpload(options)) {
+                $.each(data.files, function (index, file) {
+                    that._processingQueue = that._processingQueue.pipe(
+                        function () {
+                            var dfd = $.Deferred();
+                            that._processFile(data.files, index, options)
+                                .always(function () {
+                                    dfd.resolveWith(that);
+                                });
+                            return dfd.promise();
+                        }
+                    );
+                });
+            }
+            return this._processingQueue;
+        },
+
+        _create: function () {
+            this._super();
+            this._processing = 0;
+            this._processingQueue = $.Deferred().resolveWith(this)
+                .promise();
+        }
+
+    });
+
+}));