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

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