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             var url = this.urlAPI.createObjectURL(file); // not sure...
 134             this.fireEvent('uploaded', this, [file, url]);
 135         }, this);
 136
 137     },
 138
 139
 140
 141
 142     /**
 143      * addCard - add an Attachment to the uploader
 144      * @param data - the data about the image to upload
 145      *
 146      * {
 147           id : 123
 148           title : "Title of file",
 149           is_uploaded : false,
 150           src : "http://.....",
 151           srcfile : { the File upload object },
 152           mimetype : file.type,
 153           preview : false,
 154           is_deleted : 0
 155           .. any other data...
 156         }
 157      *
 158      *
 159     */
 160
 161     reset: function()
 162     {
 163
 164          this.selectorEl
 165     }
 166
 167
 168
 169
 170 });
 171