voltron-upload 0.2.1

data/app/assets/stylesheets/voltron-upload.scss

@@ -0,0 +1,446 @@
+/*
+ *= require dropzone
+ */
+
+$theme-color: #234051;
+
+$hover-border-color: #234051;
+$hover-background-color: lighten($hover-border-color, 75%);
+$link-color: #234051;
+
+$error-text-color: #FFFFFF;
+$error-background-color: #BE2626;
+
+$error-progress-color: #BE2626;
+$success-progress-color: #008000;
+
+.dropzone {
+
+  /**
+   * Vertical Tile Layout
+   * +---------------+
+   * |               |
+   * |               |
+   * |      PIC      |
+   * |               |
+   * |               |
+   * |---------------|
+   * | ABC     0.1MB |
+   * | remove        |
+   * +---------------+
+   */
+  &.dz-layout-vertical_tile {
+    transition: border-color 300ms ease-out, background-color 300ms ease-out;
+    border-width: 1px;
+    padding: 16px;
+
+    &.dz-drag-hover {
+      border-color: $hover-border-color;
+      background-color: $hover-background-color;
+    }
+
+    .dz-preview {
+      border: 1px solid #ccc;
+      padding: 5px;
+      width: 212px;
+      box-shadow: 0 2px 5px -1px #aaa;
+      margin: 0 16px 0 0;
+      box-sizing: border-box;
+
+      &:hover {
+        .dz-image img {
+          -webkit-transform: none;
+          -moz-transform: none;
+          -ms-transform: none;
+          -o-transform: none;
+          transform: none;
+          -webkit-filter: none;
+          filter: none;
+        }
+      }
+
+      &.dz-success {
+        .dz-progress {
+          .dz-upload {
+            width: 100%;
+            background-color: $success-progress-color;
+          }
+        }
+      }
+
+      &.dz-error {
+        .dz-progress {
+          .dz-upload {
+            width: 100%;
+            background-color: $error-progress-color;
+          }
+        }
+      }
+
+      .dz-image {
+        border-radius: 0;
+        width: 200px;
+        height: 175px;
+      }
+
+      .dz-progress {
+        position: static;
+        opacity: 1;
+        margin-left: 0;
+        width: 100%;
+        border-radius: 0;
+        border: 0;
+        margin-top: 0;
+        height: 7px;
+        -webkit-animation: none;
+        -moz-animation: none;
+        -ms-animation: none;
+        -o-animation: none;
+        animation: none;
+        .dz-upload {
+          transition: background-color 300ms ease-out, width 100ms linear;
+          background-color: $theme-color;
+        }
+      }
+
+      .dz-details {
+        position: static;
+        opacity: 1;
+        text-align: left;
+        padding: 0;
+        margin-top: 4px;
+
+        .dz-info {
+          &:before, &:after {
+            content: ' ';
+            display: table;
+          }
+
+          &:after {
+            clear: both;
+          }
+        }
+
+        .dz-filename {
+          max-width: 60%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          float: left;
+        }
+
+        .dz-size {
+          margin-bottom: 0;
+          font-size: inherit;
+          float: right;
+        }
+
+        .dz-remove {
+          margin-top: 4px;
+          font-size: 0.9em;
+          text-transform: uppercase;
+          text-decoration: none;
+          color: $link-color;
+          float: left;
+          &:hover {
+            background: none;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .dz-error-message {
+        top: initial;
+        bottom: 100%;
+        color: $error-text-color;
+        border-radius: 0;
+        width: 300px;
+        padding: 8px;
+        left: 50%;
+        margin-bottom: 8px;
+        -webkit-transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        -o-transform: translateX(-50%);
+        transform: translateX(-50%);
+        &:after {
+          top: 100%;
+          left: 50%;
+          margin-left: -6px;
+          border-bottom: 0;
+          border-top: 6px solid $error-background-color;
+        }
+      }
+    }
+  }
+
+  /**
+   * Horizontal Tile Layout
+   * +----------------------------------+
+   * |          | ABC 0.1MB      remove |
+   * |   PIC    |-----------------------|
+   * |          | Error                 |
+   * |          |                       |
+   * +----------------------------------+
+   */
+  &.dz-layout-horizontal_tile {
+    transition: border-color 300ms ease-out, background-color 300ms ease-out;
+    border-width: 1px;
+    padding: 16px;
+
+    &.dz-drag-hover {
+      border-color: $hover-border-color;
+      background-color: $hover-background-color;
+    }
+
+    .dz-preview {
+      border: 1px solid #ccc;
+      padding: 5px;
+      width: 24%;
+      box-shadow: 0 2px 5px -1px #aaa;
+      margin: 0 1.3333% 16px 0;
+      box-sizing: border-box;
+      min-height: 0;
+
+      &:nth-child(4n+1){
+        margin-right: 0;
+      }
+
+      &:hover {
+        .dz-image img {
+          -webkit-transform: none;
+          -moz-transform: none;
+          -ms-transform: none;
+          -o-transform: none;
+          transform: none;
+          -webkit-filter: none;
+          filter: none;
+        }
+      }
+
+      &.dz-success {
+        .dz-progress {
+          .dz-upload {
+            width: 100%;
+            background-color: $success-progress-color;
+          }
+        }
+      }
+
+      &.dz-error {
+        .dz-progress {
+          .dz-upload {
+            width: 100%;
+            background-color: $error-progress-color;
+          }
+        }
+      }
+
+      .dz-image {
+        border-radius: 0;
+        width: 80px;
+        height: 80px;
+        float: left;
+        img {
+          width: 80px;
+          height: 80px;
+        }
+      }
+
+      .dz-progress {
+        position: static;
+        opacity: 1;
+        margin-left: 0;
+        width: 100%;
+        border-radius: 0;
+        border: 0;
+        margin-top: 4px;
+        height: 3px;
+        float: left;
+        -webkit-animation: none;
+        -moz-animation: none;
+        -ms-animation: none;
+        -o-animation: none;
+        animation: none;
+
+        &:before, &:after {
+          content: ' ';
+          display: table;
+        }
+
+        &:after {
+          clear: both;
+        }
+
+        .dz-upload {
+          transition: background-color 300ms ease-out, width 100ms linear;
+          background-color: $theme-color;
+        }
+      }
+
+      .dz-details {
+        position: static;
+        opacity: 1;
+        text-align: left;
+        padding: 0;
+        margin-left: 85px;
+        min-width: 0;
+        max-width: none;
+
+        .dz-info {
+          float: left;
+          width: 100%;
+          &:before, &:after {
+            content: ' ';
+            display: table;
+          }
+
+          &:after {
+            clear: both;
+          }
+        }
+
+        .dz-filename {
+          max-width: 60%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          float: left;
+        }
+
+        .dz-size {
+          width: 15%;
+          margin-bottom: 0;
+          font-size: inherit;
+          white-space: nowrap;
+          float: left;
+          &:before {
+            content: '\00B7';
+            display: inline-block;
+            width: 14px;
+            text-align: center;
+          }
+        }
+
+        .dz-remove {
+          font-size: 0.9em;
+          text-transform: uppercase;
+          text-decoration: none;
+          color: $link-color;
+          float: right;
+          &:hover {
+            background: none;
+            text-decoration: underline;
+          }
+        }
+
+        .dz-error-message {
+          position: static;
+          padding: 0;
+          opacity: 1;
+          background: none;
+          font-size: 0.9em;
+          width: 100%;
+          line-height: 1.4;
+          margin-top: 3px;
+          color: $error-background-color;
+          float: left;
+          &:after {
+            content: normal;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Progress Bar Layout
+   * Intended as a one-and-done upload flow where you upload and
+   * then something happens outside the upload container
+   * (i.e. - image cropper loads an uploaded image)
+   *
+   * +----------------------------------+
+   * |%%%%%%%%%%%%%%%|                  |
+   * |%%%%%%%%%%%%%%%|ROP FILES HERE    |
+   * |%%%%%%%%%%%%%%%|                  |
+   * +----------------------------------+
+   */
+  &.dz-layout-progress {
+    padding: 0;
+    position: relative;
+    height: 42px;
+    border-width: 1px;
+
+    .dz-message {
+      margin: 0;
+      height: 40px;
+      line-height: 40px;
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      top: 0;
+      left: 0;
+      display: block;
+    }
+
+    .dz-preview {
+      // Keep preview from blocking the clickable area by making it 0px high
+      min-height: 0;
+      height: 0;
+      width: 100%;
+      margin: 0;
+      background: none;
+
+      .dz-progress {
+        margin-top: 0;
+        margin-left: 0;
+        position: relative;
+        width: 100%;
+        left: 0;
+        top: 0;
+        border-radius: 0;
+        height: 40px;
+        border: 0;
+        background: none;
+
+        .dz-upload {
+          background: $theme-color;
+        }
+      }
+
+      .dz-error-message {
+        top: initial;
+        bottom: 100%;
+        color: $error-text-color;
+        border-radius: 0;
+        width: 300px;
+        padding: 8px;
+        left: 50%;
+        margin-left: -150px;
+        margin-bottom: 8px;
+        text-align: center;
+        &:after {
+          top: 100%;
+          left: 50%;
+          margin-left: -6px;
+          border-bottom: 0;
+          border-top: 6px solid $error-background-color;
+        }
+      }
+
+      &.dz-complete {
+        &:hover {
+          .dz-error-message {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.dz-error {
+        .dz-error-message {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

data/app/views/voltron/upload/preview/_horizontal_tile.html.erb

@@ -0,0 +1,18 @@
+<div class="dz-preview dz-file-preview">
+  <div class="dz-image">
+    <img data-dz-thumbnail />
+  </div>
+  <div class="dz-details">
+    <div class="dz-info">
+      <div class="dz-filename" data-dz-name></div>
+      <div class="dz-size" data-dz-size></div>
+      <a class="dz-remove" href="javascript:undefined;" data-dz-remove>Remove</a>
+    </div>
+    <div class="dz-progress">
+      <span class="dz-upload" data-dz-uploadprogress></span>
+    </div>
+    <div class="dz-error-message">
+      <span data-dz-errormessage></span>
+    </div>
+  </div>
+</div>

data/app/views/voltron/upload/preview/_progress.html.erb

@@ -0,0 +1,8 @@
+<div class="dz-preview dz-file-preview">
+  <div class="dz-progress">
+    <span class="dz-upload" data-dz-uploadprogress></span>
+  </div>
+  <div class="dz-error-message">
+    <span data-dz-errormessage></span>
+  </div>
+</div>

data/app/views/voltron/upload/preview/_vertical_tile.html.erb

@@ -0,0 +1,18 @@
+<div class="dz-preview dz-file-preview">
+  <div class="dz-image">
+    <img data-dz-thumbnail />
+  </div>
+  <div class="dz-progress">
+    <span class="dz-upload" data-dz-uploadprogress></span>
+  </div>
+  <div class="dz-details">
+    <div class="dz-info">
+      <div class="dz-filename" data-dz-name></div>
+      <div class="dz-size" data-dz-size></div>
+    </div>
+    <a class="dz-remove" href="javascript:undefined;" data-dz-remove>Remove</a>
+  </div>
+  <div class="dz-error-message">
+    <span data-dz-errormessage></span>
+  </div>
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "voltron/upload"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/generators/voltron/upload/install/assets_generator.rb

@@ -0,0 +1,25 @@
+module Voltron
+  module Upload
+    module Generators
+      module Install
+        class AssetsGenerator < Rails::Generators::Base
+
+          source_root File.expand_path('../../../../../../', __FILE__)
+
+          desc 'Install Voltron Upload assets'
+
+          def copy_javascripts_assets
+            copy_file 'app/assets/javascripts/voltron-upload.js', Rails.root.join('app', 'assets', 'javascripts', 'voltron-upload.js')
+            copy_file 'app/assets/javascripts/dropzone.js', Rails.root.join('app', 'assets', 'javascripts', 'dropzone.js')
+          end
+
+          def copy_stylesheets_assets
+            copy_file 'app/assets/stylesheets/voltron-upload.scss', Rails.root.join('app', 'assets', 'stylesheets', 'voltron-upload.scss')
+            copy_file 'app/assets/stylesheets/dropzone.scss', Rails.root.join('app', 'assets', 'stylesheets', 'dropzone.scss')
+          end
+
+        end
+      end
+    end
+  end
+end

data/lib/generators/voltron/upload/install/views_generator.rb

@@ -0,0 +1,21 @@
+module Voltron
+  module Upload
+    module Generators
+      module Install
+        class ViewsGenerator < Rails::Generators::Base
+
+          source_root File.expand_path('../../../../../../', __FILE__)
+
+          desc 'Install Voltron Upload views'
+
+          def copy_views
+            copy_file 'app/views/voltron/upload/preview/_horizontal_tile.html.erb', Rails.root.join('app', 'views', 'voltron', 'upload', 'preview', '_horizontal_tile.html.erb')
+            copy_file 'app/views/voltron/upload/preview/_vertical_tile.html.erb', Rails.root.join('app', 'views', 'voltron', 'upload', 'preview', '_vertical_tile.html.erb')
+            copy_file 'app/views/voltron/upload/preview/_progress.html.erb', Rails.root.join('app', 'views', 'voltron', 'upload', 'preview', '_progress.html.erb')
+          end
+
+        end
+      end
+    end
+  end
+end

data/lib/generators/voltron/upload/install_generator.rb

@@ -0,0 +1,57 @@
+module Voltron
+  module Upload
+    module Generators
+      class InstallGenerator < Rails::Generators::Base
+
+        source_root File.expand_path("../../../templates", __FILE__)
+
+        desc "Add Voltron Upload initializer"
+
+        def inject_initializer
+
+          voltron_initialzer_path = Rails.root.join("config", "initializers", "voltron.rb")
+
+          unless File.exist? voltron_initialzer_path
+            unless system("cd #{Rails.root.to_s} && rails generate voltron:install")
+              puts "Voltron initializer does not exist. Please ensure you have the 'voltron' gem installed and run `rails g voltron:install` to create it"
+              return false
+            end
+          end
+
+          current_initiailzer = File.read voltron_initialzer_path
+
+          unless current_initiailzer.match(Regexp.new(/# === Voltron Upload Configuration ===/))
+            inject_into_file(voltron_initialzer_path, after: "Voltron.setup do |config|\n") do
+<<-CONTENT
+
+  # === Voltron Upload Configuration ===
+
+  # Whether or not calls to file_field should generate markup for dropzone uploads
+  # If false, simply returns what file_field would return normally
+  # config.upload.enabled = true
+
+  # Global defaults for Dropzone's with a defined preview template
+  # Should be a hash of keys matching a preview partial name,
+  # with a value hash containing any of the Dropzone configuration options
+  # found at http://www.dropzonejs.com/#configuration-options
+  config.upload.previews = {
+    vertical_tile: {
+      thumbnailWidth: 200,
+      thumbnailHeight: 175,
+      dictRemoveFile: 'Remove',
+      dictCancelUpload: 'Cancel'
+    },
+  
+    horizontal_tile: {
+      dictRemoveFile: 'Remove',
+      dictCancelUpload: 'Cancel'
+    }
+  }
+CONTENT
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/voltron/config/upload.rb

@@ -0,0 +1,18 @@
+module Voltron
+  class Config
+
+    def upload
+      @upload ||= Upload.new
+    end
+
+    class Upload
+
+      attr_accessor :enabled, :previews
+
+      def initialize
+        @enabled ||= true
+        @previews ||= {}
+      end
+    end
+  end
+end

data/lib/voltron/upload/action_dispatch/routes.rb

@@ -0,0 +1,17 @@
+module Voltron
+  module Upload
+    module Routes
+
+      def upload_for(resource, options={})
+        controller = resource.to_s.underscore
+        options = options.with_indifferent_access
+
+        options[:path] ||= "/#{controller}/upload"
+        options[:controller] ||= controller
+
+        post options[:path].gsub(/(^\/+|\/+$)/, ''), to: "#{options[:controller]}#upload", as: "upload_#{controller}"
+      end
+
+    end
+  end
+end