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