tessa 2.0 → 6.0.0.rc2

data/app/assets/javascripts/tessa.js

@@ -2,6 +2,34 @@
   typeof define === "function" && define.amd ? define(factory) : factory();
 })((function() {
   "use strict";
+  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: {}
   };
@@ -412,249 +440,260 @@
       return SparkMD5;
     }));
   })(sparkMd5);
-  var SparkMD5 = sparkMd5.exports;
-  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 fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+  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;
-  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 $ = window.jQuery;
+  window.Dropzone.autoDiscover = false;
+  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";
-  WCC.Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files or click to upload.";
-  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);
+    return WCCDropzone;
+  }(BaseDropzone);
+  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?";
+  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);
 }));

data/app/javascript/activestorage/file_checksum.ts

@@ -0,0 +1,76 @@
+import * as SparkMD5 from "spark-md5"
+
+const fileSlice = File.prototype.slice || (File.prototype as any).mozSlice || (File.prototype as any).webkitSlice
+
+type FileChecksumCallback = (error: string | null, checksum?: string) => void
+
+export class FileChecksum {
+  static create(file: File, callback: FileChecksumCallback) {
+    const instance = new FileChecksum(file)
+    instance.create(callback)
+  }
+
+  private file: File
+  private chunkSize: number
+  private chunkCount: number
+  private chunkIndex: number
+  private md5Buffer?: SparkMD5.ArrayBuffer
+  private fileReader?: FileReader
+  private callback?: FileChecksumCallback
+
+  constructor(file: File) {
+    this.file = file
+    this.chunkSize = 2097152 // 2MB
+    this.chunkCount = Math.ceil(this.file.size / this.chunkSize)
+    this.chunkIndex = 0
+  }
+
+  create(callback: FileChecksumCallback) {
+    this.callback = callback
+    this.md5Buffer = new SparkMD5.ArrayBuffer
+    this.fileReader = new FileReader
+    this.fileReader.addEventListener("load", event => this.fileReaderDidLoad(event))
+    this.fileReader.addEventListener("error", event => this.fileReaderDidError(event))
+    this.readNextChunk()
+  }
+
+  private fileReaderDidLoad(event: ProgressEvent<FileReader>) {
+    if (!this.md5Buffer || !this.fileReader) {
+      throw new Error("FileChecksum: fileReaderDidLoad called before create")
+    }
+    if (!event.target?.result) { return }
+
+    this.md5Buffer.append(event.target.result as ArrayBuffer)
+
+    if (!this.readNextChunk()) {
+      const binaryDigest = this.md5Buffer.end(true)
+      const base64digest = btoa(binaryDigest)
+      if (this.callback) {
+        this.callback(null, base64digest)
+      }
+    }
+  }
+
+  private fileReaderDidError(event: ProgressEvent<FileReader>) {
+    if (this.callback) {
+      this.callback(`Error reading ${this.file.name}`)
+    }
+  }
+
+  private readNextChunk() {
+    if (!this.fileReader) {
+      throw new Error("FileChecksum: readNextChunk called before create")
+    }
+
+    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)
+      this.fileReader.readAsArrayBuffer(bytes)
+      this.chunkIndex++
+      return true
+    } else {
+      return false
+    }
+  }
+}