attache_rails 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 07bb6c168bed2d516774523756dd125d86ca0729
-  data.tar.gz: b788a5d74a9b1d51c7c6981a6f57d98da62ba060
+  metadata.gz: 4da5e22bb598e1b06cbb35fc8492b02f3e004978
+  data.tar.gz: 7b1d38f4fb5193ca9490ab1d4463d74938c5300d
 SHA512:
-  metadata.gz: 3c8e22d8e34a7a2464af773442eee64f857ccb274e3ea53f9f58732f422b583c2d3b0cca7b32778d5f1d1f407cd166729f68381eff3401358e296bd169d9b65d
-  data.tar.gz: 1bb4fc71ecfbfa8301ed12eba825dd541ae508b184ebdf62e2c4948033463a025711af00feccde92478e5ae69aca32cee370915dd9535c27bb85a06233546a73
+  metadata.gz: b254f432f52a43161cf4c19aed219623e795315984d2fbafa66c09169b39075300776b2a20f8c21bac0465ad130939ec6e7ab2c211e5aa9b772bc1468072b8c3
+  data.tar.gz: ed680e0629577892f63c29e103743ba1383e61e6d33427420352f07605e4b8a0425b871c85f36a9210e5cb763dac8925ab1f7e5ff544724fbc318fd39443b12f

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

@@ -11,8 +11,11 @@ if (typeof AttacheFilePreview === 'undefined') {
     },
 
     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);
@@ -33,7 +36,7 @@ if (typeof AttacheFilePreview === 'undefined') {
 
       // combined
       return (
-        React.createElement("div", {className: "attache-file-preview"}, 
+        React.createElement("div", {className: previewClassName}, 
           progress, 
           img, 
           React.createElement("div", {className: "clearfix"}, 

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

@@ -11,8 +11,11 @@ if (typeof AttacheFilePreview === 'undefined') {
     },
 
     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);
@@ -33,7 +36,7 @@ if (typeof AttacheFilePreview === 'undefined') {
 
       // combined
       return (
-        <div className="attache-file-preview">
+        <div className={previewClassName}>
           {progress}
           {img}
           <div className="clearfix">

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

@@ -4,17 +4,18 @@ var AttacheCORSUpload = (function() {
   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);
+    this.handleFileSelect(options.file_element, options.files);
   }
 
-  AttacheCORSUpload.prototype.handleFileSelect = function(file_element) {
-    var f, files, output, _i, _len, _results, url, $ele, prefix;
+  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')) {
@@ -26,13 +27,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];
+      this.createLocalThumbnail(f); // if any
       f.uid = prefix + (counter++);
-      this.onProgress(f.uid, { filename: f.name, percentLoaded: 0, bytesLoaded: 0, bytesTotal: f.size });
+      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;
@@ -74,7 +75,7 @@ var AttacheCORSUpload = (function() {
         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 this_s3upload.onProgress(file.uid, { src: file.src, filename: file.name, percentLoaded: percentLoaded, bytesLoaded: e.loaded, bytesTotal: e.total });
         }
       };
     }

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

@@ -21,17 +21,20 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
     this.setState(this.state);
   },
 
-  onChange: function() {
-    var file_element = this.getDOMNode().firstChild;
+  performUpload: function(file_element, files) {
     // user cancelled file chooser dialog. ignore
-    if (! file_element || file_element.files.length == 0) return;
-    if (! this.props.multiple) this.state.files = {};
+    if (! files || files.length == 0) return;
+    if (! this.props.multiple) {
+      this.state.files = {};
+      files = Array.prototype.splice.apply(files, [0, 1]); // array of 1 element
+    }
 
     this.setState(this.state);
     // upload the file via CORS
     var that = this;
     new AttacheCORSUpload({
       file_element: file_element,
+      files:        files,
       onComplete:   this.setFileValue,
       onProgress:   this.setFileValue,
       onError: function(uid, status) {
@@ -44,6 +47,31 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
     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);
@@ -58,14 +86,19 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
 
     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();
-        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: json, readOnly: "true"}), 
@@ -90,7 +123,7 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
 
     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}, 
+      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)), 

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

@@ -21,17 +21,20 @@ var AttacheFileInput = React.createClass({
     this.setState(this.state);
   },
 
-  onChange: function() {
-    var file_element = this.getDOMNode().firstChild;
+  performUpload: function(file_element, files) {
     // user cancelled file chooser dialog. ignore
-    if (! file_element || file_element.files.length == 0) return;
-    if (! this.props.multiple) this.state.files = {};
+    if (! files || files.length == 0) return;
+    if (! this.props.multiple) {
+      this.state.files = {};
+      files = Array.prototype.splice.apply(files, [0, 1]); // array of 1 element
+    }
 
     this.setState(this.state);
     // upload the file via CORS
     var that = this;
     new AttacheCORSUpload({
       file_element: file_element,
+      files:        files,
       onComplete:   this.setFileValue,
       onProgress:   this.setFileValue,
       onError: function(uid, status) {
@@ -44,6 +47,31 @@ var AttacheFileInput = React.createClass({
     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);
@@ -58,14 +86,19 @@ var AttacheFileInput = React.createClass({
 
     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();
-        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={json} readOnly="true" />
@@ -90,7 +123,7 @@ var AttacheFileInput = React.createClass({
 
     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}>
+      <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} />

data/lib/attache_rails/model.rb

@@ -92,7 +92,8 @@ module AttacheRails
         define_method "#{name}_attributes", -> (geometry) {               str = self.send(name); Utils.attache_url_for(str, geometry) if str; }
         define_method "#{name}=",           -> (value)    {
           new_value = (value.respond_to?(:read) ? Utils.attache_upload_and_get_json(value) : value)
-          super(Utils.array(new_value).first)
+          okay = JSON.parse(new_value)['path'] rescue nil
+          super(Utils.array(okay ? new_value : nil).first)
         }
         define_method "#{name}_discard_was",-> do
           new_value = self.send("#{name}")
@@ -121,7 +122,11 @@ module AttacheRails
           end
         }
         define_method "#{name}=",           -> (array)    {
-          new_value = Utils.array(array).collect {|value| value.respond_to?(:read) ? Utils.attache_upload_and_get_json(value) : value }
+          new_value = Utils.array(array).inject([]) {|sum,value|
+            hash = value.respond_to?(:read) ? Utils.attache_upload_and_get_json(value) : value
+            okay = JSON.parse(hash)['path'] rescue nil
+            okay ? sum + [hash] : sum
+          }
           super(Utils.array new_value)
         }
         define_method "#{name}_discard_was",-> do

data/lib/attache_rails/version.rb

@@ -1,3 +1,3 @@
 module AttacheRails
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: attache_rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - choonkeat
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-04-04 00:00:00.000000000 Z
+date: 2015-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails