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 {Boolean} name  the field name for each image..
  12  * @cfg {Array}  images  an array of ?? Img objects ??? when loading existing files..
  13  *
  14  * @constructor
  15  * Create a new CardUploader
  16  * @param {Object} config The config object
  17  */
  18
  19 Roo.bootstrap.CardUploader = function(config){
  20
  21
  22
  23     Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
  24
  25
  26     this.imageCollection  = new Roo.util.MixedCollection(function(r) { return r.data.id });
  27
  28
  29 };
  30
  31 Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
  32
  33
  34     errorTimeout : 3000,
  35
  36     images : false,
  37
  38     imageCollection : false,
  39
  40     getAutoCreate : function()
  41     {
  42
  43         var cfg =  {
  44             cls :'form-group' ,
  45             cn : [
  46                 {
  47                     tag : 'i',
  48                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
  49                     tooltip : 'This field is required'
  50                 },
  51                 {
  52                     tag: 'label',
  53                    //cls : 'input-group-addon',
  54                     html : this.fieldLabel
  55
  56                 },
  57
  58                 {
  59                     tag: 'input',
  60                     id : id,
  61                     type : 'hidden',
  62                     value : this.value,
  63                     cls : 'd-none'
  64                 },
  65                 {
  66                     cls : 'roo-card-uploader-button-container w-100 mb-2'
  67                 },
  68                 {
  69                     cls : 'card-columns roo-card-uploader-container'
  70                 }
  71
  72             ]
  73         };
  74
  75
  76
  77
  78         return cfg;
  79     },
  80
  81     getChildContainer : function() /// what children are added to.
  82     {
  83         return this.containerEl;
  84     },
  85
  86     getButtonContainer : function() /// what children are added to.
  87     {
  88         return this.el;
  89     },
  90
  91     initEvents : function()
  92     {
  93
  94         Roo.bootstrap.Input.prototype.initEvents.call(this);
  95
  96         this.addxtype({
  97             xns: Roo.bootstrap,
  98
  99             xtype : 'Button',
 100             container_method : 'getButtonContainer' ,
 101             title : 'Upload File / Images', // fix changable?
 102             cls : 'w-100',
 103             listeners : {
 104                 'click' : function(e) {
 105                     this.onClick(e);
 106                 }
 107             }
 108         })
 109
 110
 111
 112
 113         this.urlAPI = (window.createObjectURL && window) ||
 114                                 (window.URL && URL.revokeObjectURL && URL) ||
 115                                 (window.webkitURL && webkitURL);
 116
 117
 118
 119
 120         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 121
 122         this.selectorEl.on('change', this.onFileSelected, this);
 123         if (this.images) {
 124             var t = this;
 125             this.images.forEach(function(img) {
 126                 t.addCard(img)
 127             });
 128             this.images = false;
 129         }
 130         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
 131
 132
 133     },
 134
 135
 136     onClick : function(e)
 137     {
 138         e.preventDefault();
 139
 140         this.selectorEl.dom.click();
 141
 142     },
 143
 144     onFileSelected : function(e)
 145     {
 146         e.preventDefault();
 147
 148         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 149             return;
 150         }
 151
 152         Roo.each(this.selectorEl.dom.files, function(file){
 153             this.addFile(file);
 154         }, this);
 155
 156     },
 157
 158
 159
 160
 161
 162     addFile : function(file)
 163     {
 164
 165         if(typeof(file) === 'string'){
 166             throw "Add file by name?"; // should not happen
 167             return;
 168         }
 169
 170         if(!file || !this.urlAPI){
 171             return;
 172         }
 173
 174         // file;
 175         // file.type;
 176
 177         var _this = this;
 178
 179
 180         var url = _this.urlAPI.createObjectURL( file);
 181
 182         this.addCard({
 183             id : Roo.bootstrap.CardUploader.ID--,
 184             is_uploaded : false,
 185             src : url,
 186             title : file.name,
 187             mimetype : file.type,
 188             preview : false,
 189         })
 190
 191     },
 192
 193     addCard : function (data)
 194     {
 195         // hidden input element?
 196         // if the file is not an image...
 197         //then we need to use something other that and header_image
 198         var t = this;
 199         //   remove.....
 200         var footer = [
 201             {
 202                 xns : Roo.bootstrap,
 203                 xtype : 'CardFooter',
 204                 items: [
 205                     {
 206                         xns : Roo.bootstrap,
 207                         xtype : 'Element',
 208                         cls : 'd-flex',
 209                         items : [
 210
 211                             {
 212                                 xns : Roo.bootstrap,
 213                                 xtype : 'Button',
 214                                 html : String.format("<small>{0}</small>", data.title),
 215                                 cls : 'col-11 text-left',
 216                                 size: 'sm',
 217                                 weight: 'link',
 218                                 fa : 'download',
 219                                 listeners : {
 220                                     click : function() {
 221                                         this.downloadCard(data.id)
 222                                     }
 223                                 }
 224                             },
 225
 226                             {
 227                                 xns : Roo.bootstrap,
 228                                 xtype : 'Button',
 229
 230                                 size : 'sm',
 231                                 weight: 'danger',
 232                                 cls : 'col-1',
 233                                 fa : 'times',
 234                                 listeners : {
 235                                     click : function() {
 236                                         this.removeCard(data.id)
 237                                     }
 238                                 }
 239                             }
 240                         ]
 241                     }
 242
 243                 ],
 244             }
 245
 246         ];
 247
 248         var cn = this.addxtype(
 249             {
 250
 251                 xns : Roo.bootstrap,
 252                 xtype : 'Card',
 253                 closeable : true,
 254                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
 255                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
 256                 header_image_fit_square: true,
 257                 data : data,
 258                 html : false,
 259
 260                 items : footer,
 261                 initEvents : function() {
 262                     Roo.bootstrap.Card.prototype.initEvents.call(this);
 263                     this.imgEl = this.el.select('.card-img-top').first();
 264                     if (this.imgEl) {
 265                         this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
 266                         this.imgEl.set({ 'pointer' : 'cursor' });
 267
 268                     }
 269
 270
 271                 }
 272
 273             }
 274         );
 275         this.items.push(cn);
 276
 277
 278     }
 279
 280
 281 });
 282
 283
 284 Roo.bootstrap.CardUploader.ID = -1;