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

   1 <html><head><title>Roo/bootstrap/ButtonUploader.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.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  * @cfg {Boolean}  multiple (default true) Should the upload allow multiple files to be uploaded.
  16  *
  17  * @constructor
  18  * Create a new CardUploader
  19  * @param {Object} config The config object
  20  */
  21
  22 </span><span class="jsdoc-var">Roo.bootstrap.ButtonUploader </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">){
  23
  24
  25
  26     </span><span class="jsdoc-var">Roo.bootstrap.ButtonUploader.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">);
  27
  28
  29      </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  30          </span><span class="jsdoc-comment">// raw events
  31         /**
  32          * @event beforeselect
  33          * When button is pressed, before show upload files dialog is shown
  34          * @param {Roo.bootstrap.UploaderButton} this
  35          *
  36          */
  37         </span><span class="jsdoc-string">'beforeselect' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  38          </span><span class="jsdoc-comment">/**
  39          * @event fired when files have been selected,
  40          * When a the download link is clicked
  41          * @param {Roo.bootstrap.UploaderButton} this
  42          * @param {Array} Array of files that have been uploaded
  43          */
  44         </span><span class="jsdoc-string">'uploaded' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  45
  46     </span><span class="jsdoc-syntax">});
  47 };
  48
  49 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.ButtonUploader</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Button</span><span class="jsdoc-syntax">,  {
  50
  51
  52     </span><span class="jsdoc-var">errorTimeout </span><span class="jsdoc-syntax">: 3000,
  53
  54     </span><span class="jsdoc-var">images </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  55
  56     </span><span class="jsdoc-var">fileCollection </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  57     </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  58
  59     </span><span class="jsdoc-var">multiple </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  60
  61     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  62     {
  63
  64
  65         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-syntax">{
  66             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'div' </span><span class="jsdoc-syntax">,
  67             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  68                 </span><span class="jsdoc-var">Roo.bootstrap.Button.prototype.getAutoCreate.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)
  69             ]
  70         };
  71
  72
  73     },
  74
  75
  76     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  77     {
  78
  79         </span><span class="jsdoc-var">Roo.bootstrap.Button.prototype.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  80
  81
  82
  83
  84
  85         </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">) ||
  86                                 (</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">) ||
  87                                 (</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">);
  88
  89         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">im </span><span class="jsdoc-syntax">= {
  90             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
  91             </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'</span><span class="jsdoc-syntax">,
  92             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'d-none  roo-card-upload-selector'
  93
  94         </span><span class="jsdoc-syntax">};
  95         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.multiple</span><span class="jsdoc-syntax">) {
  96             </span><span class="jsdoc-var">im.multiple </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'multiple'</span><span class="jsdoc-syntax">;
  97         }
  98         </span><span class="jsdoc-var">this.selectorEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">im</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// so it does not capture click event for navitem.
  99
 100         //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 101
 102         </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">);
 103
 104
 105
 106     },
 107
 108
 109     </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">)
 110     {
 111         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 112
 113         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeselect'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
 114             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 115         }
 116
 117         </span><span class="jsdoc-var">this.selectorEl.dom.click</span><span class="jsdoc-syntax">();
 118
 119     },
 120
 121     </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">)
 122     {
 123         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 124
 125         </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">){
 126             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 127         }
 128         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.slice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectorEl.dom.files</span><span class="jsdoc-syntax">);
 129         </span><span class="jsdoc-var">this.selectorEl.dom.value  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;</span><span class="jsdoc-comment">// hopefully reset..
 130
 131         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'uploaded'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">);
 132
 133     },
 134
 135
 136
 137
 138     </span><span class="jsdoc-comment">/**
 139      * addCard - add an Attachment to the uploader
 140      * @param data - the data about the image to upload
 141      *
 142      * {
 143           id : 123
 144           title : &quot;Title of file&quot;,
 145           is_uploaded : false,
 146           src : &quot;http://.....&quot;,
 147           srcfile : { the File upload object },
 148           mimetype : file.type,
 149           preview : false,
 150           is_deleted : 0
 151           .. any other data...
 152         }
 153      *
 154      *
 155     */
 156
 157     </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 158     {
 159
 160          </span><span class="jsdoc-var">this.selectorEl
 161     </span><span class="jsdoc-syntax">}
 162
 163
 164
 165
 166 });
 167  </span></code></body></html>