7 * @class Roo.bootstrap.DocumentManager
8 * @extends Roo.bootstrap.Component
9 * Bootstrap DocumentManager class
10 * @cfg {String} paramName default 'imageUpload'
11 * @cfg {String} toolTipName default 'filename'
12 * @cfg {String} method default POST
13 * @cfg {String} url action url
14 * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
15 * @cfg {Boolean} multiple multiple upload default true
16 * @cfg {Number} thumbSize default 300
17 * @cfg {String} fieldLabel
18 * @cfg {Number} labelWidth default 4
19 * @cfg {String} labelAlign (left|top) default left
20 * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
21 * @cfg {Number} labellg set the width of label (1-12)
22 * @cfg {Number} labelmd set the width of label (1-12)
23 * @cfg {Number} labelsm set the width of label (1-12)
24 * @cfg {Number} labelxs set the width of label (1-12)
27 * Create a new DocumentManager
28 * @param {Object} config The config object
31 Roo.bootstrap.DocumentManager = function(config){
32 Roo.bootstrap.DocumentManager.superclass.constructor.call(this, config);
40 * Fire when initial the DocumentManager
41 * @param {Roo.bootstrap.DocumentManager} this
46 * inspect selected file
47 * @param {Roo.bootstrap.DocumentManager} this
53 * Fire when xhr load exception
54 * @param {Roo.bootstrap.DocumentManager} this
55 * @param {XMLHttpRequest} xhr
60 * Fire when xhr load exception
61 * @param {Roo.bootstrap.DocumentManager} this
62 * @param {XMLHttpRequest} xhr
67 * prepare the form data
68 * @param {Roo.bootstrap.DocumentManager} this
69 * @param {Object} formData
74 * Fire when remove the file
75 * @param {Roo.bootstrap.DocumentManager} this
76 * @param {Object} file
81 * Fire after refresh the file
82 * @param {Roo.bootstrap.DocumentManager} this
87 * Fire after click the image
88 * @param {Roo.bootstrap.DocumentManager} this
89 * @param {Object} file
94 * Fire when upload a image and editable set to true
95 * @param {Roo.bootstrap.DocumentManager} this
96 * @param {Object} file
100 * @event beforeselectfile
101 * Fire before select file
102 * @param {Roo.bootstrap.DocumentManager} this
104 "beforeselectfile" : true,
107 * Fire before process file
108 * @param {Roo.bootstrap.DocumentManager} this
109 * @param {Object} file
113 * @event previewrendered
114 * Fire when preview rendered
115 * @param {Roo.bootstrap.DocumentManager} this
116 * @param {Object} file
118 "previewrendered" : true,
121 "previewResize" : true
126 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
135 paramName : 'imageUpload',
136 toolTipName : 'filename',
149 getAutoCreate : function()
151 var managerWidget = {
153 cls : 'roo-document-manager',
157 cls : 'roo-document-manager-selector',
162 cls : 'roo-document-manager-uploader',
166 cls : 'roo-document-manager-upload-btn',
167 html : '<i class="fa fa-plus"></i>'
178 cls : 'column col-md-12',
183 if(this.fieldLabel.length){
188 cls : 'column col-md-12',
189 html : this.fieldLabel
193 cls : 'column col-md-12',
198 if(this.labelAlign == 'left'){
203 html : this.fieldLabel
212 if(this.labelWidth > 12){
213 content[0].style = "width: " + this.labelWidth + 'px';
216 if(this.labelWidth < 13 && this.labelmd == 0){
217 this.labelmd = this.labelWidth;
220 if(this.labellg > 0){
221 content[0].cls += ' col-lg-' + this.labellg;
222 content[1].cls += ' col-lg-' + (12 - this.labellg);
225 if(this.labelmd > 0){
226 content[0].cls += ' col-md-' + this.labelmd;
227 content[1].cls += ' col-md-' + (12 - this.labelmd);
230 if(this.labelsm > 0){
231 content[0].cls += ' col-sm-' + this.labelsm;
232 content[1].cls += ' col-sm-' + (12 - this.labelsm);
235 if(this.labelxs > 0){
236 content[0].cls += ' col-xs-' + this.labelxs;
237 content[1].cls += ' col-xs-' + (12 - this.labelxs);
245 cls : 'row clearfix',
253 initEvents : function()
255 this.managerEl = this.el.select('.roo-document-manager', true).first();
256 this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
258 this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
259 this.selectorEl.hide();
262 this.selectorEl.attr('multiple', 'multiple');
265 this.selectorEl.on('change', this.onFileSelected, this);
267 this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
268 this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
270 this.uploader.on('click', this.onUploaderClick, this);
272 this.renderProgressDialog();
276 window.addEventListener("resize", function() { _this.refresh(); } );
278 this.fireEvent('initial', this);
281 renderProgressDialog : function()
285 this.progressDialog = new Roo.bootstrap.Modal({
286 cls : 'roo-document-manager-progress-dialog',
298 btnclick : function() {
299 _this.uploadCancel();
305 this.progressDialog.render(Roo.get(document.body));
307 this.progress = new Roo.bootstrap.Progress({
308 cls : 'roo-document-manager-progress',
313 this.progress.render(this.progressDialog.getChildContainer());
315 this.progressBar = new Roo.bootstrap.ProgressBar({
316 cls : 'roo-document-manager-progress-bar',
323 this.progressBar.render(this.progress.getChildContainer());
326 onUploaderClick : function(e)
330 if(this.fireEvent('beforeselectfile', this) != false){
331 this.selectorEl.dom.click();
336 onFileSelected : function(e)
340 if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
344 Roo.each(this.selectorEl.dom.files, function(file){
345 if(this.fireEvent('inspect', this, file) != false){
346 this.files.push(file);
356 this.selectorEl.dom.value = '';
358 if(!this.files || !this.files.length){
362 if(this.boxes > 0 && this.files.length > this.boxes){
363 this.files = this.files.slice(0, this.boxes);
366 this.uploader.show();
368 if(this.boxes > 0 && this.files.length > this.boxes - 1){
369 this.uploader.hide();
378 Roo.each(this.files, function(file){
380 if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
381 var f = this.renderPreview(file);
386 if(file.type.indexOf('image') != -1){
390 }).createDelegate(this)
399 }).createDelegate(this)
406 this.delegates = this.delegates.concat(docs);
408 if(!this.delegates.length){
413 this.progressBar.aria_valuemax = this.delegates.length;
422 if(!this.delegates.length){
423 this.progressDialog.hide();
428 var delegate = this.delegates.shift();
430 this.progressDialog.show();
432 this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
434 this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
441 this.uploader.show();
443 if(this.boxes > 0 && this.files.length > this.boxes - 1){
444 this.uploader.hide();
447 Roo.isTouch ? this.closable(false) : this.closable(true);
449 this.fireEvent('refresh', this);
452 onRemove : function(e, el, o)
456 this.fireEvent('remove', this, o);
464 Roo.each(this.files, function(file){
465 if(typeof(file.id) == 'undefined' || file.id * 1 < 1 || file.id != o.id){
481 Roo.each(this.files, function(file){
486 file.target.remove();
495 onClick : function(e, el, o)
499 this.fireEvent('click', this, o);
503 closable : function(closable)
505 Roo.each(this.managerEl.select('.roo-document-manager-preview > button.close', true).elements, function(el){
507 el.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
519 xhrOnLoad : function(xhr)
521 Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
525 if (xhr.readyState !== 4) {
527 this.fireEvent('exception', this, xhr);
531 var response = Roo.decode(xhr.responseText);
533 if(!response.success){
535 this.fireEvent('exception', this, xhr);
539 var file = this.renderPreview(response.data);
541 this.files.push(file);
545 this.fireEvent('afterupload', this, xhr);
549 xhrOnError : function(xhr)
551 Roo.log('xhr on error');
553 var response = Roo.decode(xhr.responseText);
560 process : function(file)
562 if(this.fireEvent('process', this, file) !== false){
563 if(this.editable && file.type.indexOf('image') != -1){
564 this.fireEvent('edit', this, file);
568 this.uploadStart(file, false);
575 uploadStart : function(file, crop)
577 this.xhr = new XMLHttpRequest();
579 if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
586 this.managerEl.createChild({
588 cls : 'roo-document-manager-loading',
593 cls : 'roo-document-manager-thumb',
594 html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
600 this.xhr.open(this.method, this.url, true);
603 "Accept": "application/json",
604 "Cache-Control": "no-cache",
605 "X-Requested-With": "XMLHttpRequest"
608 for (var headerName in headers) {
609 var headerValue = headers[headerName];
611 this.xhr.setRequestHeader(headerName, headerValue);
617 this.xhr.onload = function()
619 _this.xhrOnLoad(_this.xhr);
622 this.xhr.onerror = function()
624 _this.xhrOnError(_this.xhr);
627 var formData = new FormData();
629 formData.append('returnHTML', 'NO');
632 formData.append('crop', crop);
635 formData.append(this.paramName, file, file.name);
642 if(this.fireEvent('prepare', this, formData, options) != false){
644 if(options.manually){
648 this.xhr.send(formData);
655 uploadCancel : function()
663 Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
670 renderPreview : function(file)
672 if(typeof(file.target) != 'undefined' && file.target){
676 var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
678 var previewEl = this.managerEl.createChild({
680 cls : 'roo-document-manager-preview',
684 tooltip : file[this.toolTipName],
685 cls : 'roo-document-manager-thumb',
686 html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
691 html : '<i class="fa fa-times-circle"></i>'
696 var close = previewEl.select('button.close', true).first();
698 close.on('click', this.onRemove, this, file);
700 file.target = previewEl;
702 var image = previewEl.select('img', true).first();
706 image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
708 image.on('click', this.onClick, this, file);
710 this.fireEvent('previewrendered', this, file);
716 onPreviewLoad : function(file, image)
718 if(typeof(file.target) == 'undefined' || !file.target){
722 var width = image.dom.naturalWidth || image.dom.width;
723 var height = image.dom.naturalHeight || image.dom.height;
725 if(!this.previewResize) {
730 file.target.addClass('wide');
734 file.target.addClass('tall');
739 uploadFromSource : function(file, crop)
741 this.xhr = new XMLHttpRequest();
743 this.managerEl.createChild({
745 cls : 'roo-document-manager-loading',
750 cls : 'roo-document-manager-thumb',
751 html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
757 this.xhr.open(this.method, this.url, true);
760 "Accept": "application/json",
761 "Cache-Control": "no-cache",
762 "X-Requested-With": "XMLHttpRequest"
765 for (var headerName in headers) {
766 var headerValue = headers[headerName];
768 this.xhr.setRequestHeader(headerName, headerValue);
774 this.xhr.onload = function()
776 _this.xhrOnLoad(_this.xhr);
779 this.xhr.onerror = function()
781 _this.xhrOnError(_this.xhr);
784 var formData = new FormData();
786 formData.append('returnHTML', 'NO');
788 formData.append('crop', crop);
790 if(typeof(file.filename) != 'undefined'){
791 formData.append('filename', file.filename);
794 if(typeof(file.mimetype) != 'undefined'){
795 formData.append('mimetype', file.mimetype);
800 if(this.fireEvent('prepare', this, formData) != false){
801 this.xhr.send(formData);