instant-upload 1.0.0

data/app/assets/javascripts/instant_upload/multi.js.coffee

@@ -0,0 +1,149 @@
+app = angular.module('instantUpload', [])
+
+@multiIuCtrl = ['$scope', '$element', ($scope, $element) ->
+
+  # upload event handler
+  class UploadHandler
+
+    constructor: ($uploader) ->
+      @url = $uploader.parents('form').attr('action')
+
+      $scope.persisted = $uploader.data('persisted')
+      $scope.limit = $uploader.data('limit')
+      $scope.multi = $uploader.data('multi')
+      $scope.version = $uploader.data('version')
+
+      @uploader = $uploader
+      @element = $uploader.find('.iu-multi-dropzone')
+
+      @element.bind 'dragenter', @dragEnter
+      @element.bind 'dragover',  @dragEnter
+      @element.bind 'dragleave', @dragLeave
+      @element.bind 'drop',      @drop
+
+      $fileInput = $uploader.find('input[type="file"]')
+      $fileInput.bind 'change', @drop
+
+      $uploader.find('.iu-multi-select').show 0, ->
+        $selectFiles = $uploader.find('.iu-multi-select-files')
+        offset = $selectFiles.position()
+
+        $fileInput.css
+          opacity: 0
+          cursor: 'pointer'
+          position: 'absolute'
+          left: offset.left
+          top: offset.top
+          width: $selectFiles.width() + 10
+          height: $selectFiles.height() + 10
+          'margin-left': -5
+          'margin-top': -25
+          'z-index': 2
+          '-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"'
+          'filter': 'alpha(opacity=0)'
+
+      @fileinput = $fileInput
+
+    dragEnter: (e) =>
+      # console.log 'dragEnter'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.addClass 'iu-drag-over'
+
+      # settings.dragEnter(e)
+      return false
+
+    dragLeave: (e) =>
+      # console.log 'dragLeave'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.removeClass 'iu-drag-over'
+
+      # settings.dragLeave(e)
+      return false
+
+    drop: (e) =>
+      # console.log 'drop'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.removeClass 'iu-drag-over'
+
+      # get files from drag and drop dataTransfer
+      if typeof e.originalEvent.dataTransfer == 'undefined'
+        files = e.originalEvent.target.files
+      else
+        files = e.originalEvent.dataTransfer.files
+
+      if $scope.limit != undefined && $scope.files.length + files.length > parseInt($scope.limit)
+        @uploader.find('.iu-alert').show()
+        return
+
+      fd = new FormData
+
+      for file in files
+        fd.append @fileinput.attr('name'), file
+
+      $scope.$apply ->
+        $scope.uploaded = false
+        $scope.uploadProgress = 0
+
+      xhr = new XMLHttpRequest
+
+      xhr.upload.addEventListener 'progress', ( (e) =>
+        # console.log 'progress'
+        percent = Math.ceil(e.loaded / e.total * 100)
+        $scope.$apply ->
+          $scope.uploadProgress = percent
+      ), false
+
+      xhr.addEventListener 'load',  ( (e) =>
+        # console.log 'load'
+        $scope.$apply ->
+          $scope.uploaded = true
+
+          # $scope.files = []
+          for image in $.parseJSON(xhr.response)
+            $scope.files.push { path: image[$scope.multi][$scope.version].url }
+      ), false
+
+      xhr.addEventListener 'error', ( (e) =>
+        # console.log 'error'
+      ), false
+
+      xhr.addEventListener 'abort', ( (e) =>
+        # console.log 'abort'
+      ), false
+
+
+      if $scope.persisted
+        method = 'PATCH'
+      else
+        method = 'POST'
+
+      xhr.open method, "#{@url}.json"
+      xhr.setRequestHeader 'X-Instant-Upload', true
+      xhr.send fd
+
+      return false
+
+
+  $scope.init = ($uploader) ->
+    handler = new UploadHandler($uploader)
+    $uploader.find('.iu-multi-dropzone').addClass('active')
+    $uploader.find('.iu-multi-files').show()
+
+    $scope.files = []
+
+    $scope.$apply ->
+      $uploader.find('.iu-multi-files-cache li').each ->
+        $scope.files.push { path: $(this).find('img').attr('src') }
+
+  $ -> $scope.init($($element)) if !!window.FormData
+
+]

data/app/assets/javascripts/instant_upload/single.js.coffee

@@ -0,0 +1,143 @@
+app = angular.module('instantUpload', [])
+
+@singleIuCtrl = ['$scope', '$element', ($scope, $element) ->
+
+  # upload event handler
+  class UploadHandler
+
+    constructor: ($uploader) ->
+      @url = $uploader.parents('form').attr('action')
+      $scope.persisted = $uploader.data('persisted')
+      $scope.field = $uploader.data('field')
+      $scope.version = $uploader.data('version')
+
+      @element = $uploader.find('.iu-simple-dropzone')
+
+      @element.bind 'dragenter', @dragEnter
+      @element.bind 'dragover',  @dragEnter
+      @element.bind 'dragleave', @dragLeave
+      @element.bind 'drop',      @drop
+
+      $fileInput = $uploader.find('input[type="file"]')
+      $fileInput.bind 'change', @drop
+
+      $uploader.find('.iu-simple-select').show 0, ->
+        $selectFiles = $uploader.find('.iu-simple-select-files')
+        offset = $selectFiles.position()
+
+        $fileInput.css
+          opacity: 0
+          cursor: 'pointer'
+          position: 'absolute'
+          left: offset.left
+          top: offset.top
+          width: $selectFiles.width() + 10
+          height: $selectFiles.height() + 10
+          'margin-left': -5
+          'margin-top': -25
+          'z-index': 2
+          '-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"'
+          'filter': 'alpha(opacity=0)'
+
+      @fileinput = $fileInput
+
+    dragEnter: (e) =>
+      # console.log 'dragEnter'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.addClass 'iu-drag-over'
+
+      # settings.dragEnter(e)
+      return false
+
+    dragLeave: (e) =>
+      # console.log 'dragLeave'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.removeClass 'iu-drag-over'
+
+      # settings.dragLeave(e)
+      return false
+
+    drop: (e) =>
+      # console.log 'drop'
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      @element.removeClass 'iu-drag-over'
+
+      # get files from drag and drop dataTransfer
+      if typeof e.originalEvent.dataTransfer == 'undefined'
+        files = e.originalEvent.target.files
+      else
+        files = e.originalEvent.dataTransfer.files
+
+      fd = new FormData
+      fd.append  @fileinput.attr('name'), files[0]
+
+      xhr = new XMLHttpRequest
+
+      $scope.$apply ->
+        $scope.uploaded = false
+        $scope.uploadProgress = 0
+
+      xhr.upload.addEventListener 'progress', ( (e) =>
+        # console.log 'progress'
+        percent = Math.ceil(e.loaded / e.total * 100)
+        $scope.$apply ->
+          $scope.uploadProgress = percent
+      ), false
+
+      xhr.addEventListener 'load',  ( (e) =>
+        # console.log 'load'
+        $scope.$apply ->
+          $scope.uploaded = true
+
+        @element.find('img').attr('src', $.parseJSON(xhr.response)[$scope.field][$scope.version].url)
+      ), false
+
+      xhr.addEventListener 'error', ( (e) =>
+        # console.log 'error'
+      ), false
+
+      xhr.addEventListener 'abort', ( (e) =>
+        # console.log 'abort'
+      ), false
+
+
+      if $scope.persisted
+        method = 'PATCH'
+      else
+        method = 'POST'
+
+      xhr.open method, "#{@url}.json"
+      xhr.setRequestHeader 'X-Instant-Upload', true
+      xhr.send fd
+
+      return false
+
+
+  $scope.init = ($uploader) ->
+    handler = new UploadHandler($uploader)
+
+    # set width of the dropzone div for progressbar
+    $uploader.find('.iu-simple-dropzone').each ->
+      $this = $(this)
+
+      width = $this.find('img').width()
+      height = $this.find('img').height()
+
+      $this.width width
+      $this.height height
+
+      $this.find('img').css 'width', width
+      $this.find('img').css 'height', height
+
+  $ -> $scope.init($($element)) if !!window.FormData
+
+]

data/app/assets/stylesheets/instant_upload.css

@@ -0,0 +1,12 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_tree ./instant_upload
+ */

data/app/assets/stylesheets/instant_upload/multi.css.scss

@@ -0,0 +1,54 @@
+.iu-multi {
+  position: relative;
+
+  .iu-alert {
+    display: none;
+  }
+
+  .iu-multi-dropzone {
+      &.active {
+      position: relative;
+      overflow: hidden;
+
+      width: 300px;
+      height: 100px;
+
+      border: 5px solid black;
+
+      &.iu-drag-over {
+        background: silver;
+      }
+
+      &.uploading {
+        .iu-progress-bar {
+          height: 5px;
+          background: red;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  .iu-multi-select {
+    display: none;
+
+    .iu-select-files {
+      z-index: 1;
+    }
+  }
+
+  .iu-multi-files-cache, .iu-multi-files {
+    display: none;
+    overflow: auto;
+
+    li {
+      float: left;
+      list-style: none;
+      margin: 3px;
+    }
+  }
+
+}
+

data/app/assets/stylesheets/instant_upload/single.css.scss

@@ -0,0 +1,32 @@
+.iu-simple {
+  position: relative;
+
+  .iu-simple-dropzone {
+    position: relative;
+    overflow: hidden;
+
+    &.iu-drag-over {
+      border: 5px solid black;
+    }
+
+    &.uploading {
+      .iu-progress-bar {
+        height: 5px;
+        background: red;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .iu-simple-select {
+    display: none;
+
+    .iu-select-files {
+      z-index: 1;
+    }
+  }
+
+}
+

data/app/controllers/instant_upload/application_controller.rb

@@ -0,0 +1,4 @@
+module InstantUpload
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/instant_upload/application_helper.rb

@@ -0,0 +1,4 @@
+module InstantUpload
+  module ApplicationHelper
+  end
+end

data/app/models/instant_upload/upload.rb

@@ -0,0 +1,5 @@
+module InstantUpload
+  class Upload < ActiveRecord::Base
+    mount_uploader :file, FileUploader
+  end
+end

data/app/uploaders/instant_upload/file_uploader.rb

@@ -0,0 +1,13 @@
+# encoding: utf-8
+
+module InstantUpload
+  class FileUploader < CarrierWave::Uploader::Base
+
+    storage :file
+
+    def store_dir
+      "uploads/#{model.class.to_s.underscore}/#{model.id}"
+    end
+
+  end
+end

data/app/views/instant_upload/_multi.html.haml

@@ -0,0 +1,20 @@
+.iu-multi{ 'ng-controller' => 'multiIuCtrl', data: options }
+  .iu-multi-dropzone{ 'ng-class' => '{uploading:uploaded == false}' }
+    .iu-progress-bar{ style: "width: {{ uploadProgress }}%;" }
+    = file_field_tag "#{record.class.name.downcase}[#{field}_attributes][][#{options[:multi]}]", multiple: true
+
+    .iu-multi-select
+      drag & drop or
+      = link_to 'select file from disk', '#', class: 'iu-multi-select-files'
+
+  %ul.iu-multi-files-cache
+    - record.send(field).each do |img|
+      %li= image_tag img.send(options[:multi]).send(options[:version]).url
+
+  .iu-alert Too much, only #{options[:limit]}
+
+  %ul.iu-multi-files
+    %li{ 'ng-repeat' => 'file in files'}
+      %img{ src: "{{ file.path }}" }
+
+