* @cfg {Number} minHeight default 300
* @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
* @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
*
* @constructor
* Create a new UploadCropbox
* @event exception
* Fire when get exception
* @param {Roo.bootstrap.UploadCropbox} this
- * @param {Object} options
+ * @param {XMLHttpRequest} xhr
*/
"exception" : true,
/**
* @param {Roo.bootstrap.UploadCropbox} this
* @param {String} pos
*/
- "rotate" : true
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true
});
this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
buttons : false,
canvasLoaded : false,
isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
getAutoCreate : function()
{
tag : 'div',
cls : 'roo-upload-cropbox',
cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
{
tag : 'div',
cls : 'roo-upload-cropbox-body',
this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+ this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.selectorEl.hide();
+
this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.bodyEl.on(mousewheel, this.onMouseWheel, this);
Roo.get(document).on('mouseup', this.onMouseUp, this);
}
+
+ this.selectorEl.on('change', this.onFileSelected, this);
},
reset : function()
this.cropData = false;
this.notifyEl.dom.innerHTML = this.emptyText;
+ this.selectorEl.dom.value = '';
+
},
resize : function()
beforeSelectFile : function(e)
{
- this.fireEvent('beforeselectfile', this);
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
},
trash : function(e)
onLoadCanvas : function()
{
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
+
this.bodyEl.un('click', this.beforeSelectFile, this);
this.notifyEl.hide();
this.thumbEl.show();
this.footerEl.show();
- this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
- this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-
this.baseRotateLevel();
if(this.isDocument){
this.cropData = canvas.toDataURL(this.cropType);
- this.fireEvent('crop', this, this.cropData);
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
},
},
+ process : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ 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;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ }
+
+ if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
+ formData.append(this.paramName, file, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
prepare : function(file)
{
this.file = false;
* @cfg {String} paramName default 'imageUpload'
* @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
* Fire before select file
* @param {Roo.bootstrap.DocumentManager} this
*/
- "beforeselectfile" : true
+ "beforeselectfile" : true,
+ /**
+ * @event process
+ * Fire before process file
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "process" : true
});
};
Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
- boxes : 12,
+ boxes : 0,
inputName : '',
- minWidth : 300,
- minHeight : 300,
thumbSize : 300,
multiple : true,
files : [],
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();
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)
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;
+
+ 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);
+ }
+
+ if(this.fireEvent('prepare', this, formData) != false){
+ this.xhr.send(formData);
+ };
}
});