Handle Error Modal on upload
[src/app-framework-demo.git] / afm-client / app / Frontend / widgets / FormInput / UploadAppli.js
index c1b33ac..1ef7ce8 100644 (file)
@@ -39,9 +39,15 @@ var tmplAppli = '<input type="file" name="{{name}}-input" onchange="angular.elem
     
 var tmplModal = '<span class="modal-text">Upload Application <b>{{appname}}</b> ?</span>' +
             '<div>'+
-            '<img ng-src="{{appicon}}">' +
-            '<submit-button icon="fi-x" label="Cancel" clicked="refused"></submit-button>'+
-            '<submit-button icon="fi-like" label="Install" clicked="accepted"></submit-button> ' +
+            '<img ng-src="{{icon}}">' +
+            '<submit-button icon="fi-x" label="Cancel" clicked="abandon"></submit-button>'+
+            '<submit-button icon="fi-like" label="Install" clicked="success"></submit-button> ' +
+            '</div>';
+    
+var tmplError = '<span class="modal-text">Invalid Application <b>{{appname}}</b> ?</span>' +
+            '<div>'+
+            '<img ng-src="{{icon}}">' +
+            '<submit-button icon="fi-x" label="Close" clicked="abandon"></submit-button>'+
             '</div>';
     
 
@@ -90,36 +96,26 @@ function LoadFileSvc (scope, files, fileCB) {
 
     for (var i = 0; i < files.length; i++) {
         this.file = files[i];
-        console.log ("filetype=%s",this.file.type );
         // Unknow Type !!! if (!this.file.type.match(scope.mimetype)) continue;
 
         console.log ("Selected file=" + this.file.name + " size="+ this.file.size/1024 + " Type="+ this.file.type);
+        
+        this.basename= this.file.name.split('/').reverse()[0];
 
         // File to upload is too big
-        if (this.file.size > scope.maxsize*1024) {
-            scope.thumbnail = scope.istoobig; // warning if image path is wrong nothing happen
-            scope.$apply('thumbnail'); // we short-circuit Angular resync Image
-            return;
-        }
-
-        // This is not an uploadable file
-        if(isNaN(this.file.size)) {
-            scope.thumbnail = scope.isnotvalid; 
-            scope.$apply('thumbnail');
-            return;
-        }
-
-        this.basename= this.file.name.split('/').reverse()[0];
-        //scope.imgElem[0].file = this.file;
+        if (isNaN(this.file.size) || this.file.size > scope.maxsize*1024) {
+            setTimeout (fileCB,100);  // On error asynchronous callback without argument
+            
+        } else {
 
-        // If File is an image let display it now
-        if (fileCB) {
+            // If File is readable let's read it
             var reader = new FileReader();
             reader.readAsArrayBuffer(this.file);
             reader.onload = fileCB;
-        } 
-        // if everything is OK let's add file to xform
-        xform.append(scope.name, this.file, this.file.name);
+
+            // if everything is OK let's add file to xform
+            xform.append(scope.name, this.file, this.file.name);
+        }
     }
 }
 
@@ -146,9 +142,9 @@ angular.module('UploadFiles',['AppConfig', 'ModalNotification', 'RangeSlider'])
         scope.UpLoadFile=function (files) {
             var handle; 
             var appicon;
+            var template;
             
-            var accepted = function() {
-                console.log ("Modal Accepted");
+            var success = function() {
                 // This Looks OK let's Post Xform/File
                 handle.postfile(attrs.posturl + "?token=" + AppConfig.session.token);
 
@@ -156,44 +152,61 @@ angular.module('UploadFiles',['AppConfig', 'ModalNotification', 'RangeSlider'])
                 $timeout (function() {scope.modal.destroy();}, 1000);
             };
             
-            var refused = function() {
-                console.log ("Modal Refused");
+            var abandon = function() {
                 scope.modal.deactivate();
                 $timeout (function() {scope.modal.destroy();}, 1000);
             };
                        
             var readerCB = function (upload) {
-
-                var zipapp = new JSZip (upload.target.result);
-                var thumbnail = zipapp.file("icon_128.png");
-                
-                // Check is we have a thumbnail within loaded Zipfile
-                if (!thumbnail) {
-                    console.log ("This is not a valid Application Framework APP");
-                    scope.thumbnail=AppConfig.paths[scope.category] + 'isnotvalid.png';
-                    scope.$apply('thumbnail'); // we short-circuit Angular resync Image
-                } else {
-                    //scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
-                    appicon = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
+               
+                // File upload fail handle error
+                if (! upload) {
+                    if (handle.file.size > scope.maxsize*1024) {
+                        appicon = scope.istoobig;
+                        template= tmplError;
+                    }
                     
-                    // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
-                    var config = {
-                        animationIn: 'slideInFromTop',
-                        contentScope: {
-                            accepted: accepted,
-                            refused:  refused,
-                            appicon:  appicon,
-                            appname:  handle.basename
-                        }, template:  tmplModal
-                    }; 
-                    // Popup Modal to render application data
-                    scope.modal = new ModalFactory(config);
-                    scope.modal.activate ();
+                    if (isNaN(handle.file.size)) {
+                        appicon = scope.isnotvalid; 
+                        template= tmplError;
+                    }
+                                        
+                } else {
+
+                    var zipapp = new JSZip (upload.target.result);
+                    var thumbnail = zipapp.file("icon_128.png");
+
+                    // Check is we have a thumbnail within loaded Zipfile
+                    if (!thumbnail) {
+                        console.log ("This is not a valid Application Framework APP");
+                        appicon = scope.isnotvalid;
+                        template= tmplError;
+                        
+                    } else {
+                        //scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
+                        appicon = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
+                        template = tmplModal;
+                    }
                 }
+                
+                // reference http://foundation.zurb.com/apps/docs/#!/angular-modules
+                var config = {
+                    animationIn: 'slideInFromTop',
+                    contentScope: {
+                        success : success,
+                        abandon : abandon,
+                        icon    : appicon,
+                        appname : handle.basename
+                    }, template : template
+                }; 
+                // Popup Modal to render application data
+                scope.modal = new ModalFactory(config);
+                scope.modal.activate ();
             };
             
             // Load file within browser and if OK call readerCB
             handle = new LoadFileSvc (scope, files, readerCB);
+            console.log (handle);
         };
 
         // Initiallize default values from attributes values
@@ -206,7 +219,7 @@ angular.module('UploadFiles',['AppConfig', 'ModalNotification', 'RangeSlider'])
         scope.label   = attrs.label || 'Upload';
         
         if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
-        else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
+        else  scope.isnotvalid=AppConfig.paths[scope.category] + 'w3c-widget.png';
 
         if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
         else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';