attache-rails 0.4.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: de21791c6e1a726e7de66bd344db5355d5251114
+  data.tar.gz: 8c6d37a9ff4018386915af71e20b3b87fd0ae207
+SHA512:
+  metadata.gz: 9b78de46276eb9b77979c0e5782955b62921902491958c9b074747f4bccde6e5afe17e2d5851a7d1df4dfda3afdbd0425a9bcd884efcf5686a866b170990587e
+  data.tar.gz: c7ada47737eaa07cfeeb14e3078790b3e215b55fa4542f749cb61e16adbfd7ba0406b16596a2a87606fa00b4a45737ffc664ebb0b9cda984586dab1590b68c84

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 choonkeat
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,172 @@
+# attache-rails
+
+[![Gem Version](https://badge.fury.io/rb/attache-rails.svg)](https://badge.fury.io/rb/attache-rails)
+[![Build Status](https://travis-ci.org/choonkeat/attache-rails.svg?branch=master)](https://travis-ci.org/choonkeat/attache-rails)
+
+Ruby on Rails / ActiveRecord integration for [attache server](https://github.com/choonkeat/attache) using [attache/api](https://github.com/choonkeat/attache-api)
+
+## Dependencies
+
+[React](https://github.com/reactjs/react-rails), jQuery, Bootstrap 3
+
+## Installation
+
+**WARNING: Please see upgrade notes below if you are upgrading from V2**
+
+Install the attache-rails package from Rubygems:
+
+``` bash
+gem install attache-rails
+```
+
+Or add this to your `Gemfile`
+
+``` ruby
+gem "attache-rails"
+```
+
+Add the attache javascript to your `application.js`
+
+``` javascript
+//= require attache
+```
+
+If you want to customize the file upload look and feel, define your own react `<AttacheFilePreview/>` renderer *before* including the attache js. For example,
+
+``` javascript
+//= require ./my_attache_file_preview.js
+//= require attache
+```
+
+The `AttacheRails.upgrade_fileinputs` idempotent function is setup to find all the elements with `enable-attache` css class and upgrade them to use the direct upload & preview javascript. If you wish to re-run this function any other time, e.g. hookup the `cocoon:after-insert` event, you may
+
+``` javascript
+$(document).on('cocoon:after-insert', AttacheRails.upgrade_fileinputs);
+```
+
+
+## Usage
+
+### Database
+
+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 (PostgreSQL users see below)
+
+``` bash
+rails generate migration AddPhotoPathToUsers photo:text
+```
+
+To assign **multiple** images to **one** model, the same column can be used, although pluralized column name reads better
+
+``` bash
+rails generate migration AddPhotoPathToUsers photos:text
+```
+
+### Model
+
+In your model, define whether it `has_one_attache` or `has_many_attaches`
+
+``` ruby
+class User < ActiveRecord::Base
+  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:
+
+``` slim
+= f.file_field :photos, f.object.avatar_options('64x64#')
+```
+
+If you were using `has_many_attaches` the file input will automatically allow multiple files, otherwise the file input will only accept 1 file.
+
+
+NOTE: `64x64#` is just an example, you should define a suitable [geometry](http://www.imagemagick.org/Usage/resize/) for your form
+
+### Strong Parameters
+
+You'd need to permit the new field in your controller. For example, a strong parameters definition may look like this in your `Users` controller
+
+``` ruby
+def user_params
+  params.require(:user).permit(:name)
+end
+```
+
+If you're only accepting a single file upload, change it to
+
+``` ruby
+def user_params
+  params.require(:user).permit(:name, :photo, attaches_discarded: [])
+end
+```
+
+If you're accepting multiple file uploads, change it to
+
+``` ruby
+def user_params
+  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 `*_url` or `*_urls` methods (depending on whether you are accepting multiple files) to obtain full urls.
+
+``` slim
+= image_tag @user.photo_url('100x100#')
+```
+
+or
+
+``` slim
+- @user.photos_urls('200x200#').each do |url|
+  = image_tag url
+```
+
+### Environment configs
+
+`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`
+
+`ATTACHE_SECRET_KEY` is the shared secret with the `attache` server. e.g. `t0psecr3t`
+
+* If this variable is not set, then upload requests will not be signed & `ATTACHE_UPLOAD_DURATION` will be ignored
+* If this variable is set, it must be the same value as `SECRET_KEY` is set on the `attache` server
+
+### PostgreSQL
+
+Take advantage of the [json support](http://guides.rubyonrails.org/active_record_postgresql.html#json) by using the [`json` or `jsonb` column types](http://www.postgresql.org/docs/9.4/static/functions-json.html) instead
+
+``` bash
+rails generate migration AddPhotoPathToUsers photo:json
+```
+
+This opens up the possibility to query inside the column, e.g.
+
+``` ruby
+User.where("photo ->> 'content_type' = ?", 'image/png')
+```
+
+## Upgrading from v2
+
+`json` values in the database column has changed in v3. Previously, we are working with json *strings*, now we are working with json *objects*, aka `Hash`. i.e.
+
+- in previous version, `@user.photos` value could be something like `["{\"path\":\"dirname/file.jpg\"}"]`. Notice that it is an array of 1 `String`.
+- in v3, the value would be `[{"path"=>"dirname/file.jpg"}]`. Notice that it is an array of 1 `Hash`
+
+If you're upgrading from V2, we have a generator that will create a migration file to fixup the data
+
+```
+rails g attache:rails:upgrade_v2_to_v3
+```
+
+NOTE: It is highly recommended that developers verify the migration with a dump of the production data in a staging environment. Please take a look at the generated migration file.
+
+# License
+
+MIT

data/Rakefile

@@ -0,0 +1,5 @@
+require "bundler/gem_tasks"
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+task :default => :spec

data/app/assets/javascripts/attache.js

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

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

@@ -0,0 +1,77 @@
+if (typeof AttacheFilePreview === 'undefined') {
+
+  var AttacheFilePreview = React.createClass({displayName: "AttacheFilePreview",
+
+    getInitialState: function() {
+      return { srcWas: '' };
+    },
+
+    onSrcLoaded: function() {
+      this.setState({ srcWas: this.props.src });
+    },
+
+    render: function() {
+      var previewClassName = "attache-file-preview";
+
+      // progressbar
+      if (this.state.srcWas != this.props.src) {
+        previewClassName = previewClassName + " attache-loading";
+        var className = this.props.className || "progress-bar progress-bar-striped active" + (this.props.src ? " progress-bar-success" : "");
+        var pctString = this.props.pctString || (this.props.src ? 100 : this.props.percentLoaded) + "%";
+        var pctDesc   = this.props.pctDesc   || (this.props.src ? 'Loading...' : pctString);
+        var pctStyle  = { width: pctString, minWidth: '3em' };
+        var progress = (
+          React.createElement("div", {className: "progress"}, 
+            React.createElement("div", {className: className, role: "progressbar", "aria-valuenow": this.props.percentLoaded, "aria-valuemin": "0", "aria-valuemax": "100", style: pctStyle}, 
+              pctDesc
+            )
+          )
+        );
+      }
+
+      // img tag
+      if (this.props.src) {
+        var img = React.createElement("img", {src: this.props.src, onLoad: this.onSrcLoaded});
+      }
+
+      // combined
+      return (
+        React.createElement("div", {className: previewClassName}, 
+          progress, 
+          img, 
+          React.createElement("div", {className: "clearfix"}, 
+            React.createElement("div", {className: "pull-left"}, this.props.filename), 
+            React.createElement("a", {href: "#remove", className: "pull-right", onClick: this.props.onRemove, title: "Click to remove"}, "×")
+          )
+        )
+      );
+    }
+  });
+
+}
+
+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

@@ -0,0 +1,77 @@
+if (typeof AttacheFilePreview === 'undefined') {
+
+  var AttacheFilePreview = React.createClass({
+
+    getInitialState: function() {
+      return { srcWas: '' };
+    },
+
+    onSrcLoaded: function() {
+      this.setState({ srcWas: this.props.src });
+    },
+
+    render: function() {
+      var previewClassName = "attache-file-preview";
+
+      // progressbar
+      if (this.state.srcWas != this.props.src) {
+        previewClassName = previewClassName + " attache-loading";
+        var className = this.props.className || "progress-bar progress-bar-striped active" + (this.props.src ? " progress-bar-success" : "");
+        var pctString = this.props.pctString || (this.props.src ? 100 : this.props.percentLoaded) + "%";
+        var pctDesc   = this.props.pctDesc   || (this.props.src ? 'Loading...' : pctString);
+        var pctStyle  = { width: pctString, minWidth: '3em' };
+        var progress = (
+          <div className="progress">
+            <div className={className} role="progressbar" aria-valuenow={this.props.percentLoaded} aria-valuemin="0" aria-valuemax="100" style={pctStyle}>
+              {pctDesc}
+            </div>
+          </div>
+        );
+      }
+
+      // img tag
+      if (this.props.src) {
+        var img = <img src={this.props.src} onLoad={this.onSrcLoaded} />;
+      }
+
+      // combined
+      return (
+        <div className={previewClassName}>
+          {progress}
+          {img}
+          <div className="clearfix">
+            <div className="pull-left">{this.props.filename}</div>
+            <a href="#remove" className="pull-right" onClick={this.props.onRemove} title="Click to remove">&times;</a>
+          </div>
+        </div>
+      );
+    }
+  });
+
+}
+
+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

@@ -0,0 +1,87 @@
+var AttacheCORSUpload = (function() {
+  var counter = 0;
+
+  AttacheCORSUpload.prototype.onComplete = function(uid, json) { };
+  AttacheCORSUpload.prototype.onProgress = function(uid, json) { };
+  AttacheCORSUpload.prototype.onError = function(uid, status) { alert(status); };
+  AttacheCORSUpload.prototype.createLocalThumbnail = function() { }; // for overwriting
+
+  function AttacheCORSUpload(options) {
+    if (options == null) options = {};
+    for (option in options) {
+      this[option] = options[option];
+    }
+    this.handleFileSelect(options.file_element, options.files);
+  }
+
+  AttacheCORSUpload.prototype.handleFileSelect = function(file_element, files) {
+    var f, output, _i, _len, _results, url, $ele, prefix;
+    $ele = $(file_element);
+    url = $ele.data('uploadurl');
+    if ($ele.data('hmac')) {
+      url = url +
+            "?hmac=" + encodeURIComponent($ele.data('hmac')) +
+            "&uuid=" + encodeURIComponent($ele.data('uuid')) +
+            "&expiration=" + encodeURIComponent($ele.data('expiration')) +
+            ""
+    }
+
+    prefix = Date.now() + "_";
+    output = [];
+    _results = [];
+    for (_i = 0, _len = files.length; _i < _len; _i++) {
+      f = files[_i];
+      this.createLocalThumbnail(f); // if any
+      f.uid = prefix + (counter++);
+      this.onProgress(f.uid, { src: f.src, filename: f.name, percentLoaded: 0, bytesLoaded: 0, bytesTotal: f.size });
+      _results.push(this.performUpload(f, url));
+    }
+    return _results;
+  };
+
+  AttacheCORSUpload.prototype.createCORSRequest = function(method, url) {
+    var xhr;
+    xhr = new XMLHttpRequest();
+    if (xhr.withCredentials != null) {
+      xhr.open(method, url, true);
+    } else if (typeof XDomainRequest !== "undefined") {
+      xhr = new XDomainRequest();
+      xhr.open(method, url);
+    } else {
+      xhr = null;
+    }
+    return xhr;
+  };
+
+  AttacheCORSUpload.prototype.performUpload = function(file, url) {
+    var this_s3upload, xhr;
+    this_s3upload = this;
+    url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'file=' + encodeURIComponent(file.name);
+    xhr = this.createCORSRequest('PUT', url);
+    if (!xhr) {
+      this.onError(file.uid, 'CORS not supported');
+    } else {
+      xhr.onload = function(e) {
+        if (xhr.status === 200) {
+          this_s3upload.onComplete(file.uid, JSON.parse(e.target.responseText));
+        } else {
+          return this_s3upload.onError(file.uid, xhr.status + ' ' + xhr.statusText);
+        }
+      };
+      xhr.onerror = function() {
+        return this_s3upload.onError(file.uid, 'Unable to reach server');
+      };
+      xhr.upload.onprogress = function(e) {
+        var percentLoaded;
+        if (e.lengthComputable) {
+          percentLoaded = Math.round((e.loaded / e.total) * 100);
+          return this_s3upload.onProgress(file.uid, { src: file.src, filename: file.name, percentLoaded: percentLoaded, bytesLoaded: e.loaded, bytesTotal: e.total });
+        }
+      };
+    }
+    return xhr.send(file);
+  };
+
+  return AttacheCORSUpload;
+
+})();

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

@@ -0,0 +1,152 @@
+var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
+
+  getInitialState: function() {
+    var files = {};
+    if (this.props['data-value']) $.each(JSON.parse(this.props['data-value']), function(uid, json) {
+      if (json) files[uid] = json;
+    });
+    return {files: files, attaches_discarded: [], uploading: 0 };
+  },
+
+  onRemove: function(uid, e) {
+    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);
+  },
+
+  performUpload: function(file_element, files) {
+    // user cancelled file chooser dialog. ignore
+    if (! files || files.length == 0) return;
+    if (! this.props.multiple) {
+      this.state.files = {};
+      files = [files[0]]; // array of 1 element
+    }
+
+    this.setState(this.state);
+    // upload the file via CORS
+    var that = this;
+
+    that.state.uploading = that.state.uploading + files.length;
+    if (! that.state.submit_buttons) that.state.submit_buttons = $("button,input[type='submit']", $(file_element).parents('form')[0]).filter(':not(:disabled)');
+
+    new AttacheCORSUpload({
+      file_element: file_element,
+      files:        files,
+      onComplete:   function() {
+        that.state.uploading--;
+        that.setFileValue.apply(this, arguments);
+      },
+      onProgress:   this.setFileValue,
+      onError: function(uid, status) {
+        that.state.uploading--;
+        that.setFileValue(uid, { pctString: '90%', pctDesc: status, className: 'progress-bar progress-bar-danger' });
+      }
+    });
+
+    // we don't want the file binary to be uploaded in the main form
+    // so the actual file input is neutered
+    file_element.value = '';
+  },
+
+  onChange: function() {
+    var file_element = this.getDOMNode().firstChild;
+    this.performUpload(file_element, file_element && file_element.files);
+  },
+
+  onDragOver: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    $(this.getDOMNode()).addClass('attache-dragover');
+  },
+
+  onDragLeave: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    $(this.getDOMNode()).removeClass('attache-dragover');
+  },
+
+  onDrop: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    var file_element = this.getDOMNode().firstChild;
+    this.performUpload(file_element, e.target.files || e.dataTransfer.files);
+    $(this.getDOMNode()).removeClass('attache-dragover');
+  },
+
+  setFileValue: function(key, value) {
+    this.state.files[key] = value;
+    this.setState(this.state);
+  },
+
+  render: function() {
+    var that = this;
+
+    if (that.state.uploading > 0) {
+      that.state.submit_buttons.attr('disabled', true);
+    } else if (that.state.submit_buttons) {
+      that.state.submit_buttons.attr('disabled', null);
+    }
+
+    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) {
+      // json is input[value], drop non essential values
+      var copy = JSON.parse(JSON.stringify(result));
+      delete copy.src;
+      delete copy.filename;
+      var json = JSON.stringify(copy);
+      //
+      result.multiple = that.props.multiple;
+      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();
+      }
+      var previewKey = "preview" + key;
+      previews.push(
+        React.createElement("div", {key: previewKey, className: "attache-file-input"}, 
+          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({key: "placeholder"},  that.props, {src: src}))
+      );
+    });
+
+    var discards = [];
+    $.each(that.state.attaches_discarded, function(index, discard) {
+      var discardKey = "discard" + discard.path;
+      discards.push(
+        React.createElement("input", {key: discardKey, 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: that.props.id, className: className, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop}, 
+        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

@@ -0,0 +1,152 @@
+var AttacheFileInput = React.createClass({
+
+  getInitialState: function() {
+    var files = {};
+    if (this.props['data-value']) $.each(JSON.parse(this.props['data-value']), function(uid, json) {
+      if (json) files[uid] = json;
+    });
+    return {files: files, attaches_discarded: [], uploading: 0 };
+  },
+
+  onRemove: function(uid, e) {
+    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);
+  },
+
+  performUpload: function(file_element, files) {
+    // user cancelled file chooser dialog. ignore
+    if (! files || files.length == 0) return;
+    if (! this.props.multiple) {
+      this.state.files = {};
+      files = [files[0]]; // array of 1 element
+    }
+
+    this.setState(this.state);
+    // upload the file via CORS
+    var that = this;
+
+    that.state.uploading = that.state.uploading + files.length;
+    if (! that.state.submit_buttons) that.state.submit_buttons = $("button,input[type='submit']", $(file_element).parents('form')[0]).filter(':not(:disabled)');
+
+    new AttacheCORSUpload({
+      file_element: file_element,
+      files:        files,
+      onComplete:   function() {
+        that.state.uploading--;
+        that.setFileValue.apply(this, arguments);
+      },
+      onProgress:   this.setFileValue,
+      onError: function(uid, status) {
+        that.state.uploading--;
+        that.setFileValue(uid, { pctString: '90%', pctDesc: status, className: 'progress-bar progress-bar-danger' });
+      }
+    });
+
+    // we don't want the file binary to be uploaded in the main form
+    // so the actual file input is neutered
+    file_element.value = '';
+  },
+
+  onChange: function() {
+    var file_element = this.getDOMNode().firstChild;
+    this.performUpload(file_element, file_element && file_element.files);
+  },
+
+  onDragOver: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    $(this.getDOMNode()).addClass('attache-dragover');
+  },
+
+  onDragLeave: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    $(this.getDOMNode()).removeClass('attache-dragover');
+  },
+
+  onDrop: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    var file_element = this.getDOMNode().firstChild;
+    this.performUpload(file_element, e.target.files || e.dataTransfer.files);
+    $(this.getDOMNode()).removeClass('attache-dragover');
+  },
+
+  setFileValue: function(key, value) {
+    this.state.files[key] = value;
+    this.setState(this.state);
+  },
+
+  render: function() {
+    var that = this;
+
+    if (that.state.uploading > 0) {
+      that.state.submit_buttons.attr('disabled', true);
+    } else if (that.state.submit_buttons) {
+      that.state.submit_buttons.attr('disabled', null);
+    }
+
+    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) {
+      // json is input[value], drop non essential values
+      var copy = JSON.parse(JSON.stringify(result));
+      delete copy.src;
+      delete copy.filename;
+      var json = JSON.stringify(copy);
+      //
+      result.multiple = that.props.multiple;
+      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();
+      }
+      var previewKey = "preview" + key;
+      previews.push(
+        <div key={previewKey} className="attache-file-input">
+          <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 key="placeholder" {...that.props} src={src} />
+      );
+    });
+
+    var discards = [];
+    $.each(that.state.attaches_discarded, function(index, discard) {
+      var discardKey = "discard" + discard.path;
+      discards.push(
+        <input key={discardKey} 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={that.props.id} className={className} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>
+        <input type="file" {...that.props} onChange={this.onChange}/>
+        <input type="hidden" name={that.props.name} value="" />
+        <Header {...that.props} />
+        {previews}
+        {placeholders}
+        {discards}
+      </label>
+    );
+  }
+});

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

@@ -0,0 +1,23 @@
+window.AttacheRails = {
+  upgrade_fileinputs: function() {
+    var safeWords = { 'class': 'className', 'for': 'htmlFor' };
+    var sel = document.getElementsByClassName('enable-attache');
+    var ele, attrs, name, value;
+    for (var i = sel.length-1; i >= 0; i--) {
+      ele = sel[i];
+      attrs = {};
+      for (var j = 0; j < ele.attributes.length; j++) {
+        name = ele.attributes[j].name;
+        value = ele.attributes[j].value;
+        if (name === 'class') value = value.replace('enable-attache', 'attache-enabled');
+        name = safeWords[name] || name;
+        attrs[name] = value;
+      }
+      var wrap = document.createElement('div');
+      ele.parentNode.replaceChild(wrap, ele); // ele.parentNode.insertBefore(wrap, ele.nextSibling);
+      React.render(React.createElement(AttacheFileInput, React.__spread({},  attrs)), wrap);
+    }
+  }
+};
+
+$(document).on('page:change', AttacheRails.upgrade_fileinputs);

data/lib/attache/rails.rb

@@ -0,0 +1,13 @@
+module Attache
+  module Rails
+    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') { 3.hours }.to_i # expires signed upload form
+  end
+end
+
+require "attache/rails/engine"
+require "attache/rails/model"
+require "attache/api/test" if defined?(Rails) && Rails.env.test?

data/lib/attache/rails/engine.rb

@@ -0,0 +1,7 @@
+module Attache
+  module Rails
+    class Engine < ::Rails::Engine
+      isolate_namespace Attache::Rails
+    end
+  end
+end

data/lib/attache/rails/model.rb

@@ -0,0 +1,57 @@
+require "cgi"
+require "uri"
+require "httpclient"
+require "attache/api"
+
+module Attache
+  module Rails
+    module Model
+      include Attache::API::Model
+
+      def self.included(base)
+        # has_one_attache, has_many_attaches
+        base.extend ClassMethods
+
+        # `discard` management
+        base.class_eval do
+          attr_accessor :attaches_discarded
+          after_commit if: :attaches_discarded do |instance|
+            instance.attaches_discard!(instance.attaches_discarded)
+          end
+        end
+      end
+
+      module ClassMethods
+        def attache_setup_column(name)
+          case coltype = column_for_attribute(name).type
+          when :text, :string, :binary
+            serialize name, JSON
+          end
+        rescue Exception
+        end
+
+        def has_one_attache(name)
+          attache_setup_column(name)
+          define_method "#{name}_options",    -> (geometry, options = {}) { Hash(class: 'enable-attache', multiple: false).merge(attache_field_options(self.send(name), geometry, options)) }
+          define_method "#{name}_url",        -> (geometry)               { attache_field_urls(self.send(name), geometry).try(:first) }
+          define_method "#{name}_attributes", -> (geometry)               { attache_field_attributes(self.send(name), geometry).try(:first) }
+          define_method "#{name}=",           -> (value)                  { super(attache_field_set(Array.wrap(value)).try(:first)) }
+          after_update                        ->                          { self.attaches_discarded ||= []; attache_mark_for_discarding(self.send("#{name}_was"), self.send("#{name}"), self.attaches_discarded) }
+          after_destroy                       ->                          { self.attaches_discarded ||= []; attache_mark_for_discarding(self.send("#{name}_was"), [], self.attaches_discarded) }
+        end
+
+        def has_many_attaches(name)
+          attache_setup_column(name)
+          define_method "#{name}_options",    -> (geometry, options = {}) { Hash(class: 'enable-attache', multiple: true).merge(attache_field_options(self.send(name), geometry, options)) }
+          define_method "#{name}_urls",       -> (geometry)               { attache_field_urls(self.send(name), geometry) }
+          define_method "#{name}_attributes", -> (geometry)               { attache_field_attributes(self.send(name), geometry) }
+          define_method "#{name}=",           -> (value)                  { super(attache_field_set(Array.wrap(value))) }
+          after_update                        ->                          { self.attaches_discarded ||= []; attache_mark_for_discarding(self.send("#{name}_was"), self.send("#{name}"), self.attaches_discarded) }
+          after_destroy                       ->                          { self.attaches_discarded ||= []; attache_mark_for_discarding(self.send("#{name}_was"), [], self.attaches_discarded) }
+        end
+      end
+    end
+  end
+end
+
+ActiveRecord::Base.send(:include, Attache::Rails::Model)

data/lib/attache/rails/version.rb

@@ -0,0 +1,5 @@
+module Attache
+  module Rails
+    VERSION = "0.4.0"
+  end
+end

data/lib/generators/attache/rails/templates/upgrade_v2_to_v3_migration.rb.erb

@@ -0,0 +1,45 @@
+class <%= migration_class_name %> < ActiveRecord::Migration
+  <%- ($has_one_attache + $has_many_attaches).each do |(klass, column)| -%>
+  class <%= klass %> < ActiveRecord::Base; serialize :<%= column %>, JSON; end
+  <%- end -%>
+
+  def self.up
+    # has_one_attache
+    <%- $has_one_attache.each do |(klass, column)| -%>
+    <%= klass %>.where.not(<%= column %>: [nil, ""]).find_each do |obj|
+      if obj[:<%= column %>].kind_of?(String)
+        obj.update(<%= column %>: JSON.parse(obj[:<%= column %>]))
+      end
+    end
+    <%- end -%>
+
+    # has_many_attaches
+    <%- $has_many_attaches.each do |(klass, column)| -%>
+    <%= klass %>.where.not(<%= column %>: [nil, ""]).find_each do |obj|
+      if obj[:<%= column %>].first.kind_of?(String)
+        obj.update(<%= column %>: obj[:<%= column %>].collect {|v| JSON.parse(v) })
+      end
+    end
+    <%- end -%>
+  end
+
+  def self.down
+    # has_one_attache
+    <%- $has_one_attache.each do |(klass, column)| -%>
+    <%= klass %>.where.not(<%= column %>: [nil, ""]).find_each do |obj|
+      if obj[:<%= column %>].kind_of?(Hash)
+        obj.update(<%= column %>: obj[:<%= column %>].to_json)
+      end
+    end
+    <%- end -%>
+
+    # has_many_attaches
+    <%- $has_many_attaches.each do |(klass, column)| -%>
+    <%= klass %>.where.not(<%= column %>: [nil, ""]).find_each do |obj|
+      if obj[:<%= column %>].first.kind_of?(Hash)
+        obj.update(<%= column %>: obj[:<%= column %>].collect {|v| v.to_json })
+      end
+    end
+    <%- end -%>
+  end
+end

data/lib/generators/attache/rails/upgrade_v2_to_v3_generator.rb

@@ -0,0 +1,57 @@
+require 'rails/generators/active_record'
+
+module Attache
+  module Rails
+    class UpgradeV2ToV3Generator < ::Rails::Generators::Base
+      include ::Rails::Generators::Migration
+
+      def self.next_migration_number(dir)
+        ActiveRecord::Generators::Base.next_migration_number(dir)
+      end
+
+      def self.source_root
+        @source_root ||= File.expand_path('../templates', __FILE__)
+      end
+
+      def generate_migration
+        migration_template "upgrade_v2_to_v3_migration.rb.erb", "db/migrate/#{migration_file_name}"
+      end
+
+      def migration_name
+        "UpgradeAttacheFieldsFromV2ToV3"
+      end
+
+      def migration_file_name
+        "#{migration_name.underscore}.rb"
+      end
+
+      def migration_class_name
+        migration_name.camelize
+      end
+
+      $has_one_attache = []
+      $has_many_attaches = []
+
+      ActiveRecord::Base.class_eval do
+        def self.has_one_attache(name)
+          $has_one_attache.push([self.name, name])
+        end
+
+        def self.has_many_attaches(name)
+          $has_many_attaches.push([self.name, name])
+        end
+      end
+
+      # Rails::ConsoleMethods#reload!
+      ActionDispatch::Reloader.cleanup!
+      ActionDispatch::Reloader.prepare!
+
+      ActiveRecord::Base.connection.tables.each do |table|
+        if klass = table.classify.safe_constantize
+        else
+          puts "skipped #{table}"
+        end
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,158 @@
+--- !ruby/object:Gem::Specification
+name: attache-rails
+version: !ruby/object:Gem::Version
+  version: 0.4.0
+platform: ruby
+authors:
+- choonkeat
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-11-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+- !ruby/object:Gem::Dependency
+  name: attache-api
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+- !ruby/object:Gem::Dependency
+  name: httpclient
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: guard-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: factory_girl_rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- choonkeat@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/javascripts/attache.js
+- app/assets/javascripts/attache/bootstrap3.js
+- app/assets/javascripts/attache/bootstrap3.js.jsx
+- app/assets/javascripts/attache/cors_upload.js
+- app/assets/javascripts/attache/file_input.js
+- app/assets/javascripts/attache/file_input.js.jsx
+- 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
+- lib/generators/attache/rails/templates/upgrade_v2_to_v3_migration.rb.erb
+- lib/generators/attache/rails/upgrade_v2_to_v3_generator.rb
+homepage: https://github.com/choonkeat/attache-rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.6
+signing_key: 
+specification_version: 4
+summary: Client lib to use attache server
+test_files: []