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     if (test) {
  22         //code
  23     }
  24
  25     Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
  26
  27
  28     this.imageCollection  = new Roo.util.MixedCollection(function(r) { return r.id });
  29
  30
  31 };
  32
  33 Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
  34
  35
  36     errorTimeout : 3000,
  37
  38     images : false,
  39
  40     imageCollection : false,
  41
  42     getAutoCreate : function()
  43     {
  44         var btn = Roo.bootstrap.Button.getAutoCreate.prototype.call(this);
  45
  46         var cfg = {
  47             cls : 'roo-card-uploader-wrap',
  48             cn : [
  49                 btn,
  50                 {
  51                     tag : 'input',
  52                     cls : 'd=none roo-card-upload-selector',
  53                     type : 'file',
  54                     multiple : 'multiple'
  55                 },
  56                 {
  57                     cls : 'card-columns roo-card-uploader-container'
  58                 }
  59             ]
  60
  61         }
  62
  63
  64         return cfg;
  65     },
  66
  67     getChildContainer : function() /// what children are added to.
  68     {
  69         return this.containerEl;
  70     },
  71
  72
  73     initEvents : function()
  74     {
  75         this.urlAPI = (window.createObjectURL && window) ||
  76                                 (window.URL && URL.revokeObjectURL && URL) ||
  77                                 (window.webkitURL && webkitURL);
  78
  79
  80
  81
  82         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
  83
  84         this.bodyEl.on('click', this.beforeSelectFile, this);
  85         this.selectorEl.on('change', this.onFileSelected, this);
  86         if (this.images) {
  87             var t = this;
  88             this.images.forEach(function(img) {
  89                 t.addCard(img)
  90             });
  91             this.images = false;
  92         }
  93         this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
  94
  95
  96     },
  97
  98
  99     beforeSelectFile : function(e)
 100     {
 101         e.preventDefault();
 102
 103         this.selectorEl.dom.click();
 104
 105     },
 106
 107     onFileSelected : function(e)
 108     {
 109         e.preventDefault();
 110
 111         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 112             return;
 113         }
 114
 115         Roo.each(this.selectorEl.dom.files, function(file){
 116             this.addFile(file);
 117         }, this);
 118
 119     },
 120
 121
 122
 123
 124
 125     addFile : function(file)
 126     {
 127
 128         if(typeof(file) === 'string'){
 129             throw "Add file by name?"; // should not happen
 130             return;
 131         }
 132
 133         if(!file || !this.urlAPI){
 134             return;
 135         }
 136
 137         // file;
 138         // file.type;
 139
 140         var _this = this;
 141
 142
 143         var url = _this.urlAPI.createObjectURL( file);
 144
 145         this.addCard({
 146             id : Roo.bootstrap.CardUploader.ID--,
 147             is_uploaded : false,
 148             src : url,
 149             title : file.name,
 150             mimetype : file.mimetype,
 151         })
 152
 153     },
 154
 155     addCard : function (data)
 156     {
 157         // hidden input element?
 158         // if the file is not an image...
 159         //then we need to use something other that and header_image
 160
 161         //   remove.....
 162
 163         var cn = this.addxtype(
 164             {
 165
 166                 xns : Roo.bootstrap,
 167                 xtype : 'Card',
 168                 closeable : true,
 169                 header_image : data.src,
 170                 data : data,
 171
 172                 listeners : {
 173                     click : function() {
 174                         // view..
 175                     }
 176                 },
 177                 cn : [
 178                     {
 179                         xns : Roo.bootstrap,
 180                         xtype : 'CardFooter',
 181                         cn: [
 182                             {
 183                                 xns : Roo.bootstrap,
 184                                 xtype : 'Element',
 185                                 html : data.title
 186                             },
 187                             {
 188                                 xns : Roo.bootstrap,
 189                                 xtype : 'Button',
 190                                 html : 'Delete',
 191                                 fa : 'cross'
 192                             }
 193
 194                         ],
 195                     }
 196
 197                 ]
 198
 199
 200             }
 201         );
 202         this.items.push(cn);
 203
 204
 205     }
 206
 207
 208 });
 209
 210
 211 Roo.bootstrap.CardUploader.ID = -1;