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.Button,  {
  32
  33
  34     errorTimeout : 3000,
  35
  36     images : false,
  37
  38     imageCollection : false,
  39
  40     getAutoCreate : function()
  41     {
  42         var btn = Roo.bootstrap.Button.prototype.getAutoCreate.call(this);
  43         btn.cls += ' w-100 mb-2';
  44         var cfg = {
  45             cls : 'roo-card-uploader-wrap',
  46             cn : [
  47                 btn,
  48                 {
  49                     tag : 'input',
  50                     cls : 'd-none roo-card-upload-selector',
  51                     type : 'file',
  52                     multiple : 'multiple'
  53                 },
  54                 {
  55                     cls : 'card-columns roo-card-uploader-container'
  56                 }
  57             ]
  58
  59         }
  60
  61
  62         return cfg;
  63     },
  64
  65     getChildContainer : function() /// what children are added to.
  66     {
  67         return this.containerEl;
  68     },
  69
  70
  71     initEvents : function()
  72     {
  73         Roo.bootstrap.Button.prototype.initEvents.call(this);
  74         this.urlAPI = (window.createObjectURL && window) ||
  75                                 (window.URL && URL.revokeObjectURL && URL) ||
  76                                 (window.webkitURL && webkitURL);
  77
  78
  79
  80
  81         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
  82
  83          this.selectorEl.on('change', this.onFileSelected, this);
  84         if (this.images) {
  85             var t = this;
  86             this.images.forEach(function(img) {
  87                 t.addCard(img)
  88             });
  89             this.images = false;
  90         }
  91         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
  92
  93
  94     },
  95
  96
  97     onClick : function(e)
  98     {
  99         e.preventDefault();
 100
 101         this.selectorEl.dom.click();
 102
 103     },
 104
 105     onFileSelected : function(e)
 106     {
 107         e.preventDefault();
 108
 109         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 110             return;
 111         }
 112
 113         Roo.each(this.selectorEl.dom.files, function(file){
 114             this.addFile(file);
 115         }, this);
 116
 117     },
 118
 119
 120
 121
 122
 123     addFile : function(file)
 124     {
 125
 126         if(typeof(file) === 'string'){
 127             throw "Add file by name?"; // should not happen
 128             return;
 129         }
 130
 131         if(!file || !this.urlAPI){
 132             return;
 133         }
 134
 135         // file;
 136         // file.type;
 137
 138         var _this = this;
 139
 140
 141         var url = _this.urlAPI.createObjectURL( file);
 142
 143         this.addCard({
 144             id : Roo.bootstrap.CardUploader.ID--,
 145             is_uploaded : false,
 146             src : url,
 147             title : file.name,
 148             mimetype : file.type,
 149             preview : false,
 150         })
 151
 152     },
 153
 154     addCard : function (data)
 155     {
 156         // hidden input element?
 157         // if the file is not an image...
 158         //then we need to use something other that and header_image
 159         var t = this;
 160         //   remove.....
 161         var footer = [
 162             {
 163                 xns : Roo.bootstrap,
 164                 xtype : 'CardFooter',
 165                 items: [
 166                     {
 167                         xns : Roo.bootstrap,
 168                         xtype : 'Element',
 169                         cls : 'd-flex',
 170                         items : [
 171
 172                             {
 173                                 xns : Roo.bootstrap,
 174                                 xtype : 'Button',
 175                                 html : String.format("<small>{0}</small>", data.title),
 176                                 cls : 'col-11 text-left',
 177                                 size: 'sm',
 178                                 weight: 'link',
 179                                 fa : 'download',
 180                                 listeners : {
 181                                     click : function() {
 182                                         this.downloadCard(data.id)
 183                                     }
 184                                 }
 185                             },
 186
 187                             {
 188                                 xns : Roo.bootstrap,
 189                                 xtype : 'Button',
 190
 191                                 size : 'sm',
 192                                 weight: 'danger',
 193                                 cls : 'col-1',
 194                                 fa : 'times',
 195                                 listeners : {
 196                                     click : function() {
 197                                         this.removeCard(data.id)
 198                                     }
 199                                 }
 200                             }
 201                         ]
 202                     }
 203
 204                 ],
 205             }
 206
 207         ];
 208
 209         var cn = this.addxtype(
 210             {
 211
 212                 xns : Roo.bootstrap,
 213                 xtype : 'Card',
 214                 closeable : true,
 215                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
 216                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
 217                 data : data,
 218                 html : false,
 219
 220                 items : footer,
 221                 initEvents : function() {
 222                     Roo.bootstrap.Card.prototype.initEvents.call(this);
 223                     this.imgEl = this.el.select('card-img-top').first();
 224                     if (this.imgEl) {
 225                         this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
 226                         this.imgEl.set('pointer','curspr');
 227
 228                     }
 229
 230
 231                 }
 232
 233             }
 234         );
 235         this.items.push(cn);
 236
 237
 238     }
 239
 240
 241 });
 242
 243
 244 Roo.bootstrap.CardUploader.ID = -1;