attache_rails 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1fa11ba11f4fc5b00b924fd2491a67aa27a94a8
-  data.tar.gz: 9f2648a031e25cfd750d6c8d22f1b3f49ad931bd
+  metadata.gz: edd291b58ed01055cda499254592cfd028ed2cde
+  data.tar.gz: e8c95574587c899c798cb3fe550523a86222ffa7
 SHA512:
-  metadata.gz: bbbea818903c87c0a1bcbbab938df1cd424326cabfeeda4529ab5b14d0e8c5aaa83acac38084974db12cea1b6071c6523ab9bca8c027495a94509ff5541963df
-  data.tar.gz: fc14a4292d0ebebb5f878c484c33bee445ea3b9dc31849ee4b41a17bdc2de8713e5669c24bdfdcd36555743134aa9fdbb1d165f348b5b12a0b10ed9ad252aa91
+  metadata.gz: c6b5fa2be93e5a90b22bd39e58330eeaf663733af892a0c98ddd7c76fa2500ba8d3b6805b10a33dd1ffaddaf1f7c4b81654991845991b5e151f14e6f5b31a937
+  data.tar.gz: 9889e52f28712d7c5a10a50933ec7d637cb45a111b51fbcd92620989dfe883e88a71d1a464910b67a4068be658dcbe63b765ab8feabb6393035993ad02e6f942

data/README.md

@@ -2,7 +2,7 @@
 
 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`
+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
 
@@ -32,10 +32,19 @@ Or you can include the various scripts yourself
 
 ``` javascript
 //= require attache/cors_upload
+//= require attache/file_input
 //= require attache/bootstrap3
 //= require attache/ujs
 ```
 
+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
+```
+
+
 ## Usage
 
 ### Database
@@ -138,7 +147,6 @@ Alternatively, you can get the list of urls and manipulate it however you want
 * 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/app/assets/javascripts/attache/bootstrap3.js

@@ -1,106 +1,48 @@
-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('/');
+if (typeof AttacheFilePreview === 'undefined') {
+
+  var AttacheFilePreview = React.createClass({displayName: "AttacheFilePreview",
+
+    getInitialState: function() {
+      return { srcWas: '' };
+    },
+
+    onSrcLoaded: function() {
+      this.setState({ srcWas: this.props.src });
+    },
+
+    render: function() {
+      // progressbar
+      if (this.state.srcWas != this.props.src) {
+        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
+            )
+          )
+        );
       }
-      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());
+      // img tag
+      if (this.props.src) {
+        var img = React.createElement("img", {src: this.props.src, onLoad: this.onSrcLoaded});
+      }
 
-    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
+      // combined
+      return (
+        React.createElement("div", {className: "attache-file-preview"}, 
+          progress, 
+          img, 
+          React.createElement("div", {className: "clearfix"}, 
+            React.createElement("div", {className: "pull-left", style: "textOverflow: 'ellipsis;'"}, this.props.filename), 
+            React.createElement("a", {href: "#remove", className: "pull-right", onClick: this.props.onRemove, title: "Click to remove"}, "×")
           )
         )
       );
     }
+  });
 
-    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

@@ -1,106 +1,48 @@
-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('/');
+if (typeof AttacheFilePreview === 'undefined') {
+
+  var AttacheFilePreview = React.createClass({
+
+    getInitialState: function() {
+      return { srcWas: '' };
+    },
+
+    onSrcLoaded: function() {
+      this.setState({ srcWas: this.props.src });
+    },
+
+    render: function() {
+      // progressbar
+      if (this.state.srcWas != this.props.src) {
+        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>
+        );
       }
-      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>;
+      // img tag
+      if (this.props.src) {
+        var img = <img src={this.props.src} onLoad={this.onSrcLoaded} />;
+      }
 
-    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}
+      // combined
+      return (
+        <div className="attache-file-preview">
+          {progress}
+          {img}
+          <div className="clearfix">
+            <div className="pull-left" style="textOverflow: 'ellipsis;'">{this.props.filename}</div>
+            <a href="#remove" className="pull-right" onClick={this.props.onRemove} title="Click to remove">&times;</a>
           </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

@@ -1,11 +1,11 @@
-var CORSUpload = (function() {
+var AttacheCORSUpload = (function() {
   var counter = 0;
 
-  CORSUpload.prototype.onComplete = function(uid, json) { };
-  CORSUpload.prototype.onProgress = function(uid, json) { };
-  CORSUpload.prototype.onError = function(uid, status) { alert(status); };
+  AttacheCORSUpload.prototype.onComplete = function(uid, json) { };
+  AttacheCORSUpload.prototype.onProgress = function(uid, json) { };
+  AttacheCORSUpload.prototype.onError = function(uid, status) { alert(status); };
 
-  function CORSUpload(options) {
+  function AttacheCORSUpload(options) {
     if (options == null) options = {};
     for (option in options) {
       this[option] = options[option];
@@ -13,7 +13,7 @@ var CORSUpload = (function() {
     this.handleFileSelect(options.file_element);
   }
 
-  CORSUpload.prototype.handleFileSelect = function(file_element) {
+  AttacheCORSUpload.prototype.handleFileSelect = function(file_element) {
     var f, files, output, _i, _len, _results, url, $ele;
     $ele = $(file_element);
     url = $ele.data('uploadurl');
@@ -37,7 +37,7 @@ var CORSUpload = (function() {
     return _results;
   };
 
-  CORSUpload.prototype.createCORSRequest = function(method, url) {
+  AttacheCORSUpload.prototype.createCORSRequest = function(method, url) {
     var xhr;
     xhr = new XMLHttpRequest();
     if (xhr.withCredentials != null) {
@@ -51,7 +51,7 @@ var CORSUpload = (function() {
     return xhr;
   };
 
-  CORSUpload.prototype.performUpload = function(file, url) {
+  AttacheCORSUpload.prototype.performUpload = function(file, url) {
     var this_s3upload, xhr;
     this_s3upload = this;
     url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'file=' + encodeURIComponent(file.name);
@@ -80,6 +80,6 @@ var CORSUpload = (function() {
     return xhr.send(file);
   };
 
-  return CORSUpload;
+  return AttacheCORSUpload;
 
 })();

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

@@ -0,0 +1,71 @@
+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 AttacheCORSUpload({
+      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
+    // so the actual file input is neutered
+    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('/');
+        result.filename = result.src.split('/').pop().split(/[#?]/).shift();
+      }
+      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)}))
+        )
+      );
+    });
+    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
+      )
+    );
+  }
+});

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

@@ -0,0 +1,71 @@
+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 AttacheCORSUpload({
+      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
+    // so the actual file input is neutered
+    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('/');
+        result.filename = result.src.split('/').pop().split(/[#?]/).shift();
+      }
+      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)}/>
+        </div>
+      );
+    });
+    return (
+      <label htmlFor={this.props.id} className="attache-file-selector">
+        <input type="file" {...this.props} onChange={this.onChange}/>
+        {previews}
+      </label>
+    );
+  }
+});

data/app/assets/javascripts/attache.js

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

data/lib/attache_rails/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: attache_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - choonkeat
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-26 00:00:00.000000000 Z
+date: 2015-03-01 00:00:00.000000000 Z
 dependencies: []
 description: 
 email:
@@ -24,6 +24,8 @@ files:
 - 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