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
  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.CardUploader.superclass.constructor.call(this, config);
  27
  28
  29     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
  30         return r.data.id
  31      });
  32
  33      this.addEvents({
  34          // raw events
  35         /**
  36          * @event beforeselect
  37          * When button is pressed, before show upload files dialog is shown
  38          * @param {Roo.bootstrap.UploaderButton} this
  39          *
  40          */
  41         'beforeselect' : true,
  42          /**
  43          * @event fired when files have been selected,
  44          * When a the download link is clicked
  45          * @param {Roo.bootstrap.Card} this
  46          * @param {Object} The image information data  contains
  47          */
  48         'uploaded' : true
  49
  50     });
  51 };
  52
  53 Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
  54
  55
  56     errorTimeout : 3000,
  57
  58     images : false,
  59
  60     fileCollection : false,
  61     allowBlank : true,
  62
  63     getAutoCreate : function()
  64     {
  65
  66
  67         return  {
  68             cls :'div' ,
  69             cn : [
  70                 Roo.bootstrap.Button.prototype.getAutoCreate(),
  71                 {
  72                     tag: 'input',
  73                     multiple : 'multiple',
  74                     type : 'file',
  75                     cls : 'd-none  roo-card-upload-selector'
  76
  77                 }
  78
  79
  80             ]
  81         };
  82
  83
  84     },
  85
  86
  87     initEvents : function()
  88     {
  89
  90         Roo.bootstrap.Button.prototype.initEvents.call(this);
  91
  92
  93
  94
  95
  96         this.urlAPI = (window.createObjectURL && window) ||
  97                                 (window.URL && URL.revokeObjectURL && URL) ||
  98                                 (window.webkitURL && webkitURL);
  99
 100
 101
 102
 103         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
 104
 105         this.selectorEl.on('change', this.onFileSelected, this);
 106
 107
 108
 109     },
 110
 111
 112     onClick : function(e)
 113     {
 114         e.preventDefault();
 115
 116         if ( this.fireEvent('beforeselect', this) === false) {
 117             return;
 118         }
 119
 120         this.selectorEl.dom.click();
 121
 122     },
 123
 124     onFileSelected : function(e)
 125     {
 126         e.preventDefault();
 127
 128         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 129             return;
 130         }
 131
 132         Roo.each(this.selectorEl.dom.files, function(file){
 133             this.fireEvent('uploaded', this, [file]);
 134         }, this);
 135
 136     },
 137
 138
 139
 140
 141
 142     addFile : function(file)
 143     {
 144
 145         if(typeof(file) === 'string'){
 146             throw "Add file by name?"; // should not happen
 147             return;
 148         }
 149
 150         if(!file || !this.urlAPI){
 151             return;
 152         }
 153
 154         // file;
 155         // file.type;
 156
 157         var _this = this;
 158
 159
 160         var url = _this.urlAPI.createObjectURL( file);
 161
 162
 163     },
 164
 165     /**
 166      * addCard - add an Attachment to the uploader
 167      * @param data - the data about the image to upload
 168      *
 169      * {
 170           id : 123
 171           title : "Title of file",
 172           is_uploaded : false,
 173           src : "http://.....",
 174           srcfile : { the File upload object },
 175           mimetype : file.type,
 176           preview : false,
 177           is_deleted : 0
 178           .. any other data...
 179         }
 180      *
 181      *
 182     */
 183
 184     reset: function()
 185     {
 186
 187          this.selectorEl
 188     }
 189
 190
 191
 192
 193 });
 194