Add gitlab issue/merge request templates
[src/app-framework-demo.git] / 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 })();