file-dropzone-element - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

bower.json

 {
   "name": "file-dropzone-element",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Native Web Component for a dropzone to support uploading of binary files",
@@ -5,0 +5,0 @@ "main": [

CHANGELOG.md

 # Change Log
 
+## [0.0.2](https://github.com/grtjn/file-dropzone-element/tree/0.0.2) (2018-05-01)
+[Full Changelog](https://github.com/grtjn/file-dropzone-element/compare/0.0.1...0.0.2)
+
+**Implemented enhancements:**
+
+- Document how to use with NPM and html-loader [\#9](https://github.com/grtjn/file-dropzone-element/issues/9)
+- Document how to use with bower, wiredep, and gulp [\#8](https://github.com/grtjn/file-dropzone-element/issues/8)
+- Document how to use in Angular.js [\#7](https://github.com/grtjn/file-dropzone-element/issues/7)
+
+**Fixed bugs:**
+
+- currentScript is null \(in Chrome\) [\#6](https://github.com/grtjn/file-dropzone-element/issues/6)
+
 ## [0.0.1](https://github.com/grtjn/file-dropzone-element/tree/0.0.1) (2018-03-26)
@@ -4,0 +17,0 @@ **Implemented enhancements:**

file-dropzone.html

@@ -215,3 +215,4 @@ <template id="file-dropzone-template">
   //      @drop=""
-  //      @double-click="">
+  //      @drop-all=""
+  //      @file-dblclick="">
   //    <p><strong>Drop files here or click to select files.</strong></p>
@@ -223,2 +224,5 @@ //    <em>(Files will be uploaded automatically)</em>
 
+    // Make sure to look inside this html fragement (in case of true html import)
+    const doc = document.currentScript ? (document.currentScript.ownerDocument || document) : document;
+
     // Progress helper object
@@ -407,5 +411,2 @@ var Progress = {};
 
-        // Make sure to look inside this html fragement (in case of true html import)
-        const doc = document.currentScript ? (document.currentScript.ownerDocument || document) : document;
-
         // get and append template
@@ -553,3 +554,3 @@ const template = doc
           // Throw drop-all event that can be captured from outside your component
-          this.dispatchEvent(new CustomEvent("file-double-click", {
+          this.dispatchEvent(new CustomEvent("file-dblclick", {
             detail: e.target.progress,
@@ -556,0 +557,0 @@ bubbles: true,

package.json

 {
   "name": "file-dropzone-element",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Native Web Component for a dropzone to support uploading of binary files",
@@ -5,0 +5,0 @@ "dependencies": {},

README.md

@@ -12,2 +12,4 @@ # file-dropzone-element
 
+### CDN and polyfill
+
 Simplest way:
@@ -21,9 +23,56 @@
 
-Alternatively, 'require'/include it with a tool like Webpack:
+### NPM and html-loader
 
-    <%= require('html-loader!https://cdn.rawgit.com/grtjn/file-dropzone-element/master/file-dropzone.html') %>
+This component is also published on npm:
 
+    npm install --save file-dropzone-element
+
+Potentially combined with something like:
+
+    <%= require('html-loader!../node_modules/file-dropzone-element/file-dropzone.html') %>
+
+### Bower, wiredep, and gulp
+
+This component is also published on bower:
+
+    bower install --save file-dropzone-element
+
+You can combine that with gulp and wiredep with something like:
+
+    .pipe(gulpWiredep({
+      fileTypes: {
+        html: {
+          block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
+          detect: {
+            js: /<script.*src=['"]([^'"]+)/gi,
+            css: /<link.*href=['"]([^'"]+)/gi,
+            html: /<link.*href=['"]([^'"]+)/gi
+          },
+          replace: {
+            js: '<script src="{{filePath}}"></script>',
+            css: '<link rel="stylesheet" href="{{filePath}}">',
+            html: '<link rel="import" href="{{filePath}}">'
+          }
+        }
+      }
+    }))
+
+Add this to your index.html:
+
+    <!-- bower:html -->
+    <link rel="import" href="/bower_components/file-dropzone-element/file-dropzone.html">
+    <!-- endbower -->
+
+    <!-- @exclude -->
+    <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-hi.js" type="text/javascript" defer></script>
+    <!-- @endexclude -->
+
+This relies on the html-import polyfill loaded from CDN. If you prefer not to rely on that, or if your tooling builds minified versions of everything, you can include the html similarly to html-loader mentioned above in NPM, and strip off the polyfill using gulp-preprocessor roughly like this:
+
+    .pipe(gulpReplace(/<link rel="import" href="([^"]+)">/g, '<!-- @include ../$1 -->'))
+    .pipe(gulpPreprocess())
+
 ## Usage
 
-Static example:
+Example:
 
@@ -39,6 +88,40 @@ <file-dropzone
 
-Emits events 'drop', 'drop-all', 'file-double-click'.
+Emits events 'drop', 'drop-all', 'file-dblclick'.
 
-Embedding in Vue.js:
+### Plaing HTML and JavaScript
 
+- In your html:
+
+        <file-dropzone
+            button="false"
+            multiple="multiple">
+          <div slot="intro">
+            <p><strong>Drop files here or click to select files.</strong></p>
+            <em>(Files will be uploaded automatically)</em>
+          </div>
+        </file-dropzone>
+
+        <script>
+          function sendFile(e) {
+            var progress = e.detail;
+            console.log(["sendFile", progress]);
+            progress.update(0);
+            setTimeout(function() {
+              progress.update(Math.random() * 100);
+              setTimeout(function() {
+                if (Math.random() > 0.5) {
+                  progress.update(100);
+                } else {
+                  progress.error("upload failed");
+                }
+              }, Math.random() * 5000);
+            }, Math.random() * 5000);
+          }
+          document
+          .getElementsByTagName("file-dropzone")[0]
+          .addEventListener("drop", sendFile);
+        </script>
+
+### Vue.js
+
 - Import or include the web component in your index.html
@@ -56,3 +139,3 @@ - Add `file-dropzone` to ignoreElements to stop it from squeaking:
             v-on:drop-all="sendAllFiles"
-            v-on:file-double-click="openFile">
+            v-on:file-dblclick="openFile">
           <div slot="intro">
@@ -64,2 +147,45 @@ <p><strong>Drop files here or click to select files.</strong></p>
 
+### AngularJS
+
+- In your html template:
+
+        <file-dropzone
+            button="false"
+            multiple="multiple">
+          <div slot="intro">
+            <p><strong>Drop files here or click to select files.</strong></p>
+            <em>(Files will be uploaded automatically)</em>
+          </div>
+        </file-dropzone>
+
+- In your controller something like:
+
+        UploadCtrl.$inject = ['$scope', '$document', 'MLRest', 'ngToast', '$state'];
+
+        function UploadCtrl($scope, $document, mlRest, toast, $state) {
+
+          var ctrl = this;
+
+          function uploadFile(e) {
+            var progress = e.originalEvent.detail;
+            progress.update(25);
+            mlRest.updateDocument(progress.file, {
+              uri: '/uploads/' + progress.file.name,
+              collection: 'uploads'
+            }).then(function(response) {
+              progress.update(100);
+            }, function(error) {
+              progress.error(error);
+            });
+          }
+
+          $document.on('drop', uploadFile);
+
+          $scope.$on('$destroy', function() {
+            $document.off('drop', uploadFile);
+          });
+
+        }
+
+
 ## Test locally
@@ -66,0 +192,0 @@

No alert changes

Improved metrics

Total package byte prevSize

46624

10.54%

Number of lines in readme file

192

190.91%

No dependency changes