attache_rails 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d1fa11ba11f4fc5b00b924fd2491a67aa27a94a8
+  data.tar.gz: 9f2648a031e25cfd750d6c8d22f1b3f49ad931bd
+SHA512:
+  metadata.gz: bbbea818903c87c0a1bcbbab938df1cd424326cabfeeda4529ab5b14d0e8c5aaa83acac38084974db12cea1b6071c6523ab9bca8c027495a94509ff5541963df
+  data.tar.gz: fc14a4292d0ebebb5f878c484c33bee445ea3b9dc31849ee4b41a17bdc2de8713e5669c24bdfdcd36555743134aa9fdbb1d165f348b5b12a0b10ed9ad252aa91

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,144 @@
+# attache_rails
+
+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/commit/16cb1274dcce5be01b6c9d42ad60c30c106ad7f9) or follow the step by step instructions in this `README`
+
+## Dependencies
+
+[React](https://github.com/reactjs/react-rails), jQuery, Bootstrap 3
+
+## Installation
+
+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
+```
+
+Or you can include the various scripts yourself
+
+``` javascript
+//= require attache/cors_upload
+//= require attache/bootstrap3
+//= require attache/ujs
+```
+
+## Usage
+
+### 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
+
+``` bash
+rails generate migration AddPhotoPathToUsers photo_path:string
+```
+
+To assign **multiple** images to **one** model, you'd only need one text field
+
+``` bash
+rails generate migration AddPhotoPathToUsers photo_path:text
+```
+
+### Model
+
+In your model, `serialize` the column
+
+``` ruby
+class User < ActiveRecord::Base
+  serialize :photo_path, JSON
+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:
+
+``` slim
+= f.file_field :photo_path
+```
+
+Change it to
+
+``` slim
+= f.file_field :photo_path, **attache_options('64x64#', f.object.photo_path)
+```
+
+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
+
+### 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_path)
+end
+```
+
+If you're accepting multiple file uploads via `multiple: true`, change it to
+
+``` ruby
+def user_params
+  params.require(:user).permit(:name, photo_path: [])
+end
+```
+
+### Show
+
+Use the `attache_urls` helper to obtain full urls for the values you've captured in your database.
+
+``` slim
+- attache_urls(@user.photo_path, '128x128#') do |url|
+  = image_tag(url)
+```
+
+Alternatively, you can get the list of urls and manipulate it however you want
+
+``` slim
+= image_tag attache_urls(@user.photo_path, '128x128#').sample
+```
+
+### 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_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
+
+
+# License
+
+MIT

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/attache.js

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

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

@@ -0,0 +1,106 @@
+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 };
+    });
+    return {files: files};
+  },
+
+  onRemove: function(uid, e) {
+    delete this.state.files[uid];
+    this.setState(this.state);
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  onChange: function() {
+    var file_element = this.getDOMNode().firstChild;
+    // user cancelled file chooser dialog. ignore
+    if (file_element.files.length == 0) return;
+    this.state.files = {};
+    this.setState(this.state);
+    // upload the file via CORS
+    var that = this;
+    new CORSUpload({
+      file_element: file_element, onComplete: this.setFileValue, onProgress: this.setFileValue,
+      onError: function(uid, status) { 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
+    file_element.value = '';
+  },
+
+  setFileValue: function(key, value) {
+    this.state.files[key] = value;
+    this.setState(this.state);
+  },
+
+  render: function() {
+    var that = this;
+    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('/');
+      }
+      previews.push(
+        React.createElement("div", {className: "thumbnail"}, 
+          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)}))
+        )
+      );
+    });
+    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
+      )
+    );
+  }
+});
+
+var AttacheFilePreview = React.createClass({displayName: "AttacheFilePreview",
+
+  getInitialState: function() {
+    return { srcWas: '' };
+  },
+
+  removeProgressBar: function() {
+    this.setState({ srcWas: this.props.src });
+  },
+
+  render: function() {
+    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 img       = (this.props.src ? (React.createElement("img", {src: this.props.src, onLoad: this.removeProgressBar})) : '');
+    var pctStyle  = { width: pctString, minWidth: '3em' };
+    var cptStyle  = { textOverflow: "ellipsis" };
+    var caption   = React.createElement("div", {className: "pull-left", style: cptStyle}, this.props.filename || this.props.path && this.props.path.split('/').pop());
+
+    if (this.state.srcWas != this.props.src) {
+      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
+          )
+        )
+      );
+    }
+
+    return (
+      React.createElement("div", {className: "attache-file-preview"}, 
+        progress, 
+        img, 
+        React.createElement("div", {className: "clearfix"}, 
+          caption, 
+          React.createElement("a", {href: "#remove", className: "pull-right", onClick: this.props.onRemove, title: "Click to remove"}, "×")
+        )
+      )
+    );
+  }
+});

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

@@ -0,0 +1,106 @@
+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 };
+    });
+    return {files: files};
+  },
+
+  onRemove: function(uid, e) {
+    delete this.state.files[uid];
+    this.setState(this.state);
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  onChange: function() {
+    var file_element = this.getDOMNode().firstChild;
+    // user cancelled file chooser dialog. ignore
+    if (file_element.files.length == 0) return;
+    this.state.files = {};
+    this.setState(this.state);
+    // upload the file via CORS
+    var that = this;
+    new CORSUpload({
+      file_element: file_element, onComplete: this.setFileValue, onProgress: this.setFileValue,
+      onError: function(uid, status) { 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
+    file_element.value = '';
+  },
+
+  setFileValue: function(key, value) {
+    this.state.files[key] = value;
+    this.setState(this.state);
+  },
+
+  render: function() {
+    var that = this;
+    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('/');
+      }
+      previews.push(
+        <div className="thumbnail">
+          <input type="hidden" name={that.props.name} value={result.path} readOnly="true" />
+          <AttacheFilePreview {...result} key={key} onRemove={that.onRemove.bind(that, key)}/>
+        </div>
+      );
+    });
+    return (
+      <label htmlFor={this.props.id} className="attache-file-selector">
+        <input type="file" {...this.props} onChange={this.onChange}/>
+        {previews}
+      </label>
+    );
+  }
+});
+
+var AttacheFilePreview = React.createClass({
+
+  getInitialState: function() {
+    return { srcWas: '' };
+  },
+
+  removeProgressBar: function() {
+    this.setState({ srcWas: this.props.src });
+  },
+
+  render: function() {
+    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 img       = (this.props.src ? (<img src={this.props.src} onLoad={this.removeProgressBar} />) : '');
+    var pctStyle  = { width: pctString, minWidth: '3em' };
+    var cptStyle  = { textOverflow: "ellipsis" };
+    var caption   = <div className="pull-left" style={cptStyle}>{this.props.filename || this.props.path && this.props.path.split('/').pop()}</div>;
+
+    if (this.state.srcWas != this.props.src) {
+      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>
+      );
+    }
+
+    return (
+      <div className="attache-file-preview">
+        {progress}
+        {img}
+        <div className="clearfix">
+          {caption}
+          <a href="#remove" className="pull-right" onClick={this.props.onRemove} title="Click to remove">&times;</a>
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,85 @@
+var CORSUpload = (function() {
+  var counter = 0;
+
+  CORSUpload.prototype.onComplete = function(uid, json) { };
+  CORSUpload.prototype.onProgress = function(uid, json) { };
+  CORSUpload.prototype.onError = function(uid, status) { alert(status); };
+
+  function CORSUpload(options) {
+    if (options == null) options = {};
+    for (option in options) {
+      this[option] = options[option];
+    }
+    this.handleFileSelect(options.file_element);
+  }
+
+  CORSUpload.prototype.handleFileSelect = function(file_element) {
+    var f, files, output, _i, _len, _results, url, $ele;
+    $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')) +
+            ""
+    }
+
+    files = file_element.files;
+    output = [];
+    _results = [];
+    for (_i = 0, _len = files.length; _i < _len; _i++) {
+      f = files[_i];
+      f.uid = counter++;
+      this.onProgress(f.uid, { filename: f.name, percentLoaded: 0, bytesLoaded: 0, bytesTotal: f.size });
+      _results.push(this.performUpload(f, url));
+    }
+    return _results;
+  };
+
+  CORSUpload.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;
+  };
+
+  CORSUpload.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, { filename: file.name, percentLoaded: percentLoaded, bytesLoaded: e.loaded, bytesTotal: e.total });
+        }
+      };
+    }
+    return xhr.send(file);
+  };
+
+  return CORSUpload;
+
+})();

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

@@ -0,0 +1,23 @@
+(function() {
+  function attacheFileInputs() {
+    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', attacheFileInputs);
+})();

data/lib/attache_rails.rb

@@ -0,0 +1,43 @@
+require "attache_rails/engine"
+
+module AttacheRails
+  module ViewHelper
+    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
+end
+
+ActionView::Base.send(:include, AttacheRails::ViewHelper)

data/lib/attache_rails/engine.rb

@@ -0,0 +1,5 @@
+module AttacheRails
+  class Engine < ::Rails::Engine
+    isolate_namespace AttacheRails
+  end
+end

data/lib/attache_rails/version.rb

@@ -0,0 +1,3 @@
+module AttacheRails
+  VERSION = "0.0.4"
+end

metadata

@@ -0,0 +1,55 @@
+--- !ruby/object:Gem::Specification
+name: attache_rails
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+platform: ruby
+authors:
+- choonkeat
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-02-26 00:00:00.000000000 Z
+dependencies: []
+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/ujs.js
+- lib/attache_rails.rb
+- lib/attache_rails/engine.rb
+- lib/attache_rails/version.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.5
+signing_key: 
+specification_version: 4
+summary: Client lib to use attache server
+test_files: []