tessa 2.0 → 6.0.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d98c3c1a4dd8795f5631bee2260de0c0794f4eded2c71c6cf4bfaee23dc518e
-  data.tar.gz: 42c2a4748df92707676e06ecbb965e5245444bf343e468a5db60ea55a6b89337
+  metadata.gz: 20d746d445cccc01d998f1d8bead8b92b8e0083e1858cd40ed2151785c1f4830
+  data.tar.gz: aa0432076ee14f238af2bf5cffdc83a0f37055246a1524ae2a05cb48e5bb3ed4
 SHA512:
-  metadata.gz: bd8d14042de56677d144e26ff425551d5e7a68e95d331406e1556fbb34ec43f305203e139150fa05647091caaabe38c4d2df5cf29889d783665a8806a15e9ef8
-  data.tar.gz: d25ed80bf643b5ff4a126d67094b0ba66caf4f643f90efdfd4acec0dbbbf555bf1f60609bc51bc6bdb633cf5fb86feac3cde3d1cfb26adc4e75856cf76c55103
+  metadata.gz: 386f143532a9e1a17b7149488d6d50d2affa444a3fc029653c5dca2218eef980df1963982cc64020b7aca85c7fbd7063e19a23fa0355cdebc4a0881230715585
+  data.tar.gz: f504a6ae2e98ee85478bb5d89ddb950533c80aa5a881f7accb336dfd36049eea8b1336c5a9f602ff6b51a4085826d76104475e3af9fdb8e17fdb0b7160a177f6

data/README.md

@@ -23,6 +23,12 @@ When that migration is completed, v2.x of this gem will remove all code that acc
 will transition to being simply a convenience wrapper around ActiveStorage, so that we don't have to re-write as much
 of our code in our frontend apps.
 
+v6.x of this gem is compatible with ActiveStorage v6 and above.  Since v6, ActiveStorage now does everything that this
+gem used to do, with the exception of Dropzone integration.  Therefore, tessa-client v6 only contains the following
+two modules:
+1. A set of Javascript utilities to integrate Dropzone.js with ActiveStorage direct uploads
+2. A SimpleForm helper to write out the hidden input fields for an ActiveStorage `has_one_attached`.
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -61,17 +67,7 @@ from the user's browser.
 
 To get all this working, follow these steps:
 
-1. Mount the engine
-in your `config/routes.rb`, `mount Tessa::Engine, at: '/'`.  It's important that it is mounted at root.
-
-You can use Authentication around the engine to prevent unauthorized uploads.  With devise it's as simple as:
-```rb
-  authenticated :user do
-    mount Tessa::Engine, at: '/'
-  end
-```
-
-2. In your application.js, require the js libraries:
+1. In your application.js, require the js libraries:
 ```js
 //= require dropzone
 //= require tessa
@@ -79,17 +75,14 @@ You can use Authentication around the engine to prevent unauthorized uploads.  W
 Note that this only works if you are using Sprockets.
 If you are using another bundler, we don't support that yet.
 
-3. In your model, use the Tessa `asset` declaration instead of `has_one_attached`.  The SimpleForm helper only works
-     with Tessa `asset` declarations so far.
+2. use ActiveStorage to add an attached asset
 
 ```rb
 class Model < ApplicationRecord
-    include Tessa::Model 
-
-  asset :image # Note: this essentially delegates to has_one_attached
+  has_one_attached :image
 ```
 
-4. When rendering your form, use the SimpleForm helper to render the dropzone div:
+3. When rendering your form, use the SimpleForm helper to render the dropzone div:
 
 ```erb
 <%= f.input :image,
@@ -98,7 +91,7 @@ class Model < ApplicationRecord
     hint: "Use an image that is 1440 x 288 in size (5:1 aspect ratio)" %>
 ```
 
-5. Configure your ActiveStorage service to accept direct uploads.
+4. Configure your ActiveStorage service to accept direct uploads.
     The disk service does this automatically.  The S3 service requires additional CORS configuration.
 
 ## Contributing

data/app/assets/javascripts/tessa.esm.js

@@ -1,3 +1,34 @@
+var extendStatics = function(d, b) {
+  extendStatics = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function(d, b) {
+    d.__proto__ = b;
+  } || function(d, b) {
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+  };
+  return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+  function __() {
+    this.constructor = d;
+  }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __);
+}
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
 var sparkMd5 = {
   exports: {}
 };
@@ -410,261 +441,269 @@ var sparkMd5 = {
   }));
 })(sparkMd5);
 
-var SparkMD5 = sparkMd5.exports;
+var fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
 
-const fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
-
-class FileChecksum {
-  static create(file, callback) {
-    const instance = new FileChecksum(file);
-    instance.create(callback);
-  }
-  constructor(file) {
+var FileChecksum = function() {
+  function FileChecksum(file) {
     this.file = file;
     this.chunkSize = 2097152;
     this.chunkCount = Math.ceil(this.file.size / this.chunkSize);
     this.chunkIndex = 0;
   }
-  create(callback) {
+  FileChecksum.create = function(file, callback) {
+    var instance = new FileChecksum(file);
+    instance.create(callback);
+  };
+  FileChecksum.prototype.create = function(callback) {
+    var _this = this;
     this.callback = callback;
-    this.md5Buffer = new SparkMD5.ArrayBuffer;
+    this.md5Buffer = new sparkMd5.exports.ArrayBuffer;
     this.fileReader = new FileReader;
-    this.fileReader.addEventListener("load", (event => this.fileReaderDidLoad(event)));
-    this.fileReader.addEventListener("error", (event => this.fileReaderDidError(event)));
+    this.fileReader.addEventListener("load", (function(event) {
+      return _this.fileReaderDidLoad(event);
+    }));
+    this.fileReader.addEventListener("error", (function(event) {
+      return _this.fileReaderDidError(event);
+    }));
     this.readNextChunk();
-  }
-  fileReaderDidLoad(event) {
+  };
+  FileChecksum.prototype.fileReaderDidLoad = function(event) {
+    var _a;
+    if (!this.md5Buffer || !this.fileReader) {
+      throw new Error("FileChecksum: fileReaderDidLoad called before create");
+    }
+    if (!((_a = event.target) === null || _a === void 0 ? void 0 : _a.result)) {
+      return;
+    }
     this.md5Buffer.append(event.target.result);
     if (!this.readNextChunk()) {
-      const binaryDigest = this.md5Buffer.end(true);
-      const base64digest = btoa(binaryDigest);
-      this.callback(null, base64digest);
+      var binaryDigest = this.md5Buffer.end(true);
+      var base64digest = btoa(binaryDigest);
+      if (this.callback) {
+        this.callback(null, base64digest);
+      }
+    }
+  };
+  FileChecksum.prototype.fileReaderDidError = function(event) {
+    if (this.callback) {
+      this.callback("Error reading ".concat(this.file.name));
+    }
+  };
+  FileChecksum.prototype.readNextChunk = function() {
+    if (!this.fileReader) {
+      throw new Error("FileChecksum: readNextChunk called before create");
     }
-  }
-  fileReaderDidError(event) {
-    this.callback(`Error reading ${this.file.name}`);
-  }
-  readNextChunk() {
     if (this.chunkIndex < this.chunkCount || this.chunkIndex == 0 && this.chunkCount == 0) {
-      const start = this.chunkIndex * this.chunkSize;
-      const end = Math.min(start + this.chunkSize, this.file.size);
-      const bytes = fileSlice.call(this.file, start, end);
+      var start = this.chunkIndex * this.chunkSize;
+      var end = Math.min(start + this.chunkSize, this.file.size);
+      var bytes = fileSlice.call(this.file, start, end);
       this.fileReader.readAsArrayBuffer(bytes);
       this.chunkIndex++;
       return true;
     } else {
       return false;
     }
-  }
-}
-
-var $;
+  };
+  return FileChecksum;
+}();
 
 window.WCC || (window.WCC = {});
 
-$ = window.jQuery;
+var $ = window.jQuery;
 
-Dropzone.autoDiscover = false;
+window.Dropzone.autoDiscover = false;
 
-window.WCC.Dropzone = class Dropzone extends window.Dropzone {
-  uploadFile(file) {
-    var handleError, headerName, headerValue, headers, progressObj, ref, response, updateProgress, xhr;
-    xhr = new XMLHttpRequest;
+var BaseDropzone = window.Dropzone;
+
+var WCCDropzone = function(_super) {
+  __extends(WCCDropzone, _super);
+  function WCCDropzone() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  WCCDropzone.prototype.uploadFile = function(file) {
+    var _this = this;
+    var _a;
+    var xhr = new XMLHttpRequest;
     file.xhr = xhr;
     xhr.open(file.uploadMethod, file.uploadURL, true);
-    response = null;
-    handleError = () => this._errorProcessing([ file ], response || this.options.dictResponseError.replace("{{statusCode}}", xhr.status), xhr);
-    updateProgress = e => {
-      var allFilesFinished, progress;
-      if (e != null) {
+    var response = null;
+    var handleError = function() {
+      var _a;
+      _this._errorProcessing([ file ], response || ((_a = _this.options.dictResponseError) === null || _a === void 0 ? void 0 : _a.replace("{{statusCode}}", xhr.status.toString())), xhr);
+    };
+    var updateProgress = function(e) {
+      var _a;
+      var progress;
+      if (e) {
         progress = 100 * e.loaded / e.total;
-        file.upload = {
+        file.upload = __assign(__assign({}, file.upload), {
           progress: progress,
           total: e.total,
           bytesSent: e.loaded
-        };
+        });
       } else {
-        allFilesFinished = true;
         progress = 100;
-        if (!(file.upload.progress === 100 && file.upload.bytesSent === file.upload.total)) {
-          allFilesFinished = false;
+        var allFilesFinished = false;
+        if (file.upload.progress == 100 && file.upload.bytesSent == file.upload.total) {
+          allFilesFinished = true;
         }
         file.upload.progress = progress;
-        file.upload.bytesSent = file.upload.total;
+        file.upload.bytesSent = (_a = file.upload) === null || _a === void 0 ? void 0 : _a.total;
         if (allFilesFinished) {
           return;
         }
       }
-      return this.emit("uploadprogress", file, progress, file.upload.bytesSent);
+      _this.emit("uploadprogress", file, progress, file.upload.bytesSent);
     };
-    xhr.onload = e => {
-      var ref;
-      if (file.status === WCC.Dropzone.CANCELED) {
+    xhr.onload = function(e) {
+      if (file.status == WCCDropzone.CANCELED) {
         return;
       }
-      if (xhr.readyState !== 4) {
+      if (xhr.readyState != 4) {
         return;
       }
       response = xhr.responseText;
-      if (xhr.getResponseHeader("content-type") && ~xhr.getResponseHeader("content-type").indexOf("application/json")) {
+      if (xhr.getResponseHeader("content-type") && xhr.getResponseHeader("content-type").indexOf("application/json") >= 0) {
         try {
           response = JSON.parse(response);
-        } catch (error1) {
-          e = error1;
+        } catch (e) {
           response = "Invalid JSON response from server.";
         }
       }
       updateProgress();
-      if (!(200 <= (ref = xhr.status) && ref < 300)) {
-        return handleError();
-      } else {
-        return this._finished([ file ], response, e);
+      if (xhr.status < 200 || xhr.status >= 300) handleError(); else {
+        _this._finished([ file ], response, e);
       }
     };
-    xhr.onerror = () => {
-      if (file.status === WCC.Dropzone.CANCELED) {
+    xhr.onerror = function() {
+      if (file.status == WCCDropzone.CANCELED) {
         return;
       }
-      return handleError();
+      handleError();
     };
-    progressObj = (ref = xhr.upload) != null ? ref : xhr;
+    var progressObj = (_a = xhr.upload) !== null && _a !== void 0 ? _a : xhr;
     progressObj.onprogress = updateProgress;
-    headers = {
+    var headers = {
       Accept: "application/json",
       "Cache-Control": "no-cache",
       "X-Requested-With": "XMLHttpRequest"
     };
     if (this.options.headers) {
-      $.extend(headers, this.options.headers);
+      Object.assign(headers, this.options.headers);
     }
     if (file.uploadHeaders) {
-      $.extend(headers, file.uploadHeaders);
+      Object.assign(headers, file.uploadHeaders);
     }
-    for (headerName in headers) {
-      headerValue = headers[headerName];
+    for (var _i = 0, _b = Object.entries(headers); _i < _b.length; _i++) {
+      var _c = _b[_i], headerName = _c[0], headerValue = _c[1];
       xhr.setRequestHeader(headerName, headerValue);
     }
     this.emit("sending", file, xhr);
-    return xhr.send(file);
-  }
-  uploadFiles(files) {
-    var file, l, len, results;
-    results = [];
-    for (l = 0, len = files.length; l < len; l++) {
-      file = files[l];
-      results.push(this.uploadFile(file));
+    xhr.send(file);
+  };
+  WCCDropzone.prototype.uploadFiles = function(files) {
+    for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {
+      var file = files_1[_i];
+      this.uploadFile(file);
     }
-    return results;
-  }
-};
-
-WCC.Dropzone.uploadPendingWarning = "File uploads have not yet completed. If you submit the form now they will not be saved. Are you sure you want to continue?";
-
-WCC.Dropzone.prototype.defaultOptions.url = "UNUSED";
+  };
+  return WCCDropzone;
+}(BaseDropzone);
 
-WCC.Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files or click to upload.";
+var uploadPendingWarning = "File uploads have not yet completed. If you submit the form now they will not be saved. Are you sure you want to continue?";
 
-WCC.Dropzone.prototype.defaultOptions.accept = function(file, done) {
-  var dz, postData, tessaParams;
-  dz = $(file._removeLink).closest(".tessa-upload").first();
-  tessaParams = dz.data("tessa-params") || {};
-  postData = {
-    name: file.name,
-    size: file.size,
-    mime_type: file.type
-  };
-  postData = $.extend(postData, tessaParams);
-  return FileChecksum.create(file, (function(error, checksum) {
-    if (error) {
-      return done(error);
+function tessaInit() {
+  $(".tessa-upload").each((function(i, item) {
+    var $item = $(item);
+    var directUploadURL = $item.data("direct-upload-url") || "/rails/active_storage/direct_uploads";
+    var options = __assign({
+      maxFiles: 1,
+      addRemoveLinks: true,
+      url: "UNUSED",
+      dictDefaultMessage: "Drop files or click to upload.",
+      accept: createAcceptFn({
+        directUploadURL: directUploadURL
+      })
+    }, $item.data("dropzone-options"));
+    if ($item.hasClass("multiple")) {
+      options.maxFiles = undefined;
     }
-    postData["checksum"] = checksum;
-    return $.ajax("/tessa/uploads", {
-      type: "POST",
-      data: postData,
-      success: function(response) {
-        file.uploadURL = response.upload_url;
-        file.uploadMethod = response.upload_method;
-        file.uploadHeaders = response.upload_headers;
-        file.assetID = response.asset_id;
-        return done();
-      },
-      error: function(response) {
-        return done("Failed to initiate the upload process!");
-      }
-    });
+    var dropzone = new WCCDropzone(item, options);
+    $item.find('input[type="hidden"]').each((function(i, input) {
+      var _a, _b;
+      var $input = $(input);
+      var mockFile = $input.data("meta");
+      if (!mockFile) {
+        return;
+      }
+      mockFile.accepted = true;
+      (_a = dropzone.options.addedfile) === null || _a === void 0 ? void 0 : _a.call(dropzone, mockFile);
+      (_b = dropzone.options.thumbnail) === null || _b === void 0 ? void 0 : _b.call(dropzone, mockFile, mockFile.url);
+      dropzone.emit("complete", mockFile);
+      dropzone.files.push(mockFile);
+    }));
+    var inputName = $item.data("input-name") || $item.find('input[type="hidden"]').attr("name");
+    dropzone.on("success", (function(file) {
+      $('input[name="'.concat(inputName, '"]')).val(file.signedID);
+    }));
+    dropzone.on("removedfile", (function(file) {
+      $item.find('input[name="'.concat(inputName, '"]')).val("");
+    }));
   }));
-};
-
-window.WCC.tessaInit = function(sel) {
-  sel = sel || "form:has(.tessa-upload)";
-  $(sel).each((function(i, form) {
-    var $form;
-    $form = $(form);
-    return $form.bind("submit", (function(event) {
-      var safeToSubmit;
-      safeToSubmit = true;
+  $("form:has(.tessa-upload)").each((function(i, form) {
+    var $form = $(form);
+    $form.on("submit", (function(event) {
+      var safeToSubmit = true;
       $form.find(".tessa-upload").each((function(j, dropzoneElement) {
-        return $(dropzoneElement.dropzone.files).each((function(k, file) {
-          if (file.status != null && file.status !== WCC.Dropzone.SUCCESS) {
-            return safeToSubmit = false;
+        dropzoneElement.dropzone.files.forEach((function(file) {
+          if (file.status && file.status != WCCDropzone.SUCCESS) {
+            safeToSubmit = false;
           }
         }));
       }));
-      if (!safeToSubmit && !confirm(WCC.Dropzone.uploadPendingWarning)) {
+      if (!safeToSubmit && !confirm(uploadPendingWarning)) {
         return false;
       }
     }));
   }));
-  return $(".tessa-upload", sel).each((function(i, item) {
-    var $item, args, dropzone, inputPrefix, updateAction;
-    $item = $(item);
-    args = {
-      maxFiles: 1,
-      addRemoveLinks: true
+}
+
+function createAcceptFn(_a) {
+  var directUploadURL = _a.directUploadURL;
+  return function(file, done) {
+    var postData = {
+      blob: {
+        filename: file.name,
+        byte_size: file.size,
+        content_type: file.type,
+        checksum: ""
+      }
     };
-    $.extend(args, $item.data("dropzone-options"));
-    if ($item.hasClass("multiple")) {
-      args.maxFiles = null;
-    }
-    inputPrefix = $item.data("asset-field-prefix");
-    dropzone = new WCC.Dropzone(item, args);
-    $item.find('input[type="hidden"]').each((function(j, input) {
-      var $input, mockFile;
-      $input = $(input);
-      mockFile = $input.data("meta");
-      mockFile.accepted = true;
-      dropzone.options.addedfile.call(dropzone, mockFile);
-      dropzone.options.thumbnail.call(dropzone, mockFile, mockFile.url);
-      dropzone.emit("complete", mockFile);
-      return dropzone.files.push(mockFile);
-    }));
-    updateAction = function(file) {
-      var actionInput, inputID;
-      if (file.assetID == null) {
-        return;
+    FileChecksum.create(file, (function(error, checksum) {
+      if (error) {
+        return done(error);
       }
-      inputID = `#tessa_asset_action_${file.assetID}`;
-      actionInput = $(inputID);
-      if (!actionInput.length) {
-        actionInput = $('<input type="hidden">').attr({
-          id: inputID,
-          name: `${inputPrefix}[${file.assetID}][action]`
-        }).appendTo(item);
+      if (!checksum) {
+        return done("Failed to generate checksum for file '".concat(file.name, "'"));
       }
-      return actionInput.val(file.action);
-    };
-    dropzone.on("success", (function(file) {
-      file.action = "add";
-      return updateAction(file);
-    }));
-    return dropzone.on("removedfile", (function(file) {
-      file.action = "remove";
-      return updateAction(file);
+      postData.blob["checksum"] = checksum;
+      $.ajax(directUploadURL, {
+        type: "POST",
+        data: postData,
+        success: function(response) {
+          file.uploadURL = response.direct_upload.url;
+          file.uploadMethod = "PUT";
+          file.uploadHeaders = response.direct_upload.headers;
+          file.signedID = response.signed_id;
+          done();
+        },
+        error: function(response) {
+          console.error(response);
+          done("Failed to initiate the upload process!");
+        }
+      });
     }));
-  }));
-};
+  };
+}
 
-$((function() {
-  return window.WCC.tessaInit();
-}));
+$(tessaInit);