Added support events for uploading and uploaded/uploadfailed against …

…file field and gallery inputs
GetmeUK · Jul 25, 2018 · 0bccccb · 0bccccb
1 parent 510adc6
commit 0bccccb
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git a/module/field.js b/module/field.js
@@ -453,14 +453,19 @@ export class FileField {
         this._uploader.init()
 
         // Set up event handlers for the uploader
+        $.dispatch(this.input, 'uploading')
+
         $.listen(
             this._uploader.uploader,
             {
                 'aborted cancelled error': () => {
+                    $.dispatch(this.input, 'uploadfailed')
                     this.clear()
                 },
 
                 'uploaded': (event) => {
+                    $.dispatch(this.input, 'uploaded')
+
                     try {
                         // Extract the asset from the response
                         const behaviour = this._behaviours.asset
@@ -471,6 +476,7 @@ export class FileField {
 
                         // Populate the field
                         this.populate(asset)
+
                     } catch (error) {
                         if (error instanceof ResponseError) {
                             // Clear the field
@@ -485,6 +491,7 @@ export class FileField {
                             throw error
                         }
                     }
+
                 }
             }
         )

diff --git a/module/ui/gallery-item.js b/module/ui/gallery-item.js
@@ -312,10 +312,14 @@ export class GalleryItem {
         this._uploader.init()
 
         // Set up event handlers for the uploader
+        $.dispatch(this._gallery.input, 'uploading')
+
         $.listen(
             this._uploader.uploader,
             {
                 'cancelled aborted error': () => {
+                    $.dispatch(this._gallery.input, 'uploadfailed')
+
                     // Remove the item
                     this.destroy()
 
@@ -324,6 +328,8 @@ export class GalleryItem {
                 },
 
                 'uploaded': (event) => {
+                    $.dispatch(this._gallery.input, 'uploaded')
+
                     try {
                         // Extract the asset from the response
                         const asset = behaviourMap.asset[behaviours.asset](

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "manhattan-assets",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-beta.1",
   "description": "File and image uploads for forms.",
   "engines": {
     "node": ">=8.9.4"

diff --git a/spec/gallery.html b/spec/gallery.html
@@ -35,7 +35,7 @@
                     data-mh-gallery--upload-url="http://3dtotal.local/x/upload-picture"
                     data-mh-gallery--crop-aspect-ratio="2.5"
                     data-mh-gallery--fix-crop-aspect-ratio
-
+                    >
         </form>
 
         <script src="../node_modules/manhattan-essentials/umd/index.js"></script>
@@ -49,6 +49,14 @@
             for (let galleryElm of $.many('[data-mh-gallery]')) {
                 let gallery = new Gallery(galleryElm, {})
                 gallery.init()
+
+                $.listen(
+                    galleryElm,
+                    {
+                        'uploading': () => { console.log('up') },
+                        'uploaded uploadfailed': () => { console.log('down') }
+                    }
+                )
             }
 
         </script>

diff --git a/spec/index.html b/spec/index.html
@@ -61,6 +61,14 @@
             for (let fieldElm of $.many('[data-mh-file-field]')) {
                 let field = new FileField(fieldElm)
                 field.init()
+
+                $.listen(
+                    fieldElm,
+                    {
+                        'uploading': () => { console.log('up') },
+                        'uploaded uploadfailed': () => { console.log('down') }
+                    }
+                )
             }
 
         </script>