dropzone - npm Package Compare versions

Comparing version 5.7.6 to 5.8.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+## 5.8.0
+
+- Dropzone now also triggers custom events on the DOM element. The custom events
+  are the same as the events you can listen on with Dropzone but start with
+  `dropzone:`. (thanks to @1cg)
+- Moved the `./src/options.js` previewTemplate in its own
+  `preview-template.html` file.
+- Switched to yarn as the primary package manager (shouldn't affect anybody that
+  is not working Dropzone itself).
+
 ## 5.7.6
@@ -2,0 +12,0 @@

package.json

 {
   "name": "dropzone",
-  "version": "5.7.6",
+  "version": "5.8.0",
   "description": "Handles drag and drop of files for you.",
@@ -17,3 +17,3 @@ "keywords": [
       "email": "[e-mail]",
-      "web": "http://www.colorglare.com"
+      "web": "https://www.yesmeno.com"
     }
@@ -25,3 +25,3 @@ ],
       "email": "[e-mail]",
-      "web": "http://www.colorglare.com"
+      "web": "https://www.yesmeno.com"
     }
@@ -47,7 +47,8 @@ ],
     "babel-loader": "^8.0.0",
-    "chai": "4.2.x",
+    "chai": "4.3.0",
     "core-js": "^3.8.0",
-    "css-loader": "^1.0.0",
-    "extract-loader": "^2.0.1",
-    "file-loader": "^2.0.0",
+    "css-loader": "^5.0.2",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^2.1.0",
     "karma": "^6.1.0",
@@ -59,14 +60,15 @@ "karma-chrome-launcher": "^3.1.0",
     "karma-spec-reporter": "^0.0.32",
-    "marked": "^0.8.2",
-    "mocha": "^7.0.0",
+    "marked": "^2.0.0",
+    "mocha": "^8.3.0",
     "mocha-headless-chrome": "^3.0.0",
     "rollup": "^2.38.4",
+    "rollup-plugin-html": "^0.2.1",
     "sass": "^1.0.0",
-    "sass-loader": "^10.0.0",
+    "sass-loader": "^11.0.1",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-shell-plugin": "^0.5.0"
+    "webpack": "^5.23.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-shell-plugin-next": "^2.1.1"
   }
 }

README.md

@@ -1,40 +0,47 @@
-<img alt="Dropzone.js" src="http://www.dropzonejs.com/images/new-logo.svg" />
+<img alt="Dropzone.js" src="https://raw.githubusercontent.com/dropzone/dropzone/assets/github-logo.svg" />
 
-Dropzone.js is a JavaScript library that turns any HTML element into a dropzone.
-This means that a user can drag and drop a file onto it, and the file gets
-uploaded to the server via XHR.
+[![Test and Release](https://github.com/dropzone/dropzone/actions/workflows/test-and-release.yml/badge.svg)](https://github.com/dropzone/dropzone/actions/workflows/test-and-release.yml)
 
-The file either gets uploaded directly to the configured URL, or you can handle
-and manage the file upload yourself.
+Dropzone is a JavaScript library that turns any HTML element into a dropzone.
+This means that a user can drag and drop a file onto it, and Dropzone will
+display file previews and upload progress, and handle the upload for you via
+XHR.
 
+It's fully configurable and can be styled according to your needs.
 
-If you want support, please use the [discussions
-section](https://github.com/dropzone/dropzone/discussions) or
-[stackoverflow](https://stackoverflow.com/questions/tagged/dropzone.js) with the
-`dropzone.js` tag and **not** the GitHub issues tracker. Only post an issue here
-if you think you discovered a bug or have a feature request.
+Quickstart
+----------
 
+- [📚 Full documentation](https://dropzone.gitbook.io/dropzone/)
+- [💾 Download
+  link](https://github.com/dropzone/dropzone/releases/latest/download/dist.zip)
+  containing JavaScript UMD modules and CSS files (full and minimised)
+- [⚙️ `src/options.js`](https://github.com/dropzone/dropzone/blob/main/src/options.js)
+  for all available options
 
-* * *
+&nbsp;
 
-> **Please read the [contributing guidelines](CONTRIBUTING.md) before you start
-> working on Dropzone!**
+<img alt="Dropzone Screenshot" width="568" src="https://github.com/dropzone/dropzone/raw/a19faf6c3aef5d3d7f912ca988cc62af1967d5d9/dropzone-preview.png" />
 
+&nbsp;
 
-<img alt="Dropzone Screenshot" width="585" src="http://i.imgur.com/Xf7QvVG.png" />
 
+Community
+---------
 
-Quickstart
-----------
+If you need support please use the [discussions section][discussions] or
+[stackoverflow][so] with the `dropzone.js` tag and **not** the GitHub issues
+tracker. Only post an issue here if you think you discovered a bug.
 
-The recommended way to install Dropzone is with [yarn](https://yarnpkg.com) and
-[webpack](http://webpack.js.org). I'll provide an example project soon!
+If you have a feature request or want to discuss something, please use the
+[discussions][] as well.
 
-[Download the standalone files](https://github.com/dropzone/dropzone/releases/latest/download/dist.zip) and import them on your website.
-(The JavaScript files in there are UMD modules, compatible with requirejs).
+[discussions]: https://github.com/dropzone/dropzone/discussions
+[so]: https://stackoverflow.com/questions/tagged/dropzone.js
 
-For more information, please consult the [Documentation](https://dropzone.gitbook.io/dropzone/).
 
-Dropzone does **not** depend on jQuery but has jQuery integration.
+> ⚠️ **Please read the [contributing guidelines](CONTRIBUTING.md) before you start
+> working on Dropzone!**
 
+
 Main features
@@ -56,41 +63,4 @@ -------------
 
-Documentation
--------------
-
-For all the configuration options and installation guide please visit [the
-documentation site](https://dropzone.gitbook.io/dropzone/).
-
-If you simply want to look up the configuration options, look at
-[src/options.js](https://github.com/dropzone/dropzone/blob/main/src/options.js).
-
-## Examples
-
-For examples, please see the [GitLab wiki](https://github.com/dropzone/dropzone/wiki).
-
-
-Server side implementation
---------------------------
-
-Dropzone does *not* provide the server side implementation of handling the
-files, but the way files are uploaded is identical to simple file upload forms
-like this:
-
-```html
-<form action="" method="post" enctype="multipart/form-data">
-  <input type="file" name="file" />
-</form>
-```
-
-To handle basic file uploads on the server, please look at the corresponding
-documentation. Here are a few documentations, if you think I should add some,
-please contact me.
-
-# Compatibility
-
-Dropzone supports all current browsers and IE up to IE11.
-
-For all the other browsers, dropzone provides an oldschool file input fallback.
-
 # MIT License
 
 See LICENSE file

src/emitter.js

@@ -26,6 +26,20 @@ // The Emitter class provides the ability to call `.on()` on Dropzone to listen
     }
-
+    // trigger a corresponding DOM event
+    if (this.element) {
+      this.element.dispatchEvent(this.makeEvent('dropzone:' + event, {args: args}));
+    }
     return this;
   }
 
+  makeEvent(eventName, detail) {
+    // IE 11 support
+    if (window.CustomEvent && typeof window.CustomEvent === 'function') {
+      return new CustomEvent(eventName, {bubbles: true, cancelable: true, detail: detail});
+    } else {
+      let evt = getDocument().createEvent('CustomEvent');
+      evt.initCustomEvent(eventName, true, true, detail);
+      return evt;
+    }
+  }
+
   // Remove event listener for given event. If fn is not provided, all event
@@ -32,0 +46,0 @@ // listeners for that event will be removed. If neither is provided, all

src/options.js

 import Dropzone from "./dropzone.js";
+import defaultPreviewTemplate from "./preview-template.html";
 
@@ -553,31 +554,3 @@ let defaultOptions = {
    */
-  previewTemplate: `\
-<div class="dz-preview dz-file-preview">
-<div class="dz-image"><img data-dz-thumbnail /></div>
-<div class="dz-details">
-<div class="dz-size"><span data-dz-size></span></div>
-<div class="dz-filename"><span data-dz-name></span></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 class="dz-success-mark">
-<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <title>Check</title>
-  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" stroke-opacity="0.198794158" stroke="#747474" fill-opacity="0.816519475" fill="#FFFFFF"></path>
-  </g>
-</svg>
-</div>
-<div class="dz-error-mark">
-<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <title>Error</title>
-  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475">
-      <path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z"></path>
-    </g>
-  </g>
-</svg>
-</div>
-</div>\
-`,
+  previewTemplate: defaultPreviewTemplate,
 
@@ -584,0 +557,0 @@ /*

No alert changes

Improved metrics

Total package byte prevSize

1053701

increased by0.42%

Number of package files

20

increased by11.11%

Worsened metrics

Dev dependency count

27

increased by8%

Lines of code

20559

decreased by-0.62%

Number of lines in readme file

66

decreased by-31.25%

No dependency changes