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  * @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 Roo.bootstrap.ButtonUploader = function(config){
  23
  24
  25
  26     Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
  27
  28
  29      this.addEvents({
  30          // 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         'beforeselect' : true,
  38          /**
  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         'uploaded' : true
  45
  46     });
  47 };
  48
  49 Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button,  {
  50
  51
  52     errorTimeout : 3000,
  53
  54     images : false,
  55
  56     fileCollection : false,
  57     allowBlank : true,
  58
  59     multiple : true,
  60
  61     getAutoCreate : function()
  62     {
  63
  64
  65         return  {
  66             cls :'div' ,
  67             cn : [
  68                 Roo.bootstrap.Button.prototype.getAutoCreate.call(this)
  69             ]
  70         };
  71
  72
  73     },
  74
  75
  76     initEvents : function()
  77     {
  78
  79         Roo.bootstrap.Button.prototype.initEvents.call(this);
  80
  81
  82
  83
  84
  85         this.urlAPI = (window.createObjectURL && window) ||
  86                                 (window.URL && URL.revokeObjectURL && URL) ||
  87                                 (window.webkitURL && webkitURL);
  88
  89         var im = {
  90             tag: 'input',
  91             type : 'file',
  92             cls : 'd-none  roo-card-upload-selector'
  93
  94         };
  95         if (this.multiple) {
  96             im.multiple = 'multiple';
  97         }
  98         this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem.
  99
 100         //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 101
 102         this.selectorEl.on('change', this.onFileSelected, this);
 103
 104
 105
 106     },
 107
 108
 109     onClick : function(e)
 110     {
 111         e.preventDefault();
 112
 113         if ( this.fireEvent('beforeselect', this) === false) {
 114             return;
 115         }
 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         var files = Array.prototype.slice.call(this.selectorEl.dom.files);
 129         this.selectorEl.dom.value  = '';// hopefully reset..
 130
 131         this.fireEvent('uploaded', this,  files );
 132
 133     },
 134
 135
 136
 137
 138     /**
 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 : "Title of file",
 145           is_uploaded : false,
 146           src : "http://.....",
 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     reset: function()
 158     {
 159
 160          this.selectorEl
 161     }
 162
 163
 164
 165
 166 });
 167