Clean up and documentation

[src/app-framework-demo.git] / afb-client / app / Frontend / widgets / FormInput / UploadFiles.js

diff --git a/afb-client/app/Frontend/widgets/FormInput/UploadFiles.js b/afb-client/app/Frontend/widgets/FormInput/UploadFiles.js
index 6c68960..90110c9 100644 (file)
--- a/afb-client/app/Frontend/widgets/FormInput/UploadFiles.js
+++ b/afb-client/app/Frontend/widgets/FormInput/UploadFiles.js
@@ -21,12 +21,12 @@
  *   https://github.com/nervgh/angular-file-upload/blob/master/src/services/FileUploader.js
  *   https://stuk.github.io/jszip/documentation/howto/read_zip.html
  *   http://onehungrymind.com/zip-parsing-jszip-angular/
+ *   http://stackoverflow.com/questions/15341912/how-to-go-from-blob-to-arraybuffer
+ *   
+ *   Bugs: zip file sent even when flag as invalid 
  */
 
-   
-function changeInput() {
-     console.log ('input imgClicked'); 
-}   
+ 
 
 (function() {
 'use strict';
@@ -39,16 +39,16 @@ var tmpl =  '<input type="file" name="{{name}}-input" onchange="angular.element(
             '</div>';
     
 
-function Basename(path) {
-   return path.split('/').reverse()[0];
-}
-
 // Service Create xform insert files in and Post it to url
 function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
     var xmlReq = new XMLHttpRequest();
     var xform  = new FormData();
-
-    // Update slider during Upload
+    
+    var OnLoadCB = function (target) {
+        var status = thumbnailCB (target);
+        //if (status) xform.append(scope.name, file, file.name);
+    };
+            // Update slider during Upload
     xmlReq.upload.onprogress = function (event) {
         var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
         if (scope.slider) scope.slider.setValue (progress);
@@ -57,6 +57,7 @@ function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
     // Upload is finish let's notify controler callback
     xmlReq.onload = function () {
         elem.addClass ("success");
+        elem.removeClass ("error");
         var response ={
             status : xmlReq.status,
             headers: xmlReq.getAllResponseHeaders() 
@@ -65,7 +66,8 @@ function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
     };
 
     xmlReq.onerror = function () {
-        elem.addClass ("error fail");
+        elem.addClass ("error");
+        elem.removeClass ("success");
         var response ={
             status : xmlReq.status,
             headers: xmlReq.getAllResponseHeaders() 
@@ -74,7 +76,8 @@ function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
     };
 
     xmlReq.onabort = function () {
-        elem.addClass ("error abort");
+        elem.addClass ("error");
+        elem.removeClass ("success");
         var response ={
             status : xmlReq.status,
             headers: xmlReq.getAllResponseHeaders() 
@@ -104,16 +107,15 @@ function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
             return;
         }
 
-        scope.Basename=Basename(file.name);
+        scope.Basename= file.name.split('/').reverse()[0];
         scope.imgElem[0].file = file;
 
         // If File is an image let display it now
         if (thumbnailCB) {
             var reader = new FileReader();
             reader.readAsArrayBuffer(file);
-            reader.onload = thumbnailCB;
-        }
-
+            reader.onload = OnLoadCB;
+        } 
         // if everything is OK let's add file to xform
         xform.append(scope.name, file, file.name);
     }
@@ -122,11 +124,11 @@ function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
     // everything looks OK let's Post it
     xmlReq.open("POST", posturl , true);
     xmlReq.send(xform);
-};
+}
 
-angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
+angular.module('UploadFiles',['AppConfig', 'ModalNotification', 'RangeSlider'])
 
-.directive('uploadImage', function(ConfigApp,  JQemu, Notification) {
+.directive('uploadImage', function(AppConfig,  JQemu, Notification) {
     function mymethods(scope, elem, attrs) {
         
         // get widget image handle from template
@@ -147,28 +149,28 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
         scope.UpLoadFile=function (files) {
             var readerCB = function (upload) {
                 // scope.thumbnail = upload.target.result;
-                scope.imgElem[0].src = window.URL.createObjectURL(new Blob([upload.target.result], {type: "image"}));
-                scope.$apply('thumbnail');    // we short-circuit Angular resync image
+                scope.imgElem[0].src = window.URL.createObjectURL(new Blob([upload.target.result], {type: "image"}));                
+                return true; // true activates post
             };
-            var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
-            LoadFileSvc (scope, elem, posturl, files, readerCB);
+            var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
+            new LoadFileSvc (scope, elem, posturl, files, readerCB);
         };
 
         // Initiallize default values from attributes values
-        scope.name= attrs.name || 'avatar';
+        scope.name= attrs.name || 'file';
         scope.category= attrs.category  || 'image';
         scope.mimetype= (attrs.accept || 'image') + '/*';
         scope.maxsize= attrs.maxsize || 100; // default max size 100KB
         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 
-        if (attrs.thumbnail) scope.thumbnail= ConfigApp.paths[scope.category] +  attrs.thumbnail;
-        else  scope.thumbnail=ConfigApp.paths[scope.category] + 'tux-bzh.png';
+        if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
+        else  scope.thumbnail=AppConfig.paths[scope.category] + 'tux-bzh.png';
         
-        if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
-        else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
+        if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
+        else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 
-        if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
-        else  scope.istoobig=ConfigApp.paths[scope.category] + 'istoobig.png';
+        if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
+        else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
         scope.noslider = attrs.noslider || false;
 
         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);            
@@ -183,7 +185,7 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
     };
 })
     
-.directive('uploadAudio', function(ConfigApp,  JQemu, Notification) {
+.directive('uploadAudio', function(AppConfig,  JQemu, Notification) {
     function mymethods(scope, elem, attrs) {
         
         // get widget image handle from template
@@ -202,8 +204,8 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
         
         // Upload is delegated to a shared function
         scope.UpLoadFile=function (files) {
-            var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
-            LoadFileSvc (scope, elem, posturl, files, false);
+            var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
+            new LoadFileSvc (scope, elem, posturl, files, false);
         };
 
         // Initiallize default values from attributes values
@@ -213,14 +215,14 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
         scope.maxsize= attrs.maxsize || 10000; // default max size 10MB
         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 
-        if (attrs.thumbnail) scope.thumbnail= ConfigApp.paths[scope.category] +  attrs.thumbnail;
-        else  scope.thumbnail=ConfigApp.paths[scope.category] + 'upload-music.png';
+        if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
+        else  scope.thumbnail=AppConfig.paths[scope.category] + 'upload-music.png';
         
-        if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
-        else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
+        if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
+        else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 
-        if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
-        else  scope.istoobig=ConfigApp.paths[scope.category] + 'istoobig.png';
+        if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
+        else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
         scope.noslider = attrs.noslider || false;
 
         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);            
@@ -236,7 +238,7 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
     
 })
 
-.directive('uploadAppli', function(ConfigApp,  JQemu, Notification) {
+.directive('uploadAppli', function(AppConfig,  JQemu, Notification) {
     function mymethods(scope, elem, attrs) {
         
         // get widget image handle from template
@@ -263,16 +265,15 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
                 // Check is we have a thumbnail within loaded Zipfile
                 if (!thumbnail) {
                     console.log ("This is not a valid Application Framework APP");
-                    scope.thumbnail=ConfigApp.paths[scope.category] + 'isnotvalid.png';
-                    scope.$apply('thumbnail');    // we short-circuit Angular resync image
-                    return;
+                    scope.thumbnail=AppConfig.paths[scope.category] + 'isnotvalid.png';
+                    scope.$apply('thumbnail'); // we short-circuit Angular resync Image
+                    return false; // do not post zip on binder
                 } 
-                scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
-                scope.$apply('thumbnail');    // we short-circuit Angular resync image
+                scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));                        
+                return true; // true activates post
             };
-                        
-            var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
-            LoadFileSvc (scope, elem, posturl, files, readerCB);
+            var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
+            new LoadFileSvc (scope, elem, posturl, files, readerCB);
         };
 
         // Initiallize default values from attributes values
@@ -282,14 +283,14 @@ angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
         scope.maxsize= attrs.maxsize || 100000; // default max size 100MB
         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 
-        if (attrs.thumbnail) scope.thumbnail= ConfigApp.paths[scope.category] +  attrs.thumbnail;
-        else  scope.thumbnail=ConfigApp.paths[scope.category] + 'upload-appli.png';
+        if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
+        else  scope.thumbnail=AppConfig.paths[scope.category] + 'upload-appli.png';
         
-        if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
-        else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
+        if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
+        else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 
-        if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
-        else  scope.istoobig=ConfigApp.paths[scope.category] + 'istoobig.png';
+        if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
+        else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
         scope.noslider = attrs.noslider || false;
 
         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);