afb-client/app/Frontend/widgets/FormInput/UploadFiles.js

   1
   2 /*
   3  * Copyright (C) 2015 "IoT.bzh"
   4  * Author "Fulup Ar Foll"
   5  *
   6  * This program is free software: you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation, either version 3 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details..
  15  *
  16  * Reference:
  17  *   https://developer.mozilla.org/en/docs/Web/API/FileReader
  18  *   https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click%28%29_method
  19  *   https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
  20  *   https://www.terlici.com/2015/05/16/uploading-files-locally.html
  21  *   https://github.com/nervgh/angular-file-upload/blob/master/src/services/FileUploader.js
  22  *   https://stuk.github.io/jszip/documentation/howto/read_zip.html
  23  *   http://onehungrymind.com/zip-parsing-jszip-angular/
  24  *   http://stackoverflow.com/questions/15341912/how-to-go-from-blob-to-arraybuffer
  25  *
  26  *   Bugs: zip file sent even when flag as invalid
  27  */
  28
  29
  30
  31 (function() {
  32 'use strict';
  33
  34 // WARNING: Angular ng-change does not work on input/file. Let's hook our callback through standard JS function
  35 var tmpl =  '<input type="file" name="{{name}}-input" onchange="angular.element(this).scope().UpLoadFile(this.files)" accept="{{mimetype}}" style="display:none">'+
  36             '<div class="upload-file" ng-click="imgClicked()">' +
  37             '<img id="{{name}}-img" src="{{thumbnail}}">' +
  38             '<range-slider ng-show="!noslider" id="{{name}}-slider" automatic=true inithook="SliderInitCB"></range-slider>' +
  39             '</div>';
  40
  41
  42 // Service Create xform insert files in and Post it to url
  43 function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
  44     var xmlReq = new XMLHttpRequest();
  45     var xform  = new FormData();
  46
  47     var OnLoadCB = function (target) {
  48         var status = thumbnailCB (target);
  49         //if (status) xform.append(scope.name, file, file.name);
  50     };
  51             // Update slider during Upload
  52     xmlReq.upload.onprogress = function (event) {
  53         var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
  54         if (scope.slider) scope.slider.setValue (progress);
  55     };
  56
  57     // Upload is finish let's notify controler callback
  58     xmlReq.onload = function () {
  59         elem.addClass ("success");
  60         elem.removeClass ("error");
  61         var response ={
  62             status : xmlReq.status,
  63             headers: xmlReq.getAllResponseHeaders()
  64         };
  65         scope.callback (response);
  66     };
  67
  68     xmlReq.onerror = function () {
  69         elem.addClass ("error");
  70         elem.removeClass ("success");
  71         var response ={
  72             status : xmlReq.status,
  73             headers: xmlReq.getAllResponseHeaders()
  74         };
  75         scope.callback (response);
  76     };
  77
  78     xmlReq.onabort = function () {
  79         elem.addClass ("error");
  80         elem.removeClass ("success");
  81         var response ={
  82             status : xmlReq.status,
  83             headers: xmlReq.getAllResponseHeaders()
  84         };
  85         scope.callback (response);
  86     };
  87
  88     for (var i = 0; i < files.length; i++) {
  89         var file = files[i];
  90         if (!file.type.match(scope.mimetype)) {
  91             continue;
  92         }
  93
  94         console.log ("Selected file=" + file.name + " size="+ file.size/1024 + " Type="+ file.type);
  95
  96         // File to upload is too big
  97         if (file.size > scope.maxsize*1024) {
  98             scope.thumbnail = scope.istoobig; // warning if image path is wrong nothing happen
  99             scope.$apply('thumbnail'); // we short-circuit Angular resync Image
 100             return;
 101         }
 102
 103         // This is not an uploadable file
 104         if(isNaN(file.size)) {
 105             scope.thumbnail = scope.isnotvalid;
 106             scope.$apply('thumbnail');
 107             return;
 108         }
 109
 110         scope.Basename= file.name.split('/').reverse()[0];
 111         scope.imgElem[0].file = file;
 112
 113         // If File is an image let display it now
 114         if (thumbnailCB) {
 115             var reader = new FileReader();
 116             reader.readAsArrayBuffer(file);
 117             reader.onload = OnLoadCB;
 118         }
 119         // if everything is OK let's add file to xform
 120         xform.append(scope.name, file, file.name);
 121     }
 122
 123
 124     // everything looks OK let's Post it
 125     xmlReq.open("POST", posturl , true);
 126     xmlReq.send(xform);
 127 }
 128
 129 angular.module('UploadFiles',['AppConfig', 'ModalNotification', 'RangeSlider'])
 130
 131 .directive('uploadImage', function(AppConfig,  JQemu, Notification) {
 132     function mymethods(scope, elem, attrs) {
 133
 134         // get widget image handle from template
 135         scope.imgElem    = elem.find('img');
 136         scope.inputElem  = elem.find('input');
 137
 138         // Image was ckick let's simulate an input (file) click
 139         scope.imgClicked = function () {
 140             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 141         };
 142
 143         // Slider control handle registration after creation
 144         scope.SliderInitCB=function (slider) {
 145            scope.slider= slider;
 146         };
 147
 148         // Upload is delegated to a shared function
 149         scope.UpLoadFile=function (files) {
 150             var readerCB = function (upload) {
 151                 // scope.thumbnail = upload.target.result;
 152                 scope.imgElem[0].src = window.URL.createObjectURL(new Blob([upload.target.result], {type: "image"}));
 153                 return true; // true activates post
 154             };
 155             var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
 156             new LoadFileSvc (scope, elem, posturl, files, readerCB);
 157         };
 158
 159         // Initiallize default values from attributes values
 160         scope.name= attrs.name || 'file';
 161         scope.category= attrs.category  || 'image';
 162         scope.mimetype= (attrs.accept || 'image') + '/*';
 163         scope.maxsize= attrs.maxsize || 100; // default max size 100KB
 164         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 165
 166         if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
 167         else  scope.thumbnail=AppConfig.paths[scope.category] + 'tux-bzh.png';
 168
 169         if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
 170         else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 171
 172         if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
 173         else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
 174         scope.noslider = attrs.noslider || false;
 175
 176         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);
 177     }
 178     return {
 179         restrict: 'E',
 180         template: tmpl,
 181         link: mymethods,
 182         scope: {
 183             callback : '='
 184         }
 185     };
 186 })
 187
 188 .directive('uploadAudio', function(AppConfig,  JQemu, Notification) {
 189     function mymethods(scope, elem, attrs) {
 190
 191         // get widget image handle from template
 192         scope.imgElem    = elem.find('img');
 193         scope.inputElem  = elem.find('input');
 194
 195         // Image was ckick let's simulate an input (file) click
 196         scope.imgClicked = function () {
 197             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 198         };
 199
 200         // Slider control handle registration after creation
 201         scope.SliderInitCB=function (slider) {
 202            scope.slider= slider;
 203         };
 204
 205         // Upload is delegated to a shared function
 206         scope.UpLoadFile=function (files) {
 207             var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
 208             new LoadFileSvc (scope, elem, posturl, files, false);
 209         };
 210
 211         // Initiallize default values from attributes values
 212         scope.name= attrs.name || 'audio';
 213         scope.category= attrs.category  || 'audio';
 214         scope.mimetype= (attrs.accept || 'audio') + '/*';
 215         scope.maxsize= attrs.maxsize || 10000; // default max size 10MB
 216         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 217
 218         if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
 219         else  scope.thumbnail=AppConfig.paths[scope.category] + 'upload-music.png';
 220
 221         if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
 222         else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 223
 224         if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
 225         else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
 226         scope.noslider = attrs.noslider || false;
 227
 228         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);
 229     }
 230     return {
 231         restrict: 'E',
 232         template: tmpl,
 233         link: mymethods,
 234         scope: {
 235             callback : '='
 236         }
 237     };
 238
 239 })
 240
 241 .directive('uploadAppli', function(AppConfig,  JQemu, Notification) {
 242     function mymethods(scope, elem, attrs) {
 243
 244         // get widget image handle from template
 245         scope.imgElem    = elem.find('img');
 246         scope.inputElem  = elem.find('input');
 247
 248         // Image was ckick let's simulate an input (file) click
 249         scope.imgClicked = function () {
 250             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 251         };
 252
 253         // Slider control handle registration after creation
 254         scope.SliderInitCB=function (slider) {
 255            scope.slider= slider;
 256         };
 257
 258         // Upload is delegated to a shared function
 259         scope.UpLoadFile=function (files) {
 260
 261             var readerCB = function (upload) {
 262                 var zipapp = new JSZip(upload.target.result);
 263                 var thumbnail = zipapp.file("afa-pkg/thumbnail.jpg");
 264
 265                 // Check is we have a thumbnail within loaded Zipfile
 266                 if (!thumbnail) {
 267                     console.log ("This is not a valid Application Framework APP");
 268                     scope.thumbnail=AppConfig.paths[scope.category] + 'isnotvalid.png';
 269                     scope.$apply('thumbnail'); // we short-circuit Angular resync Image
 270                     return false; // do not post zip on binder
 271                 }
 272                 scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
 273                 return true; // true activates post
 274             };
 275             var posturl = attrs.posturl + "?token=" + AppConfig.session.token;
 276             new LoadFileSvc (scope, elem, posturl, files, readerCB);
 277         };
 278
 279         // Initiallize default values from attributes values
 280         scope.name= attrs.name || 'appli';
 281         scope.category= attrs.category  || 'appli';
 282         scope.mimetype= (attrs.accept || '.zip');
 283         scope.maxsize= attrs.maxsize || 100000; // default max size 100MB
 284         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 285
 286         if (attrs.thumbnail) scope.thumbnail= AppConfig.paths[scope.category] +  attrs.thumbnail;
 287         else  scope.thumbnail=AppConfig.paths[scope.category] + 'upload-appli.png';
 288
 289         if (attrs.thumbnail) scope.isnotvalid= AppConfig.paths[scope.category] +  attrs.isnotvalid;
 290         else  scope.isnotvalid=AppConfig.paths[scope.category] + 'isnotvalid.png';
 291
 292         if (attrs.istoobig) scope.istoobig= AppConfig.paths[scope.category] +  attrs.istoobig;
 293         else  scope.istoobig=AppConfig.paths[scope.category] + 'istoobig.png';
 294         scope.noslider = attrs.noslider || false;
 295
 296         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);
 297     }
 298     return {
 299         restrict: 'E',
 300         template: tmpl,
 301         link: mymethods,
 302         scope: {
 303             callback : '='
 304         }
 305     };
 306
 307 });
 308
 309 console.log ("UploadFile Loaded");
 310 })();