* @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
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
*
* @constructor
* Create a new UploadCropbox
* @event exception
* Fire when get exception
* @param {Roo.bootstrap.UploadCropbox} this
- * @param {Object} options
+ * @param {XMLHttpRequest} xhr
*/
"exception" : true,
/**
*/
"rotate" : true,
/**
- * @event exception
- * Fire when xhr load exception
+ * @event inspect
+ * Fire when inspect the file
* @param {Roo.bootstrap.UploadCropbox} this
- * @param {XMLHttpRequest} xhr
+ * @param {Object} file
*/
- "exception" : true,
+ "inspect" : true,
/**
* @event upload
* Fire when xhr upload the file
* @param {Roo.bootstrap.UploadCropbox} this
* @param {Object} data
*/
- "upload" : true
+ "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',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
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',
style : 'cursor:pointer',
cn : [
- {
- tag : 'input',
- cls : 'roo-upload-cropbox-selector',
- type : 'file'
- },
{
tag : 'div',
cls : 'roo-upload-cropbox-preview'
}, this);
}
+
+ if(this.loadMask){
+ this.maskEl = this.el;
+ }
},
initEvents : function()
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.cropData = false;
this.notifyEl.dom.innerHTML = this.emptyText;
+ this.selectorEl.dom.value = '';
+
},
resize : function()
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.canvasLoaded = true;
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
},
setCanvasPosition : function()
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()
+ process : function(file, crop)
{
- this.xhr = new XMLHttpRequest();
-
- if(typeof(this.file.id) != 'undefined' && this.file.id * 1 > 0){
- return;
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
}
+ this.xhr = new XMLHttpRequest();
+
file.xhr = this.xhr;
this.xhr.open(this.method, this.url, true);
formData.append('crop', crop);
}
- formData.append(this.paramName, file, file.name);
+ if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
+ formData.append(this.paramName, file, file.name);
+ }
- if(this.fireEvent('prepare', this, formData) != false){
+ 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(this.loadMask){
+ this.maskEl.unmask();
+ }
+
if (xhr.readyState !== 4) {
this.fireEvent('exception', this, xhr);
return;
xhrOnError : function()
{
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
Roo.log('xhr on error');
var response = Roo.decode(xhr.responseText);
prepare : function(file)
{
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
this.file = false;
this.exif = {};