uploads: move dropzone code to uploads.js.

app/javascript/packs/application.js

@@ -1,5 +1,4 @@
 /* eslint no-console:0 */
-/* global require */
 
 function importAll(r) {
   r.keys().forEach(r);
@@ -7,8 +6,6 @@ function importAll(r) {
 
 require('jquery-ujs');
 require('hammerjs');
-require('dropzone');
-require('spark-md5');
 require('stupid-table-plugin');
 require('jquery-hotkeys');
 
@@ -41,8 +38,6 @@ export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';
 export { default as PostTooltip } from '../src/javascripts/post_tooltips.js';
 export { default as RelatedTag } from '../src/javascripts/related_tag.js';
 export { default as Shortcuts } from '../src/javascripts/shortcuts.js';
-export { default as Upload } from '../src/javascripts/uploads.js';
+export { default as Upload } from '../src/javascripts/uploads.js.erb';
 export { default as Utility } from '../src/javascripts/utility.js';
 export { default as Ugoira } from '../src/javascripts/ugoira.js';
-export { default as Dropzone } from 'dropzone';
-export { default as SparkMD5 } from 'spark-md5';

app/javascript/src/javascripts/related_tag.js

@@ -1,4 +1,4 @@
-import Uploads from './uploads';
+import Uploads from './uploads.js.erb';
 import Utility from './utility';
 import Post from './posts.js.erb';
 

app/javascript/src/javascripts/uploads.js.erb

@@ -1,7 +1,11 @@
 import Post from './posts.js.erb'
+import Dropzone from 'dropzone';
+import SparkMD5 from 'spark-md5';
 
 let Upload = {};
 
+Upload.MAX_FILE_SIZE = <%= Danbooru.config.max_file_size.to_json %> / (1024 * 1024);
+
 Upload.initialize_all = function() {
   if ($("#c-uploads,#c-posts").length) {
     this.initialize_enter_on_tags();
@@ -29,6 +33,10 @@ Upload.initialize_all = function() {
     });
   }
 
+  if ($("#c-uploads #a-new").length) {
+    this.initialize_dropzone();
+  }
+
   if ($("#iqdb-similar").length) {
     this.initialize_iqdb_source();
   }
@@ -133,6 +141,57 @@ Upload.toggle_commentary = function() {
   $(".artist-commentary").slideToggle();
 };
 
+Upload.initialize_dropzone = function() {
+  if (!window.FileReader) {
+    $("#filedropzone").remove();
+    return;
+  }
+
+  let dropzone = new Dropzone("#filedropzone", {
+    paramName: "upload[file]",
+    url: "/uploads/preprocess",
+    createImageThumbnails: false,
+    addRemoveLinks: false,
+    maxFiles: 1,
+    maxFilesize: Upload.MAX_FILE_SIZE,
+    timeout: 0,
+    acceptedFiles: "image/jpeg,image/png,image/gif,video/mp4,video/webm,.swf",
+    previewTemplate: $("#dropzone-preview-template").html(),
+    init: function() {
+      $(".fallback").hide();
+      this.on("drop", function(event) {
+        $("#filedropzone .dropzone-hint").hide();
+      });
+      this.on("complete", function(file) {
+        $("#filedropzone .dz-progress").hide();
+      });
+      this.on("addedfile", function(file) {
+        // replace the previous file with the new one.
+        dropzone.files.forEach(f => {
+          if (f !== file) {
+            dropzone.removeFile(f);
+          }
+        });
+
+        let reader = new FileReader();
+        reader.addEventListener("loadend", function() {
+          let buf = new SparkMD5.ArrayBuffer();
+          buf.append(this.result);
+          let hash = buf.end();
+          $("#upload_md5_confirmation").val(hash);
+        });
+        reader.readAsArrayBuffer(file);
+      });
+      this.on("success", function(file) {
+        $("#filedropzone").addClass("success");
+      });
+      this.on("error", function(file, msg) {
+        $("#filedropzone").addClass("error");
+      });
+    }
+  });
+};
+
 $(function() {
   Upload.initialize_all();
 });

app/views/uploads/_dropzone_preview.html.erb

@@ -0,0 +1,14 @@
+<div class="dz-preview dz-file-preview">
+  <div class="dz-details">
+    <div class="dz-filename">
+      <span data-dz-name></span>
+    </div>
+    <div class="dz-size" data-dz-size></div>
+  </div>
+  <div class="dz-progress">
+    <span class="dz-upload" data-dz-uploadprogress></span>
+  </div>
+  <div class="dz-error-message">
+    <span data-dz-errormessage></span>
+  </div>
+</div>

app/views/uploads/new.html.erb

@@ -120,66 +120,8 @@
   </div>
 </div>
 
-<% content_for(:html_header) do %>
+<template id="dropzone-preview-template">
-  <script>
+  <%= render "dropzone_preview" %>
-    $(function() {
+</template>
-      var enabled = true;
-      var maxFilesize = <%= Danbooru.config.max_file_size.to_json %> / (1024 * 1024);
-
-      if (!window.FileReader) {
-        enabled = false;
-      }
-
-      if (!enabled) {
-        $("#filedropzone").remove();
-        return;
-      }
-
-      Danbooru.Upload.dropzone = new Danbooru.Dropzone("#filedropzone", {
-        paramName: "upload[file]", 
-        url: "/uploads/preprocess", 
-        createImageThumbnails: false,
-        addRemoveLinks: false,
-        maxFiles: 1,
-        maxFilesize: maxFilesize,
-        timeout: 0,
-        acceptedFiles: "image/jpeg,image/png,image/gif,video/mp4,video/webm,.swf",
-        previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>',
-        init: function() {
-          $(".fallback").hide();
-          this.on("drop", function(event) {
-            $("#filedropzone .dropzone-hint").hide();
-          });
-          this.on("complete", function(file) {
-            $("#filedropzone .dz-progress").hide();
-          });
-          this.on("addedfile", function(file) {
-            // replace the previous file with this one.
-            Danbooru.Upload.dropzone.files.forEach(f => {
-              if (f !== file) {
-                Danbooru.Upload.dropzone.removeFile(f);
-              }
-            });
-
-            var reader = new FileReader();
-            reader.addEventListener("loadend", function() {
-              var buf = new Danbooru.SparkMD5.ArrayBuffer();
-              buf.append(this.result);
-              var hash = buf.end();
-              $("#upload_md5_confirmation").val(hash);
-            });
-            reader.readAsArrayBuffer(file);
-          });
-          this.on("success", function(file) {
-            $("#filedropzone").addClass("success");
-          });
-          this.on("error", function(file, msg) {
-            $("#filedropzone").addClass("error");
-          });
-        }
-      });
-    });
-  </script>
-<% end %>
 
 <%= render "uploads/secondary_links" %>