Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
- this.imageCollection = new Roo.util.MixedCollection(function(r) { return r.data.id });
+ this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
+ return r.data.id
+ });
};
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button, {
+Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
errorTimeout : 3000,
images : false,
- imageCollection : false,
+ fileCollection : false,
+ allowBlank : true,
getAutoCreate : function()
{
- var btn = Roo.bootstrap.Button.prototype.getAutoCreate.call(this);
- btn.cls += ' w-100 mb-2';
- var cfg = {
- cls : 'roo-card-uploader-wrap',
+
+ var cfg = {
+ cls :'form-group' ,
cn : [
- btn,
+
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
{
- tag : 'input',
- cls : 'd-none roo-card-upload-selector',
+ tag: 'input',
+ type : 'hidden',
+ value : this.value,
+ cls : 'd-none form-control'
+ },
+
+ {
+ tag: 'input',
+ multiple : 'multiple',
type : 'file',
- multiple : 'multiple'
+ cls : 'd-none roo-card-upload-selector'
+ },
+
+ {
+ cls : 'roo-card-uploader-button-container w-100 mb-2'
},
{
cls : 'card-columns roo-card-uploader-container'
}
+
]
-
- }
+ };
+
+
return cfg;
},
return this.containerEl;
},
-
+ getButtonContainer : function() /// what children are added to.
+ {
+ return this.el.select(".roo-card-uploader-button-container").first();
+ },
+
initEvents : function()
{
- Roo.bootstrap.Button.prototype.initEvents.call(this);
+
+ Roo.bootstrap.Input.prototype.initEvents.call(this);
+
+ var t = this;
+ this.addxtype({
+ xns: Roo.bootstrap,
+
+ xtype : 'Button',
+ container_method : 'getButtonContainer' ,
+ html : 'Upload File / Images', // fix changable?
+ cls : 'w-100 ',
+ listeners : {
+ 'click' : function(btn, e) {
+ t.onClick(e);
+ }
+ }
+ })
+
+
+
+
this.urlAPI = (window.createObjectURL && window) ||
(window.URL && URL.revokeObjectURL && URL) ||
(window.webkitURL && webkitURL);
this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
- this.selectorEl.on('change', this.onFileSelected, this);
+ this.selectorEl.on('change', this.onFileSelected, this);
if (this.images) {
var t = this;
this.images.forEach(function(img) {
title : file.name,
mimetype : file.type,
preview : false,
+ is_deleted : 0
})
},
fa : 'times',
listeners : {
click : function() {
- this.removeCard(data.id)
+ t.removeCard(data.id)
}
}
}
closeable : true,
header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
header_image : data.mimetype.match(/image/) ? data.src : data.preview,
+ header_image_fit_square: true,
data : data,
html : false,
- listeners : {
- click : function() {
- // view..
+
+ items : footer,
+ initEvents : function() {
+ Roo.bootstrap.Card.prototype.initEvents.call(this);
+ this.imgEl = this.el.select('.card-img-top').first();
+ if (this.imgEl) {
+ this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
+ this.imgEl.set({ 'pointer' : 'cursor' });
+
}
- },
- items : footer
+
+ }
}
);
- this.items.push(cn);
+ // dont' really need ot update items.
+ // this.items.push(cn);
+ this.fileCollection.add(cn);
+ this.updateInput();
+
+ },
+ removeCard : function(id)
+ {
+
+ var card = this.fileCollection.get(id);
+ card.data.is_deleted = 1;
+ card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
+ this.fileCollection.remove(card);
+ //this.items = this.items.filter(function(e) { return e != card });
+ // dont' really need ot update items.
+ card.el.dom.parentNode.removeChild(card.el.dom);
+ },
+ reset: function()
+ {
+ this.fileCollection.each(function(card) {
+ card.el.dom.parentNode.removeChild(card.el.dom);
+ });
+ this.fileCollection.clear();
+ this.updateInput();
+ },
+
+ updateInput : function()
+ {
+ var data = [];
+ this.fileCollection.each(function(e) {
+ data.push(e.data);
+ });
+ this.inputEl().dom.value = JSON.stringify(data);
}