git.roojs.org Git - roojs1/blob - Roo/bootstrap/CardUploader.js

   1
   2 /*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.CardUploader
   8  * @extends Roo.bootstrap.Button
   9  * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
  10  * @cfg {Number} errorTimeout default 3000
  11  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
  12  * @cfg {Array}  html The button text.
  13
  14  *
  15  * @constructor
  16  * Create a new CardUploader
  17  * @param {Object} config The config object
  18  */
  19
  20 Roo.bootstrap.CardUploader = function(config){
  21
  22
  23
  24     Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
  25
  26
  27     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
  28         return r.data.id
  29      });
  30
  31
  32 };
  33
  34 Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
  35
  36
  37     errorTimeout : 3000,
  38
  39     images : false,
  40
  41     fileCollection : false,
  42     allowBlank : true,
  43
  44     getAutoCreate : function()
  45     {
  46
  47         var cfg =  {
  48             cls :'form-group' ,
  49             cn : [
  50
  51                 {
  52                     tag: 'label',
  53                    //cls : 'input-group-addon',
  54                     html : this.fieldLabel
  55
  56                 },
  57
  58                 {
  59                     tag: 'input',
  60                     type : 'hidden',
  61                     name : this.name,
  62                     value : this.value,
  63                     cls : 'd-none  form-control'
  64                 },
  65
  66                 {
  67                     tag: 'input',
  68                     multiple : 'multiple',
  69                     type : 'file',
  70                     cls : 'd-none  roo-card-upload-selector'
  71                 },
  72
  73                 {
  74                     cls : 'roo-card-uploader-button-container w-100 mb-2'
  75                 },
  76                 {
  77                     cls : 'card-columns roo-card-uploader-container'
  78                 }
  79
  80             ]
  81         };
  82
  83
  84         return cfg;
  85     },
  86
  87     getChildContainer : function() /// what children are added to.
  88     {
  89         return this.containerEl;
  90     },
  91
  92     getButtonContainer : function() /// what children are added to.
  93     {
  94         return this.el.select(".roo-card-uploader-button-container").first();
  95     },
  96
  97     initEvents : function()
  98     {
  99
 100         Roo.bootstrap.Input.prototype.initEvents.call(this);
 101
 102         var t = this;
 103         this.addxtype({
 104             xns: Roo.bootstrap,
 105
 106             xtype : 'Button',
 107             container_method : 'getButtonContainer' ,
 108             html :  this.html, // fix changable?
 109             cls : 'w-100 ',
 110             listeners : {
 111                 'click' : function(btn, e) {
 112                     t.onClick(e);
 113                 }
 114             }
 115         });
 116
 117
 118
 119
 120         this.urlAPI = (window.createObjectURL && window) ||
 121                                 (window.URL && URL.revokeObjectURL && URL) ||
 122                                 (window.webkitURL && webkitURL);
 123
 124
 125
 126
 127         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 128
 129         this.selectorEl.on('change', this.onFileSelected, this);
 130         if (this.images) {
 131             var t = this;
 132             this.images.forEach(function(img) {
 133                 t.addCard(img)
 134             });
 135             this.images = false;
 136         }
 137         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
 138
 139
 140     },
 141
 142
 143     onClick : function(e)
 144     {
 145         e.preventDefault();
 146
 147         this.selectorEl.dom.click();
 148
 149     },
 150
 151     onFileSelected : function(e)
 152     {
 153         e.preventDefault();
 154
 155         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 156             return;
 157         }
 158
 159         Roo.each(this.selectorEl.dom.files, function(file){
 160             this.addFile(file);
 161         }, this);
 162
 163     },
 164
 165
 166
 167
 168
 169     addFile : function(file)
 170     {
 171
 172         if(typeof(file) === 'string'){
 173             throw "Add file by name?"; // should not happen
 174             return;
 175         }
 176
 177         if(!file || !this.urlAPI){
 178             return;
 179         }
 180
 181         // file;
 182         // file.type;
 183
 184         var _this = this;
 185
 186
 187         var url = _this.urlAPI.createObjectURL( file);
 188
 189         this.addCard({
 190             id : Roo.bootstrap.CardUploader.ID--,
 191             is_uploaded : false,
 192             src : url,
 193             srcfile : file,
 194             title : file.name,
 195             mimetype : file.type,
 196             preview : false,
 197             is_deleted : 0
 198         });
 199
 200     },
 201
 202     addCard : function (data)
 203     {
 204         // hidden input element?
 205         // if the file is not an image...
 206         //then we need to use something other that and header_image
 207         var t = this;
 208         //   remove.....
 209         var footer = [
 210             {
 211                 xns : Roo.bootstrap,
 212                 xtype : 'CardFooter',
 213                 items: [
 214                     {
 215                         xns : Roo.bootstrap,
 216                         xtype : 'Element',
 217                         cls : 'd-flex',
 218                         items : [
 219
 220                             {
 221                                 xns : Roo.bootstrap,
 222                                 xtype : 'Button',
 223                                 html : String.format("<small>{0}</small>", data.title),
 224                                 cls : 'col-11 text-left',
 225                                 size: 'sm',
 226                                 weight: 'link',
 227                                 fa : 'download',
 228                                 listeners : {
 229                                     click : function() {
 230                                         this.downloadCard(data.id)
 231                                     }
 232                                 }
 233                             },
 234
 235                             {
 236                                 xns : Roo.bootstrap,
 237                                 xtype : 'Button',
 238
 239                                 size : 'sm',
 240                                 weight: 'danger',
 241                                 cls : 'col-1',
 242                                 fa : 'times',
 243                                 listeners : {
 244                                     click : function() {
 245                                         t.removeCard(data.id)
 246                                     }
 247                                 }
 248                             }
 249                         ]
 250                     }
 251
 252                 ]
 253             }
 254
 255         ];
 256
 257         var cn = this.addxtype(
 258             {
 259
 260                 xns : Roo.bootstrap,
 261                 xtype : 'Card',
 262                 closeable : true,
 263                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
 264                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
 265                 header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
 266                 data : data,
 267                 html : false,
 268
 269                 items : footer,
 270                 initEvents : function() {
 271                     Roo.bootstrap.Card.prototype.initEvents.call(this);
 272                     this.imgEl = this.el.select('.card-img-top').first();
 273                     if (this.imgEl) {
 274                         this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
 275                         this.imgEl.set({ 'pointer' : 'cursor' });
 276
 277                     }
 278
 279
 280                 }
 281
 282             }
 283         );
 284         // dont' really need ot update items.
 285         // this.items.push(cn);
 286         this.fileCollection.add(cn);
 287
 288         if (!data.srcfile) {
 289             this.updateInput();
 290             return;
 291         }
 292
 293         var _t = this;
 294         var reader = new FileReader();
 295         reader.addEventListener("load", function() {
 296             data.srcdata =  reader.result;
 297             _t.updateInput();
 298         });
 299         reader.readAsDataURL(data.srcfile);
 300
 301
 302
 303     },
 304     removeCard : function(id)
 305     {
 306
 307         var card  = this.fileCollection.get(id);
 308         card.data.is_deleted = 1;
 309         card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
 310         //this.fileCollection.remove(card);
 311         //this.items = this.items.filter(function(e) { return e != card });
 312         // dont' really need ot update items.
 313         card.el.dom.parentNode.removeChild(card.el.dom);
 314         this.updateInput();
 315
 316
 317     },
 318     reset: function()
 319     {
 320         this.fileCollection.each(function(card) {
 321             if (card.el.dom && card.el.dom.parentNode) {
 322                 card.el.dom.parentNode.removeChild(card.el.dom);
 323             }
 324         });
 325         this.fileCollection.clear();
 326         this.updateInput();
 327     },
 328
 329     updateInput : function()
 330     {
 331          var data = [];
 332         this.fileCollection.each(function(e) {
 333             data.push(e.data);
 334
 335         });
 336         this.inputEl().dom.value = JSON.stringify(data);
 337
 338
 339
 340     }
 341
 342
 343 });
 344
 345
 346 Roo.bootstrap.CardUploader.ID = -1;