* @extends Roo.bootstrap.Component
* Bootstrap DocumentManager class
* @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} toolTipName default 'filename'
* @cfg {String} method default POST
* @cfg {String} url action url
- * @cfg {Number} boxes number of boxes default 12
+ * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
* @cfg {Boolean} multiple multiple upload default true
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
* @cfg {Number} thumbSize default 300
* @cfg {String} fieldLabel
* @cfg {Number} labelWidth default 4
* @cfg {String} labelAlign (left|top) default left
* @cfg {Boolean} editable (true|false) allow edit when upload a image default true
+* @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
*
* @constructor
* Create a new DocumentManager
Roo.bootstrap.DocumentManager = function(config){
Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
+ this.files = [];
+ this.delegates = [];
+
this.addEvents({
/**
* @event initial
* @param {XMLHttpRequest} xhr
*/
"exception" : true,
+ /**
+ * @event afterupload
+ * Fire when xhr load exception
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {XMLHttpRequest} xhr
+ */
+ "afterupload" : true,
/**
* @event prepare
* prepare the form data
* @param {Roo.bootstrap.DocumentManager} this
* @param {Object} file
*/
- "edit" : true
+ "edit" : true,
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.bootstrap.DocumentManager} this
+ */
+ "beforeselectfile" : true,
+ /**
+ * @event process
+ * Fire before process file
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "process" : true,
+ /**
+ * @event previewrendered
+ * Fire when preview rendered
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "previewrendered" : true,
+ /**
+ */
+ "previewResize" : true
});
};
Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
- boxes : 12,
+ boxes : 0,
inputName : '',
- minWidth : 300,
- minHeight : 300,
thumbSize : 300,
multiple : true,
- files : [],
+ files : false,
method : 'POST',
url : '',
paramName : 'imageUpload',
+ toolTipName : 'filename',
fieldLabel : '',
labelWidth : 4,
labelAlign : 'left',
editable : true,
- delegates : [],
+ delegates : false,
+ xhr : false,
+
+ labellg : 0,
+ labelmd : 0,
+ labelsm : 0,
+ labelxs : 0,
getAutoCreate : function()
{
content = [
{
tag : 'div',
- cls : 'column col-md-' + this.labelWidth,
+ cls : 'column',
html : this.fieldLabel
},
{
tag : 'div',
- cls : 'column col-md-' + (12 - this.labelWidth),
+ cls : 'column',
cn : managerWidget
}
];
+ if(this.labelWidth > 12){
+ content[0].style = "width: " + this.labelWidth + 'px';
+ }
+
+ if(this.labelWidth < 13 && this.labelmd == 0){
+ this.labelmd = this.labelWidth;
+ }
+
+ if(this.labellg > 0){
+ content[0].cls += ' col-lg-' + this.labellg;
+ content[1].cls += ' col-lg-' + (12 - this.labellg);
+ }
+
+ if(this.labelmd > 0){
+ content[0].cls += ' col-md-' + this.labelmd;
+ content[1].cls += ' col-md-' + (12 - this.labelmd);
+ }
+
+ if(this.labelsm > 0){
+ content[0].cls += ' col-sm-' + this.labelsm;
+ content[1].cls += ' col-sm-' + (12 - this.labelsm);
+ }
+
+ if(this.labelxs > 0){
+ content[0].cls += ' col-xs-' + this.labelxs;
+ content[1].cls += ' col-xs-' + (12 - this.labelxs);
+ }
+
}
}
this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
- this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl.hide();
if(this.multiple){
this.progressDialog = new Roo.bootstrap.Modal({
cls : 'roo-document-manager-progress-dialog',
allow_close : false,
+ animate : false,
title : '',
buttons : [
{
this.progress = new Roo.bootstrap.Progress({
cls : 'roo-document-manager-progress',
active : true,
- striped : true,
+ striped : true
});
this.progress.render(this.progressDialog.getChildContainer());
onUploaderClick : function(e)
{
e.preventDefault();
- this.selectorEl.dom.click();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+
},
onFileSelected : function(e)
{
this.selectorEl.dom.value = '';
- if(!this.files.length){
+ if(!this.files || !this.files.length){
return;
}
- if(this.files.length > this.boxes){
+ if(this.boxes > 0 && this.files.length > this.boxes){
this.files = this.files.slice(0, this.boxes);
}
this.uploader.show();
- if(this.files.length > this.boxes - 1){
+ if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
var files = [];
+ var docs = [];
+
Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
return;
}
- this.delegates.push(
+ if(file.type.indexOf('image') != -1){
+ this.delegates.push(
+ (function(){
+ _this.process(file);
+ }).createDelegate(this)
+ );
+
+ return;
+ }
+
+ docs.push(
(function(){
_this.process(file);
}).createDelegate(this)
this.files = files;
+ this.delegates = this.delegates.concat(docs);
+
if(!this.delegates.length){
this.refresh();
return;
{
this.uploader.show();
- if(this.files.length > this.boxes - 1){
+ if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
this.refresh();
},
+ clear : function()
+ {
+ Roo.each(this.files, function(file){
+ if(!file.target){
+ return;
+ }
+
+ file.target.remove();
+
+ }, this);
+
+ this.files = [];
+
+ this.refresh();
+ },
+
onClick : function(e, el, o)
{
e.preventDefault();
this.arrange();
+ this.fireEvent('afterupload', this, xhr);
+
},
- xhrOnError : function()
+ xhrOnError : function(xhr)
{
Roo.log('xhr on error');
process : function(file)
{
- if(this.editable && file.type.indexOf('image') != -1){
- this.fireEvent('edit', this, file);
+ if(this.fireEvent('process', this, file) !== false){
+ if(this.editable && file.type.indexOf('image') != -1){
+ this.fireEvent('edit', this, file);
+ return;
+ }
+
+ this.uploadStart(file, false);
+
return;
}
- this.uploadStart(file, false);
-
- return;
},
uploadStart : function(file, crop)
formData.append(this.paramName, file, file.name);
- if(this.fireEvent('prepare', this, formData) != false){
+ var options = {
+ file : file,
+ manually : false
+ };
+
+ if(this.fireEvent('prepare', this, formData, options) != false){
+
+ if(options.manually){
+ return;
+ }
+
this.xhr.send(formData);
+ return;
};
+
+ this.uploadCancel();
},
uploadCancel : function()
{
- this.xhr.abort();
+ if (this.xhr) {
+ this.xhr.abort();
+ }
this.delegates = [];
renderPreview : function(file)
{
- var _this = this;
-
- var imageEl = document.createElement('img');
-
- var _this = this;
-
- imageEl.addEventListener("load", function(){ return _this.drawPreview(imageEl); });
-
- this.imageEl.src = baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename;
+ if(typeof(file.target) != 'undefined' && file.target){
+ return file;
+ }
- },
-
- drawPreview : function(imageEl)
- {
- var width = this.imageEl.naturalWidth || this.imageEl.width;
- var height = this.imageEl.naturalHeight || this.imageEl.height;
+ var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
- var preview = {
+ var previewEl = this.managerEl.createChild({
tag : 'div',
- cls : 'roo-document-manager-preview tall',
+ cls : 'roo-document-manager-preview',
cn : [
{
tag : 'div',
- tooltip : file.filename,
+ tooltip : file[this.toolTipName],
cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
+ html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
},
{
tag : 'button',
cls : 'close',
- html : 'x'
+ html : '<i class="fa fa-times-circle"></i>'
}
]
+ });
+
+ var close = previewEl.select('button.close', true).first();
+
+ close.on('click', this.onRemove, this, file);
+
+ file.target = previewEl;
+
+ var image = previewEl.select('img', true).first();
+
+ var _this = this;
+
+ image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
+
+ image.on('click', this.onClick, this, file);
+
+ this.fireEvent('previewrendered', this, file);
+
+ return file;
+
+ },
+
+ onPreviewLoad : function(file, image)
+ {
+ if(typeof(file.target) == 'undefined' || !file.target){
+ return;
+ }
+
+ var width = image.dom.naturalWidth || image.dom.width;
+ var height = image.dom.naturalHeight || image.dom.height;
+
+ if(!this.previewResize) {
+ return;
}
if(width > height){
- preview = {
- tag : 'div',
- cls : 'roo-document-manager-preview wide',
- cn : [
- {
- tag : 'div',
- tooltip : file.filename,
- cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
- },
- {
- tag : 'button',
- cls : 'close',
- html : 'x'
- }
- ]
+ file.target.addClass('wide');
+ return;
+ }
+
+ file.target.addClass('tall');
+ return;
+
+ },
+
+ uploadFromSource : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ this.managerEl.createChild({
+ tag : 'div',
+ cls : 'roo-document-manager-loading',
+ cn : [
+ {
+ tag : 'div',
+ tooltip : file.name,
+ cls : 'roo-document-manager-thumb',
+ html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
+ }
+ ]
+
+ });
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
}
}
+ var _this = this;
- Roo.log('on preview load');
- Roo.log(this);
- Roo.log(image.dom.naturalWidth);
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ formData.append('crop', crop);
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ Roo.log(formData);
+ if(this.fireEvent('prepare', this, formData) != false){
+ this.xhr.send(formData);
+ };
}
});