attache_client 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: abdd59a8e946383476ec8c58434d94d6ce7bf6e7
-  data.tar.gz: 6000e846b291c03ac6e342a07542c3c5f576d48f
+  metadata.gz: 85797f28c584f9b228fa2109cd30bd897f1fb722
+  data.tar.gz: 9d8bcc930c642e7b53ff2103bd847b7d6e3590fd
 SHA512:
-  metadata.gz: dc24bb5c8b9258028c6c26f9a8f0c784a53df709db4d4f18160222bf6d9f1335eaa4b489673384a7b4d7cb79e6279bbf2f049fc0b891c8e4b5b675ef043ceaa6
-  data.tar.gz: 965fa0058c8317449d2c4681dc382a07758c62423a7797982079d2fad88b371f7ee90d54af048ca035ca48e1cb48402c866cd47e9efdc9691b71cc0bf2ff57fc
+  metadata.gz: b62f1989a4eac6e82ca9b155694535f73c6eb88f6a9f4f3bc70898ab4172dbb3504f94806912a9b15c49b573d143d01012b5c7443e8b1415af3be06c753c3474
+  data.tar.gz: 7d5f934642057ba36dd4ce6c9a79d29fc8899d03e156805012885652f1e487e4a9e9ff69b7b21cac4c1ab3034ba0ee953530523d75c5641a3c4d670219af54f1

data/README.md

@@ -2,6 +2,8 @@
 
 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
@@ -123,6 +125,20 @@ Alternatively, you can get the list of urls and manipulate it however you want
 = 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/app/assets/javascripts/attache/bootstrap3.js

@@ -23,9 +23,10 @@ var AttacheFileInput = React.createClass({displayName: "AttacheFileInput",
     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) { alert(status); }
+      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 = '';
@@ -73,13 +74,13 @@ var AttacheFilePreview = React.createClass({displayName: "AttacheFilePreview",
   },
 
   render: function() {
-    var className = "progress-bar progress-bar-striped active" + (this.props.src ? " progress-bar-success" : "");
-    var pctString = (this.props.src ? 100 : this.props.percentLoaded) + "%";
-    var pctDesc   = (this.props.src ? 'Loading...' : pctString);
+    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.split('/').pop());
+    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 = (

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

@@ -23,9 +23,10 @@ var AttacheFileInput = React.createClass({
     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) { alert(status); }
+      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 = '';
@@ -73,13 +74,13 @@ var AttacheFilePreview = React.createClass({
   },
 
   render: function() {
-    var className = "progress-bar progress-bar-striped active" + (this.props.src ? " progress-bar-success" : "");
-    var pctString = (this.props.src ? 100 : this.props.percentLoaded) + "%";
-    var pctDesc   = (this.props.src ? 'Loading...' : pctString);
+    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.split('/').pop()}</div>;
+    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 = (

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

@@ -14,8 +14,17 @@ var CORSUpload = (function() {
   }
 
   CORSUpload.prototype.handleFileSelect = function(file_element) {
-    var f, files, output, _i, _len, _results, url;
-    url = $(file_element).data('uploadurl');
+    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 = [];
@@ -45,7 +54,8 @@ var CORSUpload = (function() {
   CORSUpload.prototype.performUpload = function(file, url) {
     var this_s3upload, xhr;
     this_s3upload = this;
-    xhr = this.createCORSRequest('PUT', url + (url.indexOf('?') == -1 ? '?' : '&') + 'file=' + encodeURIComponent(file.name));
+    url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'file=' + encodeURIComponent(file.name);
+    xhr = this.createCORSRequest('PUT', url);
     if (!xhr) {
       this.onError(file.uid, 'CORS not supported');
     } else {
@@ -53,11 +63,11 @@ var CORSUpload = (function() {
         if (xhr.status === 200) {
           this_s3upload.onComplete(file.uid, JSON.parse(e.target.responseText));
         } else {
-          return this_s3upload.onError(file.uid, 'Upload error: ' + xhr.status);
+          return this_s3upload.onError(file.uid, xhr.status + ' ' + xhr.statusText);
         }
       };
       xhr.onerror = function() {
-        return this_s3upload.onError(file.uid, 'XHR error.');
+        return this_s3upload.onError(file.uid, 'Unable to reach server');
       };
       xhr.upload.onprogress = function(e) {
         var percentLoaded;

data/lib/attache_client.rb

@@ -4,6 +4,7 @@ module AttacheClient
   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]
@@ -17,6 +18,15 @@ module AttacheClient
     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: {
@@ -24,7 +34,7 @@ module AttacheClient
           value: [*current_value],
           uploadurl: ATTACHE_UPLOAD_URL,
           downloadurl: ATTACHE_DOWNLOAD_URL,
-        },
+        }.merge(auth),
       }
     end
   end

data/lib/attache_client/version.rb

@@ -1,3 +1,3 @@
 module AttacheClient
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: attache_client
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - choonkeat
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-21 00:00:00.000000000 Z
+date: 2015-02-22 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: