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

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