js: migrate dropzone to yarn.

Also fixes a bug where sometimes the dropzone widget didn't work because
of late loading caused by the `<script async>` tag.

app/javascript/packs/application.js

@@ -7,6 +7,8 @@ function importAll(r) {
 
 require('jquery-ujs');
 require('hammerjs');
+require('dropzone');
+require('spark-md5');
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -43,3 +45,5 @@ export { default as Shortcuts } from '../src/javascripts/shortcuts.js';
 export { default as Upload } from '../src/javascripts/uploads.js';
 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/views/uploads/new.html.erb

@@ -124,8 +124,6 @@
 <% end %>
 
 <% content_for(:html_header) do %>
-  <script async src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
-  <script async src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
   <script>
     $(function() {
       var enabled = true;
@@ -140,7 +138,7 @@
         return;
       }
 
-      $("#filedropzone").dropzone({ 
+      Danbooru.Upload.dropzone = new Danbooru.Dropzone("#filedropzone", {
         paramName: "upload[file]", 
         url: "/uploads/preprocess", 
         createImageThumbnails: false,
@@ -161,7 +159,7 @@
           this.on("addedfile", function(file) {
             var reader = new FileReader();
             reader.addEventListener("loadend", function() {
-              var buf = new SparkMD5.ArrayBuffer();
+              var buf = new Danbooru.SparkMD5.ArrayBuffer();
               buf.append(this.result);
               var hash = buf.end();
               $("#upload_md5_confirmation").val(hash);

package.json

@@ -3,6 +3,7 @@
   "dependencies": {
     "@rails/webpacker": "^4.0.0",
     "debug-loader": "^0.0.1",
+    "dropzone": "^5.5.1",
     "expose-loader": "^0.7.5",
     "hammerjs": "^2.0.8",
     "jquery-ui": "^1.12.1",
@@ -10,6 +11,7 @@
     "qtip2": "^3.0.3",
     "rails-erb-loader": "^5.4.2",
     "script-loader": "^0.7.2",
+    "spark-md5": "^3.0.0",
     "webpack-cli": "^3.0.8"
   },
   "devDependencies": {

yarn.lock

@@ -2400,6 +2400,11 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+dropzone@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/dropzone/-/dropzone-5.5.1.tgz#06e2f513e61d6aa363d4b556f18574f47cf7ba26"
+  integrity sha512-3VduRWLxx9hbVr42QieQN25mx/I61/mRdUSuxAmDGdDqZIN8qtP7tcKMa3KfpJjuGjOJGYYUzzeq6eGDnkzesA==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
@@ -6689,6 +6694,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
+spark-md5@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.0.tgz#3722227c54e2faf24b1dc6d933cc144e6f71bfef"
+  integrity sha1-NyIifFTi+vJLHcbZM8wUTm9xv+8=
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"