attache_rails 0.0.6 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 23145e14f7f10f15b0ee5817d168619e2b6d0e5c
-  data.tar.gz: cbe0855bc37ec5ab2137c3af923a53077cb4150e
+  metadata.gz: 0c7546fc76fade2bf70f9075fe87be7b71fffa6f
+  data.tar.gz: ee7f0526cbebe7292f685cb86ed501721d46f7b2
 SHA512:
-  metadata.gz: a6e380a7dbb6fed113a7ad7e71f5af307dbcffaa39480e95054083053358d4bd76b04a4066e51d564387c5ebb949b05449173b1d2dd8f33a758916a92aaec599
-  data.tar.gz: 2ac7cd485271384c199c2376b4ee163b62387a16e7cb5a9db584d0cf8a894c9450a926746e63c7daddd30917d5d614d55de07e7ff993384b22342b3b6edcf660
+  metadata.gz: 76d9c2a0aeec9e6de2980cd752bcf4e7fc83720426e073d60e85073e5d6a97e2ef4211733a0e415fd9af9280c49da0e7af52a8678bc72ce27548b6b442983290
+  data.tar.gz: 1b955d139c9fda1b3828e6f91a7ace1d8b213a92085cce02af4e0936c16b273558ee040082815dc93c391c1bc03530a5eed3a94ec9346d5b28e77999c488bf7d

data/README.md

@@ -2,8 +2,6 @@
 
 Ruby on Rails integration for [attache server](https://github.com/choonkeat/attache)
 
-NOTE: You can learn how to use this gem by looking at the [changes made to our example app](https://github.com/choonkeat/attache-railsapp/compare/fc47c17...master) or follow the step by step instructions in this `README`
-
 ## Dependencies
 
 [React](https://github.com/reactjs/react-rails), jQuery, Bootstrap 3
@@ -40,47 +38,38 @@ If you want to customize the file upload look and feel, define your own react `<
 
 ### Database
 
-To use `attache`, you only need to store the `path`, given to you after you've uploaded a file. So if you have an existing model, you only need to add a string, varchar or text field
+To use `attache`, you only need to store the JSON attributes given to you after you've uploaded a file. So if you have an existing model, you only need to add a text column
 
 ``` bash
-rails generate migration AddPhotoPathToUsers photo_path:string
+rails generate migration AddPhotoPathToUsers photo:text
 ```
 
-To assign **multiple** images to **one** model, you'd only need one text field
+To assign **multiple** images to **one** model, the same column can be used, although pluralized column name reads better
 
 ``` bash
-rails generate migration AddPhotoPathToUsers photo_path:text
+rails generate migration AddPhotoPathToUsers photos:text
 ```
 
 ### Model
 
-In your model, `serialize` the column
+In your model, define whether it `has_one_attache` or `has_many_attaches`
 
 ``` ruby
 class User < ActiveRecord::Base
-  serialize :photo_path, JSON
+  has_many_attaches :photos
 end
 ```
 
 ### New or Edit form
 
-In your form, you would add some options to `file_field` using the `attache_options` helper method. For example, a regular file field may look like this:
+In your form, you would add some options to `file_field` using the `attache_options` helper method:
 
 ``` slim
-= f.file_field :photo_path
+= f.file_field :photos, f.object.avatar_options('64x64#')
 ```
 
-Change it to
-
-``` slim
-= f.file_field :photo_path, **attache_options('64x64#', f.object.photo_path)
-```
+If you were using `has_many_attaches` the file input will automatically allow multiple files, otherwise the file input will only accept 1 file.
 
-Or if you're expecting multiple files uploaded, simply add `multiple: true`
-
-``` slim
-= f.file_field :photo_path, multiple: true, **attache_options('64x64#', f.object.photo_path)
-```
 
 NOTE: `64x64#` is just an example, you should define a suitable [geometry](http://www.imagemagick.org/Usage/resize/) for your form
 
@@ -98,45 +87,38 @@ If you're only accepting a single file upload, change it to
 
 ``` ruby
 def user_params
-  params.require(:user).permit(:name, :photo_path)
+  params.require(:user).permit(:name, :photo, attaches_discarded: [])
 end
 ```
 
-If you're accepting multiple file uploads via `multiple: true`, change it to
+If you're accepting multiple file uploads, change it to
 
 ``` ruby
 def user_params
-  params.require(:user).permit(:name, photo_path: [])
+  params.require(:user).permit(:name, photos: [], attaches_discarded: [])
 end
 ```
 
+NOTE: You do not have to manage `params[:attaches_discarded]` yourself. It is automatically managed for you between the frontend javascript and the ActiveRecord integration: files that are discarded will be removed from the attache server when you update or destroy your model.
+
 ### Show
 
-Use the `attache_urls` helper to obtain full urls for the values you've captured in your database.
+Use the `*_url` or `*_urls` methods (depending on whether you are accepting multiple files) to obtain full urls.
 
 ``` slim
-- attache_urls(@user.photo_path, '128x128#') do |url|
-  = image_tag(url)
+= image_tag @user.photo_url('100x100#')
 ```
 
-You can also include `AttacheRails::Helper` directly in your model
-
-``` ruby
-class User < ActiveRecord::Base
-  include AttacheRails::Helper
-  serialize :photo_path, JSON
+or
 
-  def photo_url
-    attache_urls(photo_path, '128x128#').sample
-  end
-end
+``` slim
+- @user.photos_urls('200x200#').each do |url|
+  = image_tag url
 ```
 
 ### Environment configs
 
-`ATTACHE_UPLOAD_URL` points to the attache server upload url. e.g. `http://localhost:9292/upload`
-
-`ATTACHE_DOWNLOAD_URL` points to url prefix for downloading the resized images, e.g. `http://cdn.lvh.me:9292/view`
+`ATTACHE_URL` points to the attache server. e.g. `http://localhost:9292`
 
 `ATTACHE_UPLOAD_DURATION` refers to the number of seconds before a signed upload request is considered expired, e.g. `600`
 

data/app/assets/javascripts/attache.js

@@ -1,4 +1,4 @@
 //= require attache/cors_upload
-//= require attache/file_input
 //= require attache/bootstrap3
+//= require attache/file_input
 //= require attache/ujs

data/app/assets/javascripts/attache/bootstrap3.js

@@ -46,3 +46,29 @@ if (typeof AttacheFilePreview === 'undefined') {
   });
 
 }
+
+if (typeof AttachePlaceholder === 'undefined') {
+
+  var AttachePlaceholder = React.createClass({displayName: "AttachePlaceholder",
+    render: function() {
+      return (
+        React.createElement("div", {className: "attache-file-preview"}, 
+          React.createElement("img", {src: this.props.src})
+        )
+      );
+    }
+  });
+
+}
+
+if (typeof AttacheHeader === 'undefined') {
+
+  var AttacheHeader = React.createClass({displayName: "AttacheHeader",
+    render: function() {
+      return (
+        React.createElement("noscript", null)
+      );
+    }
+  });
+
+}

data/app/assets/javascripts/attache/bootstrap3.js.jsx

@@ -46,3 +46,29 @@ if (typeof AttacheFilePreview === 'undefined') {
   });
 
 }
+
+if (typeof AttachePlaceholder === 'undefined') {
+
+  var AttachePlaceholder = React.createClass({
+    render: function() {
+      return (
+        <div className="attache-file-preview">
+          <img src={this.props.src} />
+        </div>
+      );
+    }
+  });
+
+}
+
+if (typeof AttacheHeader === 'undefined') {
+
+  var AttacheHeader = React.createClass({
+    render: function() {
+      return (
+        <noscript />
+      );
+    }
+  });
+
+}

data/app/assets/javascripts/attache/cors_upload.js

@@ -14,7 +14,7 @@ var AttacheCORSUpload = (function() {
   }
 
   AttacheCORSUpload.prototype.handleFileSelect = function(file_element) {
-    var f, files, output, _i, _len, _results, url, $ele;
+    var f, files, output, _i, _len, _results, url, $ele, prefix;
     $ele = $(file_element);
     url = $ele.data('uploadurl');
     if ($ele.data('hmac')) {
@@ -25,12 +25,13 @@ var AttacheCORSUpload = (function() {
             ""
     }
 
+    prefix = Date.now() + "_";
     files = file_element.files;
     output = [];
     _results = [];
     for (_i = 0, _len = files.length; _i < _len; _i++) {
       f = files[_i];
-      f.uid = counter++;
+      f.uid = prefix + (counter++);
       this.onProgress(f.uid, { filename: f.name, percentLoaded: 0, bytesLoaded: 0, bytesTotal: f.size });
       _results.push(this.performUpload(f, url));
     }

data/app/assets/javascripts/attache/file_input.js

@@ -2,25 +2,31 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
 
   getInitialState: function() {
     var files = {};
-    var array = ([].concat(JSON.parse(this.props['data-value'])));
-    $.each(array, function(uid, json) {
-      if (json) files[uid] = { path: json };
+    if (this.props['data-value']) $.each(JSON.parse(this.props['data-value']), function(uid, json) {
+      if (json) files[uid] = json;
     });
-    return {files: files};
+    return {files: files, attaches_discarded: []};
   },
 
   onRemove: function(uid, e) {
-    delete this.state.files[uid];
-    this.setState(this.state);
     e.preventDefault();
     e.stopPropagation();
+
+    var fieldname = this.getDOMNode().firstChild.name;                           // when   'user[avatar]'
+    var newfield  = fieldname.replace(/\w+\](\[\]|)$/, 'attaches_discarded][]'); // become 'user[attaches_discarded][]'
+
+    this.state.attaches_discarded.push({ fieldname: newfield, path: this.state.files[uid].path });
+    delete this.state.files[uid];
+
+    this.setState(this.state);
   },
 
   onChange: function() {
     var file_element = this.getDOMNode().firstChild;
     // user cancelled file chooser dialog. ignore
     if (file_element.files.length == 0) return;
-    this.state.files = {};
+    if (! this.props.multiple) this.state.files = {};
+
     this.setState(this.state);
     // upload the file via CORS
     var that = this;
@@ -45,26 +51,52 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
 
   render: function() {
     var that = this;
+
+    var Header = eval(this.props['data-header-component'] || 'AttacheHeader');
+    var Preview = eval(this.props['data-preview-component'] || 'AttacheFilePreview');
+    var Placeholder = eval(this.props['data-placeholder-component'] || 'AttachePlaceholder');
+
     var previews = [];
     $.each(that.state.files, function(key, result) {
-      var json = JSON.stringify(result);
       if (result.path) {
         var parts = result.path.split('/');
         parts.splice(parts.length-1, 0, encodeURIComponent(that.props['data-geometry'] || '128x128#'));
         result.src = that.props['data-downloadurl'] + '/' + parts.join('/');
         result.filename = result.src.split('/').pop().split(/[#?]/).shift();
+        result.multiple = that.props.multiple;
       }
+      var json = JSON.stringify(result);
       previews.push(
         React.createElement("div", {className: "attache-file-input"}, 
-          React.createElement("input", {type: "hidden", name: that.props.name, value: result.path, readOnly: "true"}), 
-          React.createElement(AttacheFilePreview, React.__spread({},  result, {key: key, onRemove: that.onRemove.bind(that, key)}))
+          React.createElement("input", {type: "hidden", name: that.props.name, value: json, readOnly: "true"}), 
+          React.createElement(Preview, React.__spread({},  result, {key: key, onRemove: that.onRemove.bind(that, key)}))
         )
       );
     });
+
+    var placeholders = [];
+    if (previews.length == 0 && that.props['data-placeholder']) $.each(JSON.parse(that.props['data-placeholder']), function(uid, src) {
+      placeholders.push(
+        React.createElement(Placeholder, React.__spread({},   that.props, {src: src}))
+      );
+    });
+
+    var discards = [];
+    $.each(that.state.attaches_discarded, function(index, discard) {
+      discards.push(
+        React.createElement("input", {type: "hidden", name: discard.fieldname, value: discard.path})
+      );
+    });
+
+    var className = ["attache-file-selector", "attache-placeholders-count-" + placeholders.length, "attache-previews-count-" + previews.length, this.props['data-classname']].join(' ').trim();
     return (
-      React.createElement("label", {htmlFor: this.props.id, className: "attache-file-selector"}, 
-        React.createElement("input", React.__spread({type: "file"},  this.props, {onChange: this.onChange})), 
-        previews
+      React.createElement("label", {htmlFor: that.props.id, className: className}, 
+        React.createElement("input", React.__spread({type: "file"},  that.props, {onChange: this.onChange})), 
+        React.createElement("input", {type: "hidden", name: that.props.name, value: ""}), 
+        React.createElement(Header, React.__spread({},  that.props)), 
+        previews, 
+        placeholders, 
+        discards
       )
     );
   }

data/app/assets/javascripts/attache/file_input.js.jsx

@@ -2,25 +2,31 @@ var AttacheFileInput = React.createClass({
 
   getInitialState: function() {
     var files = {};
-    var array = ([].concat(JSON.parse(this.props['data-value'])));
-    $.each(array, function(uid, json) {
-      if (json) files[uid] = { path: json };
+    if (this.props['data-value']) $.each(JSON.parse(this.props['data-value']), function(uid, json) {
+      if (json) files[uid] = json;
     });
-    return {files: files};
+    return {files: files, attaches_discarded: []};
   },
 
   onRemove: function(uid, e) {
-    delete this.state.files[uid];
-    this.setState(this.state);
     e.preventDefault();
     e.stopPropagation();
+
+    var fieldname = this.getDOMNode().firstChild.name;                           // when   'user[avatar]'
+    var newfield  = fieldname.replace(/\w+\](\[\]|)$/, 'attaches_discarded][]'); // become 'user[attaches_discarded][]'
+
+    this.state.attaches_discarded.push({ fieldname: newfield, path: this.state.files[uid].path });
+    delete this.state.files[uid];
+
+    this.setState(this.state);
   },
 
   onChange: function() {
     var file_element = this.getDOMNode().firstChild;
     // user cancelled file chooser dialog. ignore
     if (file_element.files.length == 0) return;
-    this.state.files = {};
+    if (! this.props.multiple) this.state.files = {};
+
     this.setState(this.state);
     // upload the file via CORS
     var that = this;
@@ -45,26 +51,52 @@ var AttacheFileInput = React.createClass({
 
   render: function() {
     var that = this;
+
+    var Header = eval(this.props['data-header-component'] || 'AttacheHeader');
+    var Preview = eval(this.props['data-preview-component'] || 'AttacheFilePreview');
+    var Placeholder = eval(this.props['data-placeholder-component'] || 'AttachePlaceholder');
+
     var previews = [];
     $.each(that.state.files, function(key, result) {
-      var json = JSON.stringify(result);
       if (result.path) {
         var parts = result.path.split('/');
         parts.splice(parts.length-1, 0, encodeURIComponent(that.props['data-geometry'] || '128x128#'));
         result.src = that.props['data-downloadurl'] + '/' + parts.join('/');
         result.filename = result.src.split('/').pop().split(/[#?]/).shift();
+        result.multiple = that.props.multiple;
       }
+      var json = JSON.stringify(result);
       previews.push(
         <div className="attache-file-input">
-          <input type="hidden" name={that.props.name} value={result.path} readOnly="true" />
-          <AttacheFilePreview {...result} key={key} onRemove={that.onRemove.bind(that, key)}/>
+          <input type="hidden" name={that.props.name} value={json} readOnly="true" />
+          <Preview {...result} key={key} onRemove={that.onRemove.bind(that, key)}/>
         </div>
       );
     });
+
+    var placeholders = [];
+    if (previews.length == 0 && that.props['data-placeholder']) $.each(JSON.parse(that.props['data-placeholder']), function(uid, src) {
+      placeholders.push(
+        <Placeholder  {...that.props} src={src} />
+      );
+    });
+
+    var discards = [];
+    $.each(that.state.attaches_discarded, function(index, discard) {
+      discards.push(
+        <input type="hidden" name={discard.fieldname} value={discard.path} />
+      );
+    });
+
+    var className = ["attache-file-selector", "attache-placeholders-count-" + placeholders.length, "attache-previews-count-" + previews.length, this.props['data-classname']].join(' ').trim();
     return (
-      <label htmlFor={this.props.id} className="attache-file-selector">
-        <input type="file" {...this.props} onChange={this.onChange}/>
+      <label htmlFor={that.props.id} className={className}>
+        <input type="file" {...that.props} onChange={this.onChange}/>
+        <input type="hidden" name={that.props.name} value="" />
+        <Header {...that.props} />
         {previews}
+        {placeholders}
+        {discards}
       </label>
     );
   }

data/lib/attache_rails.rb

@@ -1,43 +1,10 @@
-require "attache_rails/engine"
-
 module AttacheRails
-  module Helper
-    ATTACHE_UPLOAD_URL   = ENV.fetch('ATTACHE_UPLOAD_URL')   { 'http://localhost:9292/upload' }
-    ATTACHE_DOWNLOAD_URL = ENV.fetch('ATTACHE_DOWNLOAD_URL') { 'http://localhost:9292/view' }
-    ATTACHE_UPLOAD_DURATION = ENV.fetch('ATTACHE_UPLOAD_DURATION') { '600' }.to_i # 10 minutes
-
-    def attache_urls(json, geometry)
-      array = json.kind_of?(Array) ? json : [*json]
-      array.collect do |path|
-        download_url = ATTACHE_DOWNLOAD_URL
-        prefix, basename = File.split(path)
-        [download_url, prefix, CGI.escape(geometry), basename].join('/').tap do |url|
-          yield url if block_given?
-        end
-      end
-    end
-
-    def attache_options(geometry, current_value)
-      auth = if ENV['ATTACHE_SECRET_KEY']
-        uuid = SecureRandom.uuid
-        expiration = (Time.now + ATTACHE_UPLOAD_DURATION).to_i
-        hmac = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha1'), ENV['ATTACHE_SECRET_KEY'], "#{uuid}#{expiration}")
-        { uuid: uuid, expiration: expiration, hmac: hmac }
-      else
-        {}
-      end
-
-      {
-        class: 'enable-attache',
-        data: {
-          geometry: geometry,
-          value: [*current_value],
-          uploadurl: ATTACHE_UPLOAD_URL,
-          downloadurl: ATTACHE_DOWNLOAD_URL,
-        }.merge(auth),
-      }
-    end
-  end
+  ATTACHE_URL             = ENV.fetch('ATTACHE_URL')             { "http://localhost:9292" }
+  ATTACHE_UPLOAD_URL      = ENV.fetch('ATTACHE_UPLOAD_URL')      { "#{ATTACHE_URL}/upload" }
+  ATTACHE_DOWNLOAD_URL    = ENV.fetch('ATTACHE_DOWNLOAD_URL')    { "#{ATTACHE_URL}/view" }
+  ATTACHE_DELETE_URL      = ENV.fetch('ATTACHE_DELETE_URL')      { "#{ATTACHE_URL}/delete" }
+  ATTACHE_UPLOAD_DURATION = ENV.fetch('ATTACHE_UPLOAD_DURATION') { "600" }.to_i # signed upload form expires in 10 minutes
 end
 
-ActionView::Base.send(:include, AttacheRails::Helper)
+require "attache_rails/engine"
+require "attache_rails/model"

data/lib/attache_rails/model.rb

@@ -0,0 +1,91 @@
+require "net/http"
+require "uri"
+
+module AttacheRails
+  module Utils
+    class << self
+      def attache_url_for(json_string, geometry)
+        JSON.parse(json_string).tap do |attrs|
+          prefix, basename = File.split(attrs['path'])
+          attrs['url'] = [ATTACHE_DOWNLOAD_URL, prefix, CGI.escape(geometry), basename].join('/')
+        end
+      end
+
+      def attache_auth_options
+        if ENV['ATTACHE_SECRET_KEY']
+          uuid = SecureRandom.uuid
+          expiration = (Time.now + ATTACHE_UPLOAD_DURATION).to_i
+          hmac = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha1'), ENV['ATTACHE_SECRET_KEY'], "#{uuid}#{expiration}")
+          { uuid: uuid, expiration: expiration, hmac: hmac }
+        else
+          {}
+        end
+      end
+
+      def attache_options(geometry, current_value, options)
+        {
+          multiple: options[:multiple],
+          class: 'enable-attache',
+          data: {
+            geometry: geometry,
+            value: [*current_value],
+            placeholder: [*options[:placeholder]],
+            uploadurl: ATTACHE_UPLOAD_URL,
+            downloadurl: ATTACHE_DOWNLOAD_URL,
+          }.merge(options[:data_attrs] || {}).merge(attache_auth_options),
+        }
+      end
+    end
+  end
+  module Model
+    def self.included(base)
+      base.extend ClassMethods
+      base.class_eval do
+        attr_accessor :attaches_discarded
+        after_commit  :attaches_discard!, if: :attaches_discarded
+      end
+    end
+
+    def attaches_discard!(files = attaches_discarded)
+      if files.present?
+        logger.info "DELETE #{files.inspect}"
+        Net::HTTP.post_form(
+          URI.parse(ATTACHE_DELETE_URL),
+          Utils.attache_auth_options.merge(paths: files.join("\n"))
+        )
+      end
+    end
+
+    module ClassMethods
+      def has_one_attache(name)
+        serialize name, JSON
+        define_method "#{name}_options",    -> (geometry, options = {}) { Utils.attache_options(geometry, [self.send("#{name}_attributes", geometry)], multiple: false, **options) }
+        define_method "#{name}_url",        -> (geometry) {               self.send("#{name}_attributes", geometry).try(:[], 'url') }
+        define_method "#{name}_attributes", -> (geometry) {               str = self.send(name); Utils.attache_url_for(str, geometry) if str; }
+        define_method "#{name}_discard",    -> do
+          self.attaches_discarded ||= []
+          self.attaches_discarded.push(self.send("#{name}_attributes", 'original')['path'])
+        end
+        after_destroy "#{name}_discard"
+      end
+
+      def has_many_attaches(name)
+        serialize name, JSON
+        define_method "#{name}_options",    -> (geometry, options = {}) { Utils.attache_options(geometry, self.send("#{name}_attributes", geometry), multiple: true, **options) }
+        define_method "#{name}_urls",       -> (geometry) {               self.send("#{name}_attributes", geometry).collect {|attrs| attrs['url'] } }
+        define_method "#{name}_attributes", -> (geometry) {
+          (self.send(name) || []).inject([]) do |sum, str|
+            sum + (str.blank? ? [] : [Utils.attache_url_for(str, geometry)])
+          end
+        }
+        define_method "#{name}_discard",    -> do
+          self.attaches_discarded ||= []
+          self.send("#{name}_attributes", 'original').each {|attrs| self.attaches_discarded.push(attrs['path']) }
+        end
+        after_destroy "#{name}_discard"
+      end
+    end
+  end
+end
+
+ActiveRecord::Base.send(:include, AttacheRails::Model)

data/lib/attache_rails/version.rb

@@ -1,3 +1,3 @@
 module AttacheRails
-  VERSION = "0.0.6"
+  VERSION = "0.1.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: attache_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.1.0
 platform: ruby
 authors:
 - choonkeat
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-01 00:00:00.000000000 Z
+date: 2015-03-25 00:00:00.000000000 Z
 dependencies: []
 description: 
 email:
@@ -29,6 +29,7 @@ files:
 - app/assets/javascripts/attache/ujs.js
 - lib/attache_rails.rb
 - lib/attache_rails/engine.rb
+- lib/attache_rails/model.rb
 - lib/attache_rails/version.rb
 homepage: https://github.com/choonkeat/attache_rails
 licenses:
@@ -50,7 +51,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5
+rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
 summary: Client lib to use attache server