git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_CardUploader.js.html

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