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
  27
  28 function changeInput() {
  29      console.log ('input imgClicked');
  30 }
  31
  32 (function() {
  33 'use strict';
  34
  35 // WARNING: Angular ng-change does not work on input/file. Let's hook our callback through standard JS function
  36 var tmpl =  '<input type="file" name="{{name}}-input" onchange="angular.element(this).scope().UpLoadFile(this.files)" accept="{{mimetype}}" style="display:none">'+
  37             '<div class="upload-file" ng-click="imgClicked()">' +
  38             '<img id="{{name}}-img" src="{{thumbnail}}">' +
  39             '<range-slider ng-show="!noslider" id="{{name}}-slider" automatic=true inithook="SliderInitCB"></range-slider>' +
  40             '</div>';
  41
  42
  43 function Basename(path) {
  44    return path.split('/').reverse()[0];
  45 }
  46
  47 // Service Create xform insert files in and Post it to url
  48 function LoadFileSvc (scope, elem, posturl, files, thumbnailCB) {
  49     var xmlReq = new XMLHttpRequest();
  50     var xform  = new FormData();
  51
  52     // Update slider during Upload
  53     xmlReq.upload.onprogress = function (event) {
  54         var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
  55         if (scope.slider) scope.slider.setValue (progress);
  56     };
  57
  58     // Upload is finish let's notify controler callback
  59     xmlReq.onload = function () {
  60         elem.addClass ("success");
  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 fail");
  70         var response ={
  71             status : xmlReq.status,
  72             headers: xmlReq.getAllResponseHeaders()
  73         };
  74         scope.callback (response);
  75     };
  76
  77     xmlReq.onabort = function () {
  78         elem.addClass ("error abort");
  79         var response ={
  80             status : xmlReq.status,
  81             headers: xmlReq.getAllResponseHeaders()
  82         };
  83         scope.callback (response);
  84     };
  85
  86     for (var i = 0; i < files.length; i++) {
  87         var file = files[i];
  88         if (!file.type.match(scope.mimetype)) {
  89             continue;
  90         }
  91
  92         console.log ("Selected file=" + file.name + " size="+ file.size/1024 + " Type="+ file.type);
  93
  94         // File to upload is too big
  95         if (file.size > scope.maxsize*1024) {
  96             scope.thumbnail = scope.istoobig; // warning if image path is wrong nothing happen
  97             scope.$apply('thumbnail'); // we short-circuit Angular resync Image
  98             return;
  99         }
 100
 101         // This is not an uploadable file
 102         if(isNaN(file.size)) {
 103             scope.thumbnail = scope.isnotvalid;
 104             scope.$apply('thumbnail');
 105             return;
 106         }
 107
 108         scope.Basename=Basename(file.name);
 109         scope.imgElem[0].file = file;
 110
 111         // If File is an image let display it now
 112         if (thumbnailCB) {
 113             var reader = new FileReader();
 114             reader.readAsArrayBuffer(file);
 115             reader.onload = thumbnailCB;
 116         }
 117
 118         // if everything is OK let's add file to xform
 119         xform.append(scope.name, file, file.name);
 120     }
 121
 122
 123     // everything looks OK let's Post it
 124     xmlReq.open("POST", posturl , true);
 125     xmlReq.send(xform);
 126 };
 127
 128 angular.module('UploadFiles',['ConfigApp', 'ModalNotification', 'RangeSlider'])
 129
 130 .directive('uploadImage', function(ConfigApp,  JQemu, Notification) {
 131     function mymethods(scope, elem, attrs) {
 132
 133         // get widget image handle from template
 134         scope.imgElem    = elem.find('img');
 135         scope.inputElem  = elem.find('input');
 136
 137         // Image was ckick let's simulate an input (file) click
 138         scope.imgClicked = function () {
 139             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 140         };
 141
 142         // Slider control handle registration after creation
 143         scope.SliderInitCB=function (slider) {
 144            scope.slider= slider;
 145         };
 146
 147         // Upload is delegated to a shared function
 148         scope.UpLoadFile=function (files) {
 149             var readerCB = function (upload) {
 150                 // scope.thumbnail = upload.target.result;
 151                 scope.imgElem[0].src = window.URL.createObjectURL(new Blob([upload.target.result], {type: "image"}));
 152                 scope.$apply('thumbnail');    // we short-circuit Angular resync image
 153             };
 154             var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
 155             LoadFileSvc (scope, elem, posturl, files, readerCB);
 156         };
 157
 158         // Initiallize default values from attributes values
 159         scope.name= attrs.name || 'avatar';
 160         scope.category= attrs.category  || 'image';
 161         scope.mimetype= (attrs.accept || 'image') + '/*';
 162         scope.maxsize= attrs.maxsize || 100; // default max size 100KB
 163         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 164
 165         if (attrs.thumbnail) scope.thumbnail= ConfigApp.paths[scope.category] +  attrs.thumbnail;
 166         else  scope.thumbnail=ConfigApp.paths[scope.category] + 'tux-bzh.png';
 167
 168         if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
 169         else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
 170
 171         if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
 172         else  scope.istoobig=ConfigApp.paths[scope.category] + 'istoobig.png';
 173         scope.noslider = attrs.noslider || false;
 174
 175         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);
 176     }
 177     return {
 178         restrict: 'E',
 179         template: tmpl,
 180         link: mymethods,
 181         scope: {
 182             callback : '='
 183         }
 184     };
 185 })
 186
 187 .directive('uploadAudio', function(ConfigApp,  JQemu, Notification) {
 188     function mymethods(scope, elem, attrs) {
 189
 190         // get widget image handle from template
 191         scope.imgElem    = elem.find('img');
 192         scope.inputElem  = elem.find('input');
 193
 194         // Image was ckick let's simulate an input (file) click
 195         scope.imgClicked = function () {
 196             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 197         };
 198
 199         // Slider control handle registration after creation
 200         scope.SliderInitCB=function (slider) {
 201            scope.slider= slider;
 202         };
 203
 204         // Upload is delegated to a shared function
 205         scope.UpLoadFile=function (files) {
 206             var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
 207             LoadFileSvc (scope, elem, posturl, files, false);
 208         };
 209
 210         // Initiallize default values from attributes values
 211         scope.name= attrs.name || 'audio';
 212         scope.category= attrs.category  || 'audio';
 213         scope.mimetype= (attrs.accept || 'audio') + '/*';
 214         scope.maxsize= attrs.maxsize || 10000; // default max size 10MB
 215         scope.regexp = new RegExp (attrs.accept+ '.*','i');
 216
 217         if (attrs.thumbnail) scope.thumbnail= ConfigApp.paths[scope.category] +  attrs.thumbnail;
 218         else  scope.thumbnail=ConfigApp.paths[scope.category] + 'upload-music.png';
 219
 220         if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
 221         else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
 222
 223         if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
 224         else  scope.istoobig=ConfigApp.paths[scope.category] + 'istoobig.png';
 225         scope.noslider = attrs.noslider || false;
 226
 227         if (!attrs.posturl) throw new TypeError('file-upload %s posturl=/api/xxxx/xxxx required', scope.attrs);
 228     }
 229     return {
 230         restrict: 'E',
 231         template: tmpl,
 232         link: mymethods,
 233         scope: {
 234             callback : '='
 235         }
 236     };
 237
 238 })
 239
 240 .directive('uploadAppli', function(ConfigApp,  JQemu, Notification) {
 241     function mymethods(scope, elem, attrs) {
 242
 243         // get widget image handle from template
 244         scope.imgElem    = elem.find('img');
 245         scope.inputElem  = elem.find('input');
 246
 247         // Image was ckick let's simulate an input (file) click
 248         scope.imgClicked = function () {
 249             scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
 250         };
 251
 252         // Slider control handle registration after creation
 253         scope.SliderInitCB=function (slider) {
 254            scope.slider= slider;
 255         };
 256
 257         // Upload is delegated to a shared function
 258         scope.UpLoadFile=function (files) {
 259
 260             var readerCB = function (upload) {
 261                 var zipapp = new JSZip(upload.target.result);
 262                 var thumbnail = zipapp.file("afa-pkg/thumbnail.jpg");
 263
 264                 // Check is we have a thumbnail within loaded Zipfile
 265                 if (!thumbnail) {
 266                     console.log ("This is not a valid Application Framework APP");
 267                     scope.thumbnail=ConfigApp.paths[scope.category] + 'isnotvalid.png';
 268                     scope.$apply('thumbnail');    // we short-circuit Angular resync image
 269                     return;
 270                 }
 271                 scope.imgElem[0].src = window.URL.createObjectURL(new Blob([thumbnail.asArrayBuffer()], {type: "image"}));
 272                 scope.$apply('thumbnail');    // we short-circuit Angular resync image
 273             };
 274
 275             var posturl = attrs.posturl + "?token=" + ConfigApp.session.token;
 276             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= ConfigApp.paths[scope.category] +  attrs.thumbnail;
 287         else  scope.thumbnail=ConfigApp.paths[scope.category] + 'upload-appli.png';
 288
 289         if (attrs.thumbnail) scope.isnotvalid= ConfigApp.paths[scope.category] +  attrs.isnotvalid;
 290         else  scope.isnotvalid=ConfigApp.paths[scope.category] + 'isnotvalid.png';
 291
 292         if (attrs.istoobig) scope.istoobig= ConfigApp.paths[scope.category] +  attrs.istoobig;
 293         else  scope.istoobig=ConfigApp.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 })();