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      </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  32          </span><span class="jsdoc-comment">// raw events
  33         /**
  34          * @event preview
  35          * When a image is clicked on - and needs to display a slideshow or similar..
  36          * @param {Roo.bootstrap.Card} this
  37          * @param {Object} The image information data
  38          *
  39          */
  40         </span><span class="jsdoc-string">'preview' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  41          </span><span class="jsdoc-comment">/**
  42          * @event download
  43          * When a the download link is clicked
  44          * @param {Roo.bootstrap.Card} this
  45          * @param {Object} The image information data  contains
  46          */
  47         </span><span class="jsdoc-string">'download' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  48
  49     </span><span class="jsdoc-syntax">});
  50 };
  51
  52 </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">,  {
  53
  54
  55     </span><span class="jsdoc-var">errorTimeout </span><span class="jsdoc-syntax">: 3000,
  56
  57     </span><span class="jsdoc-var">images </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  58
  59     </span><span class="jsdoc-var">fileCollection </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  60     </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  61
  62     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  63     {
  64
  65         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">=  {
  66             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'form-group' </span><span class="jsdoc-syntax">,
  67             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  68
  69                 {
  70                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
  71                    </span><span class="jsdoc-comment">//cls : 'input-group-addon',
  72                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
  73
  74                 </span><span class="jsdoc-syntax">},
  75
  76                 {
  77                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
  78                     </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
  79                     </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">,
  80                     </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">,
  81                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'d-none  form-control'
  82                 </span><span class="jsdoc-syntax">},
  83
  84                 {
  85                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
  86                     </span><span class="jsdoc-var">multiple </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'multiple'</span><span class="jsdoc-syntax">,
  87                     </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'</span><span class="jsdoc-syntax">,
  88                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'d-none  roo-card-upload-selector'
  89                 </span><span class="jsdoc-syntax">},
  90
  91                 {
  92                     </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'
  93                 </span><span class="jsdoc-syntax">},
  94                 {
  95                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-columns roo-card-uploader-container'
  96                 </span><span class="jsdoc-syntax">}
  97
  98             ]
  99         };
 100
 101
 102         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 103     },
 104
 105     </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.
 106     </span><span class="jsdoc-syntax">{
 107         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.containerEl</span><span class="jsdoc-syntax">;
 108     },
 109
 110     </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.
 111     </span><span class="jsdoc-syntax">{
 112         </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">();
 113     },
 114
 115     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 116     {
 117
 118         </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">);
 119
 120         </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">;
 121         </span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">({
 122             </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 123
 124             </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
 125             </span><span class="jsdoc-var">container_method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'getButtonContainer' </span><span class="jsdoc-syntax">,
 126             </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?
 127             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'w-100 '</span><span class="jsdoc-syntax">,
 128             </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
 129                 </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">) {
 130                     </span><span class="jsdoc-var">t.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 131                 }
 132             }
 133         });
 134
 135
 136
 137
 138         </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">) ||
 139                                 (</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">) ||
 140                                 (</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">);
 141
 142
 143
 144
 145         </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">();
 146
 147         </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">);
 148         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.images</span><span class="jsdoc-syntax">) {
 149             </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">;
 150             </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">) {
 151                 </span><span class="jsdoc-var">t.addCard</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">)
 152             });
 153             </span><span class="jsdoc-var">this.images </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 154         }
 155         </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">();
 156
 157
 158     },
 159
 160
 161     </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">)
 162     {
 163         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 164
 165         </span><span class="jsdoc-var">this.selectorEl.dom.click</span><span class="jsdoc-syntax">();
 166
 167     },
 168
 169     </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">)
 170     {
 171         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 172
 173         </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">){
 174             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 175         }
 176
 177         </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">){
 178             </span><span class="jsdoc-var">this.addFile</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">);
 179         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 180
 181     },
 182
 183
 184
 185
 186
 187     </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">)
 188     {
 189
 190         </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">){
 191             </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
 192             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 193         }
 194
 195         </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">){
 196             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 197         }
 198
 199         </span><span class="jsdoc-comment">// file;
 200         // file.type;
 201
 202         </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">;
 203
 204
 205         </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">);
 206
 207         </span><span class="jsdoc-var">this.addCard</span><span class="jsdoc-syntax">({
 208             </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">--,
 209             </span><span class="jsdoc-var">is_uploaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 210             </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">,
 211             </span><span class="jsdoc-var">srcfile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">,
 212             </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file.name</span><span class="jsdoc-syntax">,
 213             </span><span class="jsdoc-var">mimetype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file.type</span><span class="jsdoc-syntax">,
 214             </span><span class="jsdoc-var">preview </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 215             </span><span class="jsdoc-var">is_deleted </span><span class="jsdoc-syntax">: 0
 216         });
 217
 218     },
 219
 220     </span><span class="jsdoc-comment">/**
 221      * addCard - add an Attachment to the uploader
 222      * @param data - the data about the image to upload
 223      *
 224      * {
 225           id : 123
 226           title : &quot;Title of file&quot;,
 227           is_uploaded : false,
 228           src : &quot;http://.....&quot;,
 229           srcfile : { the File upload object },
 230           mimetype : file.type,
 231           preview : false,
 232           is_deleted : 0
 233           .. any other data...
 234         }
 235      *
 236      *
 237     */
 238
 239     </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">)
 240     {
 241         </span><span class="jsdoc-comment">// hidden input element?
 242         // if the file is not an image...
 243         //then we need to use something other that and header_image
 244         </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">;
 245         </span><span class="jsdoc-comment">//   remove.....
 246         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">footer </span><span class="jsdoc-syntax">= [
 247             {
 248                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 249                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'CardFooter'</span><span class="jsdoc-syntax">,
 250                  </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">: [
 251                     {
 252                         </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 253                         </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Element'</span><span class="jsdoc-syntax">,
 254                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'d-flex'</span><span class="jsdoc-syntax">,
 255                         </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">: [
 256
 257                             {
 258                                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 259                                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
 260                                 </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">),
 261                                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'col-10 text-left'</span><span class="jsdoc-syntax">,
 262                                 </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
 263                                 </span><span class="jsdoc-var">weight</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'link'</span><span class="jsdoc-syntax">,
 264                                 </span><span class="jsdoc-var">fa </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'download'</span><span class="jsdoc-syntax">,
 265                                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
 266                                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 267
 268                                         </span><span class="jsdoc-var">t.fireEvent</span><span class="jsdoc-syntax">( </span><span class="jsdoc-string">&quot;download&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">);
 269                                     }
 270                                 }
 271                             },
 272
 273                             {
 274                                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 275                                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
 276                                 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'max-height: 28px; '</span><span class="jsdoc-syntax">,
 277                                 </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
 278                                 </span><span class="jsdoc-var">weight</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'danger'</span><span class="jsdoc-syntax">,
 279                                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'col-2'</span><span class="jsdoc-syntax">,
 280                                 </span><span class="jsdoc-var">fa </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'times'</span><span class="jsdoc-syntax">,
 281                                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
 282                                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 283                                         </span><span class="jsdoc-var">t.removeCard</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data.id</span><span class="jsdoc-syntax">)
 284                                     }
 285                                 }
 286                             }
 287                         ]
 288                     }
 289
 290                 ]
 291             }
 292
 293         ];
 294
 295         </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">(
 296             {
 297
 298                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 299                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Card'</span><span class="jsdoc-syntax">,
 300                 </span><span class="jsdoc-var">closeable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 301                 </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">,
 302                 </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">,
 303                 </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.
 304                 </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">,
 305                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 306
 307                 </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">footer</span><span class="jsdoc-syntax">,
 308                 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 309                     </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">);
 310                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">card </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 311                     </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">();
 312                     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.imgEl</span><span class="jsdoc-syntax">) {
 313                         </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.fireEvent</span><span class="jsdoc-syntax">( </span><span class="jsdoc-string">&quot;preview&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 314                         </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">});
 315
 316                     }
 317                     </span><span class="jsdoc-var">this.getCardFooter</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'p-1'</span><span class="jsdoc-syntax">);
 318
 319
 320                 }
 321
 322             }
 323         );
 324         </span><span class="jsdoc-comment">// dont' really need ot update items.
 325         // this.items.push(cn);
 326         </span><span class="jsdoc-var">this.fileCollection.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">);
 327
 328         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">data.srcfile</span><span class="jsdoc-syntax">) {
 329             </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
 330             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 331         }
 332
 333         </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">;
 334         </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">();
 335         </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">() {
 336             </span><span class="jsdoc-var">data.srcdata </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">reader.result</span><span class="jsdoc-syntax">;
 337             </span><span class="jsdoc-var">_t.updateInput</span><span class="jsdoc-syntax">();
 338         });
 339         </span><span class="jsdoc-var">reader.readAsDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data.srcfile</span><span class="jsdoc-syntax">);
 340
 341
 342
 343     },
 344     </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">)
 345     {
 346
 347         </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">);
 348         </span><span class="jsdoc-var">card.data.is_deleted </span><span class="jsdoc-syntax">= 1;
 349         </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.
 350         //this.fileCollection.remove(card);
 351         //this.items = this.items.filter(function(e) { return e != card });
 352         // dont' really need ot update items.
 353         </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">);
 354         </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
 355
 356
 357     },
 358     </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 359     {
 360         </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">) {
 361             </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">) {
 362                 </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">);
 363             }
 364         });
 365         </span><span class="jsdoc-var">this.fileCollection.clear</span><span class="jsdoc-syntax">();
 366         </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
 367     },
 368
 369     </span><span class="jsdoc-var">updateInput </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 370     {
 371          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
 372         </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">) {
 373             </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.data</span><span class="jsdoc-syntax">);
 374
 375         });
 376         </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">);
 377
 378
 379
 380     }
 381
 382
 383 });
 384
 385
 386 </span><span class="jsdoc-var">Roo.bootstrap.CardUploader.ID </span><span class="jsdoc-syntax">= -1;</span></code></body></html>