RubyGems - avatars_for_rails - Versions diffs - 0.0.5 → 0.0.6 - Mend

avatars_for_rails 0.0.5 → 0.0.6

Files changed (19) hide show

data/.gitignore +1 -0
data/Gemfile.lock +4 -4
data/README.rdoc +17 -5
data/app/controllers/avatars_controller.rb +11 -11
data/app/models/avatar.rb +0 -1
data/app/views/avatars/_errors.html.erb +2 -3
data/app/views/avatars/_list.html.erb +8 -17
data/app/views/avatars/_new.html.erb +4 -2
data/app/views/avatars/update.js.erb +3 -0
data/avatars_for_rails.gemspec +2 -2
data/config/locales/en.yml +1 -1
data/lib/avatars_for_rails.rb +8 -7
data/lib/generators/avatars_for_rails/templates/initializer.rb +1 -8
data/lib/generators/avatars_for_rails/templates/public/javascripts/jquery.fileupload-ui.js +333 -63
data/lib/generators/avatars_for_rails/templates/public/javascripts/jquery.fileupload.js +654 -173
data/lib/generators/avatars_for_rails/templates/public/stylesheets/jquery.fileupload-ui.css +88 -21
data/spec/dummy/app/controllers/application_controller.rb +5 -0
data/spec/dummy/config/initializers/avatars_for_rails.rb +3 -4
metadata +5 -5

data/.gitignore CHANGED Viewed

@@ -8,3 +8,4 @@ spec/dummy/public/images/tmp/
 spec/dummy/public/system/
 *.DS_Store
 .project
+*.gem

data/Gemfile.lock CHANGED Viewed

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avatars_for_rails (0.0.1)
+    avatars_for_rails (0.0.6)
       foreigner (~> 0.9.1)
       paperclip (~> 2.3.4)
       rmagick (~> 2.13.1)
@@ -55,7 +55,7 @@ GEM
     factory_girl (1.3.3)
     ffi (1.0.7)
       rake (>= 0.8.7)
-    foreigner (0.9.1)
+    foreigner (0.9.2)
     forgery (0.3.7)
       nokogiri (~> 1.4)
     i18n (0.5.0)
@@ -68,7 +68,7 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.16)
     nokogiri (1.4.4)
-    paperclip (2.3.10)
+    paperclip (2.3.11)
       activerecord (>= 2.3.0)
       activesupport (>= 2.3.2)
     polyglot (0.3.1)
@@ -132,7 +132,7 @@ DEPENDENCIES
   capybara (~> 0.3.9)
   factory_girl (~> 1.3.2)
   forgery (~> 0.3.6)
-  rails (~> 3.0.5)
+  rails (>= 3.0.5)
   rspec-rails (~> 2.5.0)
   ruby-debug (~> 0.10.3)
   sqlite3-ruby

data/README.rdoc CHANGED Viewed

@@ -40,13 +40,15 @@ In your application layout you have to add  this on the <head> label:
     </script>
   </head>
-In config/initializers/avatars_for_rails.rb  you have to change:
+In config/initializers/avatars_for_rails.rb  you have to define:
-  def current_avatarable_object
-      return Actor.find(:all).first
+  AvatarsForRails.setup do |config|
+    config.avatarable_model = :actor
+    config.current_avatarable_object = :current_actor
   end
-to return the actor you wants to be the owner of the new avatars, etc For example, you can return the current logged in actor.
+* actor is the name of the object owner of the avatars
+* current_actor will return the actor you wants to be the owner of the new avatars, etc For example, you can return the current logged in actor. This method can be defined on the application_controller of your app.
 Finally, add to your actor model the relation with avatars_for_rails:
@@ -56,6 +58,8 @@ Now, if you go to /avatars you will see:
 * A list of all the avatars for the current actor. You can change the default and delete avatars in this list.
 * Forms for creating a new avatar with two options. A typical file filed or a drag and drop file field
+Of course, you can overwrite the index.html.erb so you can personalize the index.
 For rendering the avatars list:
   <%= render :partial => 'list' %>
@@ -79,9 +83,17 @@ or
     <%= stylesheet_link_tag "jquery.fileupload-ui", :media => "screen, projection" %><br/>
   <%end%>
+If you want to get an actor's active avatar you can do:
+  actor.avatars.active.first
 For rendering an image_tag for an acctor's avatar:
   <%= image_tag(avatar.logo.url(:style) ) %>
+If you wan't to display an actor's active avatar:
+  <%= image_tag(actor.avatars.active.first, :id => "current_avatar_img") %>
+The id of the image it's important. If it's set like this, when you change the default avatar from the list, it will change the avatar shown on the image with jquery.
 The avaible styles for now are:
   :representation => 20x20 px

data/app/controllers/avatars_controller.rb CHANGED Viewed

@@ -14,7 +14,7 @@ class AvatarsController < ApplicationController
   def new
     @avatars = Avatar.all
     @avatar = Avatar.create(params[:avatar])
     if params[:drag_name].blank?
       respond_to do |format|
         format.html # new.html.erb
@@ -32,7 +32,7 @@ class AvatarsController < ApplicationController
   end
   def update
-    #debugger
     if !current_avatarable_object.avatars.blank?
       new_logo = Avatar.find(params[:id])
@@ -40,8 +40,7 @@ class AvatarsController < ApplicationController
       if (new_logo.avatarable == current_avatarable_object)
         actual_logo = current_avatarable_object.avatars.active.first
         unless actual_logo.blank?
-          #actual_logo.active = false
-          #actual_logo.save
+          return if new_logo == actual_logo
           old_logo_id = actual_logo.id
           current_avatarable_object.avatars.each do |old_logo|
             old_logo.active = false
@@ -57,7 +56,7 @@ class AvatarsController < ApplicationController
         respond_to do |format|
           format.js { render :layout=>false , :locals=>{:new_id => params[:id],:old_id => old_logo_id}}
         end
       end
     end
@@ -66,10 +65,11 @@ class AvatarsController < ApplicationController
   def create
     @avatar = current_avatarable_object.avatars.create(params[:avatar])
+  #debugger
     if @avatar.new_record?
+      #debugger
       if (params[:avatar].blank? || params[:avatar][:drag].nil?)
-        render :new
+        render :new, :layout => false
       else
         render :json => {:name => File.basename(@avatar.logo.queued_for_write[:original].path) }
       end
@@ -101,11 +101,11 @@ class AvatarsController < ApplicationController
       end
     end
   #redirect_to avatars_path
   end
-  #def current_avatarable_object
-    #return Actor.find(:all).first
-  #end
+  def current_avatarable_object
+    __send__ AvatarsForRails.current_avatarable_object
+   #return Actor.find(:all).first
+  end
 end

data/app/models/avatar.rb CHANGED Viewed

@@ -14,7 +14,6 @@ class Avatar < ActiveRecord::Base
   after_validation :precrop_done
-  #belongs_to :actor
   belongs_to AvatarsForRails.avatarable_model
   scope :active, where(:active => true)

data/app/views/avatars/_errors.html.erb CHANGED Viewed

@@ -1,6 +1,5 @@
 <br class="clearfloat" />
-<div class="space_center"></div>
-<% unless @avatar.logo.errors["invalid_type"].blank?%>
-  <%= @avatar.logo.errors["invalid_type"]%>
+<% @avatar.errors.each do |error| %>
+  <%= error[1]%><br/><br/>
 <% end %>

data/app/views/avatars/_list.html.erb CHANGED Viewed

@@ -8,19 +8,13 @@
   <div class="avatars" id="all_avatars">
   <% @avatars.each do |avatar| %>
     <% unless avatar.id.blank? %>
-    <%= div_for(avatar) do %>
-         <div class="boxgrid captionfull">
-           <%= image_tag(avatar.logo.url(:profile), :class => avatar.active ? 'default' : 'non_default', :size => '94x94', :id => "avatar_img_#{avatar.id}") %>
-           <% if avatar.active %>
-             <div class="cover boxcaption">
-               <%= link_to "Delete avatar", avatar, :confirm => t('avatar.destroy_sure'), :method => :delete, :remote => true %>
-             </div>
-           <% else %>
-             <div class="cover boxcaption">
-               <%= link_to "Set as default", avatar, :confirm => t('avatar.set_default_sure'), :method => :put, :remote => true %>
-               <%= link_to "Delete avatar", avatar, :confirm => t('avatar.destroy_sure'), :method => :delete, :remote => true %>
-             </div>
-           <% end %>
+      <%= div_for(avatar) do %>
+        <div class="boxgrid captionfull">
+          <%= image_tag(avatar.logo.url(:profile), :class => avatar.active ? 'default' : 'non_default', :size => '94x94', :id => "avatar_img_#{avatar.id}") %>
+          <div class="cover boxcaption">
+            <%= link_to t('avatar.set_default'), avatar, :confirm => t('avatar.set_default_sure'), :method => :put, :remote => true, :id => "avatar_link_#{avatar.id}", :style => avatar.active ? 'display:none;': 'display:solid;' %>
+            <%= link_to t('avatar.destroy'), avatar, :confirm => t('avatar.destroy_sure'), :method => :delete, :remote => true %>
+          </div>
          </div>
       <% end %>
       <% end %>
@@ -33,7 +27,4 @@
   <h2><%=t('avatar.text.new') %></h2>
 <% else %>
   <h2><%= t('avatar.new') %></h2>
-<% end %>
+<% end %>

data/app/views/avatars/_new.html.erb CHANGED Viewed

@@ -1,15 +1,17 @@
 <% if !@avatar.logo.errors['precrop'].blank? %>
-	<h2><%= t('avatar.crop_image') %></h2>
+	<!--<h2><%= t('avatar.crop_image') %></h2>
 	<br class="clearfloat" />
   <div class="space_center"></div>
+-->
 	<%= render :partial => 'precrop' %>
 <% elsif !@avatar.errors.blank? %>
   <%= render :partial => 'errors' %>
 <% else %>
-  <br class="clearfloat" />
+<!--  <br class="clearfloat" />
   <div class="space_center"></div>
   <div class="space_center"></div>
   <div id="content_logo">
 	<%= render :partial => 'form' %>
+-->
 <% end %>

data/app/views/avatars/update.js.erb CHANGED Viewed

@@ -1,6 +1,9 @@
 $("#avatar_img_<%= old_id %>").removeClass("default");
 $("#avatar_img_<%= old_id %>").addClass("non_default");
+$("#avatar_link_<%= old_id %>").show();
 $("#avatar_img_<%= new_id %>").removeClass("non_default");
 $("#avatar_img_<%= new_id %>").addClass("default");
+$("#avatar_link_<%= new_id %>").hide();
+$("#current_avatar_img").attr('src', $("#avatar_img_<%= new_id %>").attr('src') );

data/avatars_for_rails.gemspec CHANGED Viewed

@@ -2,7 +2,7 @@
 # project in your rails apps through git.
 Gem::Specification.new do |s|
 	s.name = "avatars_for_rails"
-	s.version = "0.0.5"
+	s.version = "0.0.6"
 	s.authors = ["Jaime Castro Montero"]
 	s.summary = "Avatar manager for rails apps."
 	s.description = "A Rails engine that allows any model to act as avatarable, permitting it to have a complete avatar manager with a few options."
@@ -20,7 +20,7 @@ Gem::Specification.new do |s|
 	# Development Gem dependencies
 	#
-	s.add_development_dependency('rails', '~> 3.0.5')
+	s.add_development_dependency('rails', '>= 3.0.5')
 	# Testing database
 	s.add_development_dependency('sqlite3-ruby')
 	# Debugging

data/config/locales/en.yml CHANGED Viewed

@@ -4,7 +4,7 @@ en:
   avatar:
     crop_image: "Crop the uploaded image"
     crop_submit: "Crop image"
-    destroy: "Delete"
+    destroy: "Delete avatar"
     destroy_sure: "Are you sure you wan't to delete the selected avatar?"
     error:
       no_file: "You have to select a file"

data/lib/avatars_for_rails.rb CHANGED Viewed

@@ -4,25 +4,26 @@ require 'paperclip'
 module AvatarsForRails
-  autoload :AvatarsControllerConfig,   'avatars_for_rails/avatars_controller_config'
+  #autoload :AvatarsControllerConfig,   'avatars_for_rails/avatars_controller_config'
   mattr_accessor :avatarable_model
+  mattr_accessor :current_avatarable_object
    class << self
     def setup
       yield self
     end
    end
   class Engine < Rails::Engine
-    config.to_prepare do
+=begin
+    config.to_prepare do
       AvatarsController.class_eval do
         #include AvatarsForRails::AvatarsControllerConfig
         include AvatarsControllerConfig
-      end
+      end
     end
+=end
   end
 end

data/lib/generators/avatars_for_rails/templates/initializer.rb CHANGED Viewed

@@ -1,11 +1,4 @@
 AvatarsForRails.setup do |config|
   config.avatarable_model = :<%= file_name %>
-end
-module AvatarsForRails::AvatarsControllerConfig
-  def current_avatarable_object
-    return current_<%= file_name %>
-  end
+  config.current_avatarable_object = :current_<%= file_name %>
 end

data/lib/generators/avatars_for_rails/templates/public/javascripts/jquery.fileupload-ui.js CHANGED Viewed

@@ -1,51 +1,142 @@
 /*
- * jQuery File Upload User Interface Plugin 3.2.2
+ * jQuery File Upload User Interface Plugin 4.4
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
  *
- * Copyright 2010, Sebastian Tschan, AQUANTUM
  * Licensed under the MIT license:
  * http://creativecommons.org/licenses/MIT/
- *
- * https://blueimp.net
- * http://www.aquantum.de
  */
 /*jslint browser: true */
-/*global jQuery */
+/*global jQuery, FileReader, URL, webkitURL */
 (function ($) {
+    'use strict';
-    var UploadHandler,
-        methods;
+    var undef = 'undefined',
+        func = 'function',
+        UploadHandler,
+        methods,
+        MultiLoader = function (callBack) {
+            var loaded = 0,
+                list = [];
+            this.complete = function () {
+                loaded += 1;
+                if (loaded === list.length + 1) {
+                    // list.length * onComplete + 1 * onLoadAll
+                    callBack(list);
+                    loaded = 0;
+                    list = [];
+                }
+            };
+            this.push = function (item) {
+                list.push(item);
+            };
+            this.getList = function () {
+                return list;
+            };
+        };
     UploadHandler = function (container, options) {
         var uploadHandler = this,
-            undef = 'undefined',
-            func = 'function',
             dragOverTimeout,
-            isDropZoneEnlarged;
+            isDropZoneEnlarged,
+            multiLoader = new MultiLoader(function (list) {
+                uploadHandler.hideProgressBarAll(function () {
+                    uploadHandler.resetProgressBarAll();
+                    if (typeof uploadHandler.onCompleteAll === func) {
+                        uploadHandler.onCompleteAll(list);
+                    }
+                });
+            }),
+            getUploadTable = function (handler) {
+                return typeof handler.uploadTable === func ?
+                    handler.uploadTable(handler) : handler.uploadTable;
+            },
+            getDownloadTable = function (handler) {
+                return typeof handler.downloadTable === func ?
+                    handler.downloadTable(handler) : handler.downloadTable;
+            };
+        this.requestHeaders = {'Accept': 'application/json, text/javascript, */*; q=0.01'};
         this.dropZone = container;
+        this.imageTypes = /^image\/(gif|jpeg|png)$/;
+        this.previewMaxWidth = this.previewMaxHeight = 80;
+        this.previewLoadDelay = 100;
+        this.previewAsCanvas = true;
+        this.previewSelector = '.file_upload_preview';
         this.progressSelector = '.file_upload_progress div';
-        this.cancelSelector = '.file_upload_cancel div';
+        this.cancelSelector = '.file_upload_cancel button';
         this.cssClassSmall = 'file_upload_small';
         this.cssClassLarge = 'file_upload_large';
         this.cssClassHighlight = 'file_upload_highlight';
         this.dropEffect = 'highlight';
-        this.uploadTable = this.downloadTable = $();
-        this.buildUploadRow = this.buildDownloadRow = function () {
-            return null;
+        this.uploadTable = this.downloadTable = null;
+        this.buildUploadRow = this.buildDownloadRow = null;
+        this.progressAllNode = null;
+        this.loadImage = function (file, callBack, maxWidth, maxHeight, imageTypes, noCanvas) {
+            var img,
+                scaleImage,
+                urlAPI,
+                fileReader;
+            if (imageTypes && !imageTypes.test(file.type)) {
+                return null;
+            }
+            scaleImage = function (img) {
+                var canvas = document.createElement('canvas'),
+                    scale = Math.min(
+                        (maxWidth || img.width) / img.width,
+                        (maxHeight || img.height) / img.height
+                    );
+                if (scale > 1) {
+                    scale = 1;
+                }
+                img.width = parseInt(img.width * scale, 10);
+                img.height = parseInt(img.height * scale, 10);
+                if (noCanvas || typeof canvas.getContext !== func) {
+                    return img;
+                }
+                canvas.width = img.width;
+                canvas.height = img.height;
+                canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+                return canvas;
+            };
+            img = document.createElement('img');
+            urlAPI = typeof URL !== undef ? URL : typeof webkitURL !== undef ? webkitURL : null;
+            if (urlAPI && typeof urlAPI.createObjectURL === func) {
+                img.onload = function () {
+                    urlAPI.revokeObjectURL(this.src);
+                    callBack(scaleImage(img));
+                };
+                img.src = urlAPI.createObjectURL(file);
+            } else if (typeof FileReader !== undef &&
+                    typeof FileReader.prototype.readAsDataURL === func) {
+                img.onload = function () {
+                    callBack(scaleImage(img));
+                };
+                fileReader = new FileReader();
+                fileReader.onload = function (e) {
+                    img.src = e.target.result;
+                };
+                fileReader.readAsDataURL(file);
+            } else {
+                callBack(null);
+            }
         };
         this.addNode = function (parentNode, node, callBack) {
-            if (node) {
+            if (parentNode && parentNode.length && node && node.length) {
                 node.css('display', 'none').appendTo(parentNode).fadeIn(function () {
                     if (typeof callBack === func) {
                         try {
                             callBack();
                         } catch (e) {
                             // Fix endless exception loop:
-                            $(this).stop();
+                            node.stop();
                             throw e;
                         }
                     }
@@ -56,15 +147,15 @@
         };
         this.removeNode = function (node, callBack) {
-            if (node) {
+            if (node && node.length) {
                 node.fadeOut(function () {
-                    $(this).remove();
+                    node.remove();
                     if (typeof callBack === func) {
                         try {
                             callBack();
                         } catch (e) {
                             // Fix endless exception loop:
-                            $(this).stop();
+                            node.stop();
                             throw e;
                         }
                     }
@@ -73,68 +164,204 @@
                 callBack();
             }
         };
+        this.replaceNode = function (oldNode, newNode, callBack) {
+            if (oldNode && newNode) {
+                oldNode.fadeOut(function () {
+                    newNode.css('display', 'none');
+                    oldNode.replaceWith(newNode);
+                    newNode.fadeIn(function () {
+                        if (typeof callBack === func) {
+                            try {
+                                callBack();
+                            } catch (e) {
+                                // Fix endless exception loop:
+                                oldNode.stop();
+                                newNode.stop();
+                                throw e;
+                            }
+                        }
+                    });
+                });
+            } else if (typeof callBack === func) {
+                callBack();
+            }
+        };
+        this.resetProgressBarAll = function () {
+            if (uploadHandler.progressbarAll) {
+                uploadHandler.progressbarAll.progressbar(
+                    'value',
+                    0
+                );
+            }
+        };
+        this.hideProgressBarAll = function (callBack) {
+            if (uploadHandler.progressbarAll && !$(getUploadTable(uploadHandler))
+                    .find(uploadHandler.progressSelector + ':visible:first').length) {
+                uploadHandler.progressbarAll.fadeOut(callBack);
+            } else if (typeof callBack === func) {
+                callBack();
+            }
+        };
         this.onAbort = function (event, files, index, xhr, handler) {
-            uploadHandler.removeNode(handler.uploadRow);
+            handler.removeNode(handler.uploadRow, handler.hideProgressBarAll);
         };
         this.cancelUpload = function (event, files, index, xhr, handler) {
             var readyState = xhr.readyState;
             xhr.abort();
             // If readyState is below 2, abort() has no effect:
-            if (isNaN(readyState) || readyState < 2) {
+            if (typeof readyState !== 'number' || readyState < 2) {
                 handler.onAbort(event, files, index, xhr, handler);
             }
         };
         this.initProgressBar = function (node, value) {
+            if (!node || !node.length) {
+                return null;
+            }
             if (typeof node.progressbar === func) {
                 return node.progressbar({
                     value: value
                 });
             } else {
-                var progressbar = $('<progress value="' + value + '" max="100"/>').appendTo(node);
-                progressbar.progressbar = function (key, value) {
-                    progressbar.attr('value', value);
-                };
-                return progressbar;
+                node.addClass('progressbar')
+                    .append($('<div/>').css('width', value + '%'))
+                    .progressbar = function (key, value) {
+                        return this.each(function () {
+                            if (key === 'destroy') {
+                                $(this).removeClass('progressbar').empty();
+                            } else {
+                                $(this).children().css('width', value + '%');
+                            }
+                        });
+                    };
+                return node;
             }
         };
-        this.initUploadRow = function (event, files, index, xhr, handler, callBack) {
-            var uploadRow = handler.uploadRow = uploadHandler.buildUploadRow(files, index);
-            if (uploadRow) {
-                handler.progressbar = uploadHandler.initProgressBar(
-                    uploadRow.find(uploadHandler.progressSelector),
-                    (xhr.upload ? 0 : 100)
-                );
-                uploadRow.find(uploadHandler.cancelSelector).click(function (e) {
-                    uploadHandler.cancelUpload(e, files, index, xhr, handler);
-                });
+        this.destroyProgressBar = function (node) {
+            if (!node || !node.length) {
+                return null;
             }
-            uploadHandler.addNode(uploadHandler.uploadTable, uploadRow, callBack);
+            return node.progressbar('destroy');
         };
-        this.initUpload = function (event, files, index, xhr, handler, callBack) {
-            uploadHandler.initUploadRow(event, files, index, xhr, handler, function () {
-                if (typeof uploadHandler.beforeSend === func) {
-                    uploadHandler.beforeSend(event, files, index, xhr, handler, callBack);
-                } else {
-                    callBack();
-                }
-            });
+        this.initUploadProgress = function (xhr, handler) {
+            if (!xhr.upload && handler.progressbar) {
+                handler.progressbar.progressbar(
+                    'value',
+                    100 // indeterminate progress displayed by a full animated progress bar
+                );
+            }
         };
+        this.initUploadProgressAll = function () {
+            if (uploadHandler.progressbarAll && uploadHandler.progressbarAll.is(':hidden')) {
+                uploadHandler.progressbarAll.fadeIn();
+            }
+        };
+        this.onSend = function (event, files, index, xhr, handler) {
+            handler.initUploadProgress(xhr, handler);
+        };
         this.onProgress = function (event, files, index, xhr, handler) {
-            if (handler.progressbar) {
+            if (handler.progressbar && event.lengthComputable) {
                 handler.progressbar.progressbar(
                     'value',
                     parseInt(event.loaded / event.total * 100, 10)
                 );
             }
         };
+        this.onProgressAll = function (event, list) {
+            if (uploadHandler.progressbarAll && event.lengthComputable) {
+                uploadHandler.progressbarAll.progressbar(
+                    'value',
+                    parseInt(event.loaded / event.total * 100, 10)
+                );
+            }
+        };
+        this.onLoadAll = function (list) {
+            multiLoader.complete();
+        };
+        this.initProgressBarAll = function () {
+            if (!uploadHandler.progressbarAll) {
+                uploadHandler.progressbarAll = uploadHandler.initProgressBar(
+                    (typeof uploadHandler.progressAllNode === func ?
+                    uploadHandler.progressAllNode(uploadHandler) : uploadHandler.progressAllNode),
+                    0
+                );
+            }
+        };
+        this.destroyProgressBarAll = function () {
+            uploadHandler.destroyProgressBar(uploadHandler.progressbarAll);
+        };
+        this.loadPreviewImage = function (files, index, handler) {
+            index = index || 0;
+            handler.uploadRow.find(handler.previewSelector).each(function () {
+                var previewNode = $(this),
+                    file = files[index];
+                setTimeout(function () {
+                    handler.loadImage(
+                        file,
+                        function (img) {
+                            handler.addNode(
+                                previewNode,
+                                $(img)
+                            );
+                        },
+                        handler.previewMaxWidth,
+                        handler.previewMaxHeight,
+                        handler.imageTypes,
+                        !handler.previewAsCanvas
+                    );
+                }, handler.previewLoadDelay);
+                index += 1;
+            });
+        };
+        this.initUploadRow = function (event, files, index, xhr, handler) {
+            var uploadRow = handler.uploadRow = (typeof handler.buildUploadRow === func ?
+                handler.buildUploadRow(files, index, handler) : null);
+            if (uploadRow) {
+                handler.progressbar = handler.initProgressBar(
+                    uploadRow.find(handler.progressSelector),
+                    0
+                );
+                uploadRow.find(handler.cancelSelector).click(function (e) {
+                    handler.cancelUpload(e, files, index, xhr, handler);
+                    e.preventDefault();
+                });
+                handler.loadPreviewImage(files, index, handler);
+            }
+        };
-        this.parseResponse = function (xhr) {
+        this.initUpload = function (event, files, index, xhr, handler, callBack) {
+            handler.initUploadRow(event, files, index, xhr, handler);
+            handler.addNode(
+                getUploadTable(handler),
+                handler.uploadRow,
+                function () {
+                    if (typeof handler.beforeSend === func) {
+                        handler.beforeSend(event, files, index, xhr, handler, callBack);
+                    } else {
+                        callBack();
+                    }
+                }
+            );
+            handler.initUploadProgressAll();
+        };
+        this.parseResponse = function (xhr, handler) {
             if (typeof xhr.responseText !== undef) {
                 return $.parseJSON(xhr.responseText);
             } else {
@@ -143,30 +370,44 @@
             }
         };
-        this.initDownloadRow = function (event, files, index, xhr, handler, callBack) {
+        this.initDownloadRow = function (event, files, index, xhr, handler) {
             var json, downloadRow;
             try {
-                json = handler.response = uploadHandler.parseResponse(xhr);
-                downloadRow = handler.downloadRow = uploadHandler.buildDownloadRow(json);
-                uploadHandler.addNode(uploadHandler.downloadTable, downloadRow, callBack);
+                json = handler.response = handler.parseResponse(xhr, handler);
             } catch (e) {
-                if (typeof uploadHandler.onError === func) {
+                if (typeof handler.onError === func) {
                     handler.originalEvent = event;
-                    uploadHandler.onError(e, files, index, xhr, handler);
+                    handler.onError(e, files, index, xhr, handler);
                 } else {
                     throw e;
                 }
             }
+            downloadRow = handler.downloadRow = (typeof handler.buildDownloadRow === func ?
+                handler.buildDownloadRow(json, handler) : null);
         };
         this.onLoad = function (event, files, index, xhr, handler) {
-            uploadHandler.removeNode(handler.uploadRow, function () {
-                uploadHandler.initDownloadRow(event, files, index, xhr, handler, function () {
-                    if (typeof uploadHandler.onComplete === func) {
-                        uploadHandler.onComplete(event, files, index, xhr, handler);
+            var uploadTable = getUploadTable(handler),
+                downloadTable = getDownloadTable(handler),
+                callBack = function () {
+                    if (typeof handler.onComplete === func) {
+                        handler.onComplete(event, files, index, xhr, handler);
                     }
+                    multiLoader.complete();
+                };
+            multiLoader.push(Array.prototype.slice.call(arguments, 1));
+            handler.initDownloadRow(event, files, index, xhr, handler);
+            if (uploadTable && (!downloadTable || uploadTable.get(0) === downloadTable.get(0))) {
+                handler.replaceNode(handler.uploadRow, handler.downloadRow, callBack);
+            } else {
+                handler.removeNode(handler.uploadRow, function () {
+                    handler.addNode(
+                        downloadTable,
+                        handler.downloadRow,
+                        callBack
+                    );
                 });
-            });
+            }
         };
         this.dropZoneEnlarge = function () {
@@ -229,6 +470,20 @@
             }
         };
+        this.init = function () {
+            uploadHandler.initProgressBarAll();
+            if (typeof uploadHandler.initExtended === func) {
+                uploadHandler.initExtended();
+            }
+        };
+        this.destroy = function () {
+            if (typeof uploadHandler.destroyExtended === func) {
+                uploadHandler.destroyExtended();
+            }
+            uploadHandler.destroyProgressBarAll();
+        };
         $.extend(this, options);
     };
@@ -238,11 +493,26 @@
                 $(this).fileUpload(new UploadHandler($(this), options));
             });
         },
+        option: function (option, value, namespace) {
+            if (!option || (typeof option === 'string' && typeof value === undef)) {
+                return $(this).fileUpload('option', option, value, namespace);
+            }
+            return this.each(function () {
+                $(this).fileUpload('option', option, value, namespace);
+            });
+        },
         destroy : function (namespace) {
             return this.each(function () {
                 $(this).fileUpload('destroy', namespace);
             });
+        },
+        upload: function (files, namespace) {
+            return this.each(function () {
+                $(this).fileUpload('upload', files, namespace);
+            });
         }
     };
@@ -252,7 +522,7 @@
         } else if (typeof method === 'object' || !method) {
             return methods.init.apply(this, arguments);
         } else {
-            $.error('Method ' + method + ' does not exist on jQuery.fileUploadUI');
+            $.error('Method "' + method + '" does not exist on jQuery.fileUploadUI');
         }
     };