Initial commit

2020-05-31 22:38:19 +02:00
commit 858fafc3c5
1280 changed files with 65918 additions and 0 deletions
--- a/app/javascript/packs/active_storage_dropzone.js
+++ b/app/javascript/packs/active_storage_dropzone.js
@@ -0,0 +1,105 @@
+import Dropzone from "dropzone";
+import {DirectUpload} from "activestorage"
+import $ from 'jquery';
+
+class ActiveStorageDropzone {
+  constructor(dropzoneClass, uploaderClass) {
+    this.DropzoneClass = dropzoneClass || Dropzone
+    this.UploaderClass = uploaderClass || DirectUpload
+  }
+
+  init(element) {
+    var acceptedFiles = $(element).data("accepted-files") || "image/*";
+    var dictDefaultMessage = $(element).data("placeholder") || "Drop files here";
+    var submitButton = $($(element).data("submit-button"));
+    var that = this;
+
+    this.myDropzone = new this.DropzoneClass(element, {
+      url: "/",
+      autoQueue: true,
+      acceptedFiles: acceptedFiles,
+      parallelUploads: 30,
+      dictDefaultMessage: dictDefaultMessage,
+
+      init: function () {
+        this.on("sending", (file, xhr, formData) => {
+          var createUpload = (dropzone, upload) => {
+            upload.create((error, blob) => {
+              if (error) {
+                dropzone.emit("error", file, this.options.dictUploadCanceled);
+              } else {
+                const hiddenField = document.createElement('input');
+                hiddenField.setAttribute("type", "hidden");
+                hiddenField.setAttribute("value", blob.signed_id);
+                hiddenField.name = name;
+                document.querySelector('form').appendChild(hiddenField);
+                dropzone.emit("success", file);
+                dropzone.emit("complete", file);
+              }
+
+              // In either case, re-enable the provided submit button
+              if (submitButton) {
+                submitButton.prop("disabled", false);
+              }
+            });
+          }
+          // Disable any provided submit button
+          if (submitButton) {
+            submitButton.prop("disabled", true);
+          }
+
+          // Cancel the default server request
+          xhr.addEventListener("loadstart", () => {
+            xhr.abort();
+          });
+
+          // Start the direct upload
+          var input = document.getElementById(element.dataset.fileInputId);
+          var name = input.name;
+          var url = input.dataset.directUploadUrl;
+          var delegate = {
+            directUploadWillStoreFileWithXHR: (request) => {
+              request.upload.addEventListener("progress", (event) => {
+                this.emit("uploadprogress", file, 100 * (event.loaded / event.totalSize), event.loaded);
+              });
+            }
+          }
+          var upload = new that.UploaderClass(file, url, delegate);
+          createUpload(this, upload);
+        });
+      },
+    });
+
+    var addExistingFiles = (dropzone, files) => {
+      files.forEach((file, index) => {
+        var width = dropzone.options.thumbnailWidth;
+        var height = dropzone.options.thumbnailHeight;
+        var method = dropzone.options.thumbnailMethod;
+        var thumbFn = (thumbnail) => {
+          this.myDropzone.emit('thumbnail', file, thumbnail);
+        }
+
+        dropzone.emit("addedfile", file);
+        if (file.type.indexOf("image") >= 0) {
+          dropzone.createThumbnailFromUrl(file, width, height, method, true, thumbFn, "Anonymous");
+        }
+        dropzone.emit("complete", file);
+      })
+    }
+
+    // Add existing files to the dropzone
+    const existingFiles = $(element).data("existingFiles")
+    addExistingFiles(this.myDropzone, existingFiles);
+  }
+}
+
+Dropzone.autoDiscover = false;
+
+export default ActiveStorageDropzone;
+
+document.addEventListener("turbolinks:load", function () {
+  $("[data-behavior=dropzone]").each(function (index, element) {
+    const dropzone = new ActiveStorageDropzone
+    dropzone.init(element);
+  });
+});