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                     value : this.value,
  62                     cls : 'd-none  form-control'
  63                 },
  64
  65                 {
  66                     tag: 'input',
  67                     multiple : 'multiple',
  68                     type : 'file',
  69                     cls : 'd-none  roo-card-upload-selector'
  70                 },
  71
  72                 {
  73                     cls : 'roo-card-uploader-button-container w-100 mb-2'
  74                 },
  75                 {
  76                     cls : 'card-columns roo-card-uploader-container'
  77                 }
  78
  79             ]
  80         };
  81
  82
  83         return cfg;
  84     },
  85
  86     getChildContainer : function() /// what children are added to.
  87     {
  88         return this.containerEl;
  89     },
  90
  91     getButtonContainer : function() /// what children are added to.
  92     {
  93         return this.el.select(".roo-card-uploader-button-container").first();
  94     },
  95
  96     initEvents : function()
  97     {
  98
  99         Roo.bootstrap.Input.prototype.initEvents.call(this);
 100
 101         var t = this;
 102         this.addxtype({
 103             xns: Roo.bootstrap,
 104
 105             xtype : 'Button',
 106             container_method : 'getButtonContainer' ,
 107             html :  this.html, // fix changable?
 108             cls : 'w-100 ',
 109             listeners : {
 110                 'click' : function(btn, e) {
 111                     t.onClick(e);
 112                 }
 113             }
 114         })
 115
 116
 117
 118
 119         this.urlAPI = (window.createObjectURL && window) ||
 120                                 (window.URL && URL.revokeObjectURL && URL) ||
 121                                 (window.webkitURL && webkitURL);
 122
 123
 124
 125
 126         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 127
 128         this.selectorEl.on('change', this.onFileSelected, this);
 129         if (this.images) {
 130             var t = this;
 131             this.images.forEach(function(img) {
 132                 t.addCard(img)
 133             });
 134             this.images = false;
 135         }
 136         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
 137
 138
 139     },
 140
 141
 142     onClick : function(e)
 143     {
 144         e.preventDefault();
 145
 146         this.selectorEl.dom.click();
 147
 148     },
 149
 150     onFileSelected : function(e)
 151     {
 152         e.preventDefault();
 153
 154         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 155             return;
 156         }
 157
 158         Roo.each(this.selectorEl.dom.files, function(file){
 159             this.addFile(file);
 160         }, this);
 161
 162     },
 163
 164
 165
 166
 167
 168     addFile : function(file)
 169     {
 170
 171         if(typeof(file) === 'string'){
 172             throw "Add file by name?"; // should not happen
 173             return;
 174         }
 175
 176         if(!file || !this.urlAPI){
 177             return;
 178         }
 179
 180         // file;
 181         // file.type;
 182
 183         var _this = this;
 184
 185
 186         var url = _this.urlAPI.createObjectURL( file);
 187
 188         this.addCard({
 189             id : Roo.bootstrap.CardUploader.ID--,
 190             is_uploaded : false,
 191             src : url,
 192             title : file.name,
 193             mimetype : file.type,
 194             preview : false,
 195             is_deleted : 0
 196         })
 197
 198     },
 199
 200     addCard : function (data)
 201     {
 202         // hidden input element?
 203         // if the file is not an image...
 204         //then we need to use something other that and header_image
 205         var t = this;
 206         //   remove.....
 207         var footer = [
 208             {
 209                 xns : Roo.bootstrap,
 210                 xtype : 'CardFooter',
 211                 items: [
 212                     {
 213                         xns : Roo.bootstrap,
 214                         xtype : 'Element',
 215                         cls : 'd-flex',
 216                         items : [
 217
 218                             {
 219                                 xns : Roo.bootstrap,
 220                                 xtype : 'Button',
 221                                 html : String.format("<small>{0}</small>", data.title),
 222                                 cls : 'col-11 text-left',
 223                                 size: 'sm',
 224                                 weight: 'link',
 225                                 fa : 'download',
 226                                 listeners : {
 227                                     click : function() {
 228                                         this.downloadCard(data.id)
 229                                     }
 230                                 }
 231                             },
 232
 233                             {
 234                                 xns : Roo.bootstrap,
 235                                 xtype : 'Button',
 236
 237                                 size : 'sm',
 238                                 weight: 'danger',
 239                                 cls : 'col-1',
 240                                 fa : 'times',
 241                                 listeners : {
 242                                     click : function() {
 243                                         t.removeCard(data.id)
 244                                     }
 245                                 }
 246                             }
 247                         ]
 248                     }
 249
 250                 ],
 251             }
 252
 253         ];
 254
 255         var cn = this.addxtype(
 256             {
 257
 258                 xns : Roo.bootstrap,
 259                 xtype : 'Card',
 260                 closeable : true,
 261                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
 262                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
 263                 header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
 264                 data : data,
 265                 html : false,
 266
 267                 items : footer,
 268                 initEvents : function() {
 269                     Roo.bootstrap.Card.prototype.initEvents.call(this);
 270                     this.imgEl = this.el.select('.card-img-top').first();
 271                     if (this.imgEl) {
 272                         this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
 273                         this.imgEl.set({ 'pointer' : 'cursor' });
 274
 275                     }
 276
 277
 278                 }
 279
 280             }
 281         );
 282         // dont' really need ot update items.
 283         // this.items.push(cn);
 284         this.fileCollection.add(cn);
 285         this.updateInput();
 286
 287     },
 288     removeCard : function(id)
 289     {
 290
 291         var card  = this.fileCollection.get(id);
 292         card.data.is_deleted = 1;
 293         card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
 294         this.fileCollection.remove(card);
 295         //this.items = this.items.filter(function(e) { return e != card });
 296         // dont' really need ot update items.
 297         card.el.dom.parentNode.removeChild(card.el.dom);
 298
 299     },
 300     reset: function()
 301     {
 302         this.fileCollection.each(function(card) {
 303             card.el.dom.parentNode.removeChild(card.el.dom);
 304         });
 305         this.fileCollection.clear();
 306         this.updateInput();
 307     },
 308
 309     updateInput : function()
 310     {
 311         var data = [];
 312         this.fileCollection.each(function(e) {
 313             data.push(e.data);
 314         });
 315
 316         this.inputEl().dom.value = JSON.stringify(data);
 317     }
 318
 319
 320 });
 321
 322
 323 Roo.bootstrap.CardUploader.ID = -1;