teddyjas
7 Jul 2009, 5:39 AM
Hi guys,
I have created a simple extension for ExtJS for image file upload field extension for my own use which enables you to:
- validate image file extension (gif, jpeg & png)
- preview the image on the fly
- enable resizing on the fly
- get the image width and height
The extension is created on ExtJS 2.2, I have not tried using the ExtJS 3.0 yet :).
Currently the extension works on IE and Firefox/Mozilla.
http://www.jasin.biz/wp-includes/js/tinymce/plugins/wordpress/img/trans.gifIE Note: IE7 and above requires you to add the website url as an authorised sites to allow you to preview the image.
You can do this in Tools > Internet options > Security > Trusted sites > Sites
Here's the extension source code:
/**
* @class Ext.ux.form.ImageField
* @extends Ext.form.TextField
* This is a image file upload field
* @license: LGPLv3
* @author: Teddy A Jasin
* @constructor
* Creates a image field
* @param {Object} config Configuration options
* @version 1.0.0
*/
Ext.namespace("Ext.ux", "Ext.ux.form");
Ext.apply(Ext.form.VTypes, {
Image: function(v) {
v = v.replace(/^\s|\s$/g, ""); //trims string
if (v.match(/([^\/\\]+)\.(gif|png|jpg|jpeg)$/i) )
return true;
else
return false;
},
ImageText: 'Must be a valid image: gif,jpg,png,jpeg'
});
Ext.ux.form.Imagefield = Ext.extend(Ext.form.TextField, {
inputType:'file',
validationEvent:'all',
previewImage: true,
//only aplied of previewImage is true
forceUpload:false, //if set to true it will upload the image first to allow preview, if false will detect by browser and use upload when necessary
resizable:true,
//only applied if resizable is true
preserveRatio:true,
resizeHandles:'se',
pinned:true,
//if browser preview not supported, supply file upload url which return img path
imgPreviewUrl:'imgPreview.php',
initComponent : function(){
Ext.ux.form.Imagefield.superclass.initComponent.call(this);
this.on('blur',this.setPreview,this);
},
afterRender : function(){
Ext.ux.form.Imagefield.superclass.afterRender.call(this);
if (this.previewImage && !this.preview){
this.previewId = this.getId()+'-preview';
this.preview = Ext.DomHelper.insertAfter(this.getEl(),
{tag:'div',cls:'x-imagefield-preview',children:[
{tag:'div',children:[
{tag:'span',html:'',id:this.previewId+'-width',style:'margin:10px;'},
{tag:'span',html:'',id:this.previewId+'-height',style:'margin:10px;'}
]}
]}
);
this.maxPreviewWidth = Ext.get(this.preview).getWidth();
}
},
validateValue: function(value){
this.vtype = 'Image';
var valid=Ext.ux.form.Imagefield.superclass.validateValue.call(this,value);
return valid;
},
setPreview: function(){
if (Ext.isEmpty(this.getValue()) || !this.previewImage) return false;
if (this.preview && this.isValid() && !this.forceUpload){
if (!this.forceUpload){
//use browser preview if available
Ext.DomHelper.insertFirst(this.preview,{tag:'img',src:'images/spinner.gif',alt:'preview',id:this.previewId,style:'max-width:'+this.maxPreviewWidth+'px;'});
var previewImg = Ext.getDom(this.previewId);
if (Ext.isGecko3){
var file = this.getEl().dom.files[0];
previewImg.src = file.getAsDataURL();
this.updatePreviewSize();
this.setResizable();
}
else if (Ext.isIE){
if (!Ext.isIE6){
//non ie 6 requires sites to be added to trusted sites
previewImg.alt='If you are unable to view the image, ensure the site url is added to the trusted site';
}
var file = this.getValue();
previewImg.src = 'file://'+file;
this.updatePreviewSize();
this.setResizable();
}
else{
this.processUpload();
}
}else
this.processUpload();
}
},
processUpload: function(){
(function(){
Ext.Ajax.request({
form: this.ownerCt.getForm().id,
url: this.imgPreviewUrl,
isUpload: true,
method:'POST',
params: {'imagename':this.getId()},
success:function(action){
try {
var jsonData = Ext.util.JSON.decode(action.responseText);
}
catch (err) {
var jsonData = false;
}
if(jsonData && jsonData.success === true){
Ext.getDom(this.previewId).src=jsonData.preview;
this.updatePreviewSize();
this.setResizable();
}
},
scope:this
});
}).defer(100,this);
},
updatePreviewSize: function(){
var widthDom = Ext.getDom(this.previewId+'-width');
var heightDom = Ext.getDom(this.previewId+'-height');
var previewSize = Ext.fly(this.previewId).getSize();
widthDom.innerHTML = 'width:'+previewSize.width+'px';
this.previewWidth = previewSize.width;
heightDom.innerHTML = 'height:'+previewSize.height+'px';
this.previewHeight = previewSize.height;
this.validate();
},
setResizable:function(){
if (this.resizable)
this.updateResizer();
},
updateResizer:function(){
if (this.resizer)
this.resizer.destroy(true);
if(this.preview){
//had to do this as if image is not in browser cache, it will cause the image size not properly rendered
(function(){
this.resizer = new Ext.Resizable(this.previewId, {
handles: this.resizeHandles,
maxWidth:this.maxPreviewWidth,
pinned: this.pinned,
preserveRatio:this.preserveRatio,
wrap:true
});
this.resizer.on("resize",this.updatePreviewSize,this);
}).defer(100,this);
}
},
getPreviewSize:function(){
return {'width':this.previewWidth,'height':this.previewHeight};
}
});
Ext.reg('imagefield', Ext.ux.form.Imagefield);
Demo site:http://www.jasin.biz/playground/imagefield.html
(http://www.jasin.biz/playground/imagefield.html)
The extension stills need lots of torture testing and improvements, do help me improving it :)
hope this extension will help someone out there :). If anyone can point me the properties of file upload field for safari and chrome do let me know... thanks!.
I have created a simple extension for ExtJS for image file upload field extension for my own use which enables you to:
- validate image file extension (gif, jpeg & png)
- preview the image on the fly
- enable resizing on the fly
- get the image width and height
The extension is created on ExtJS 2.2, I have not tried using the ExtJS 3.0 yet :).
Currently the extension works on IE and Firefox/Mozilla.
http://www.jasin.biz/wp-includes/js/tinymce/plugins/wordpress/img/trans.gifIE Note: IE7 and above requires you to add the website url as an authorised sites to allow you to preview the image.
You can do this in Tools > Internet options > Security > Trusted sites > Sites
Here's the extension source code:
/**
* @class Ext.ux.form.ImageField
* @extends Ext.form.TextField
* This is a image file upload field
* @license: LGPLv3
* @author: Teddy A Jasin
* @constructor
* Creates a image field
* @param {Object} config Configuration options
* @version 1.0.0
*/
Ext.namespace("Ext.ux", "Ext.ux.form");
Ext.apply(Ext.form.VTypes, {
Image: function(v) {
v = v.replace(/^\s|\s$/g, ""); //trims string
if (v.match(/([^\/\\]+)\.(gif|png|jpg|jpeg)$/i) )
return true;
else
return false;
},
ImageText: 'Must be a valid image: gif,jpg,png,jpeg'
});
Ext.ux.form.Imagefield = Ext.extend(Ext.form.TextField, {
inputType:'file',
validationEvent:'all',
previewImage: true,
//only aplied of previewImage is true
forceUpload:false, //if set to true it will upload the image first to allow preview, if false will detect by browser and use upload when necessary
resizable:true,
//only applied if resizable is true
preserveRatio:true,
resizeHandles:'se',
pinned:true,
//if browser preview not supported, supply file upload url which return img path
imgPreviewUrl:'imgPreview.php',
initComponent : function(){
Ext.ux.form.Imagefield.superclass.initComponent.call(this);
this.on('blur',this.setPreview,this);
},
afterRender : function(){
Ext.ux.form.Imagefield.superclass.afterRender.call(this);
if (this.previewImage && !this.preview){
this.previewId = this.getId()+'-preview';
this.preview = Ext.DomHelper.insertAfter(this.getEl(),
{tag:'div',cls:'x-imagefield-preview',children:[
{tag:'div',children:[
{tag:'span',html:'',id:this.previewId+'-width',style:'margin:10px;'},
{tag:'span',html:'',id:this.previewId+'-height',style:'margin:10px;'}
]}
]}
);
this.maxPreviewWidth = Ext.get(this.preview).getWidth();
}
},
validateValue: function(value){
this.vtype = 'Image';
var valid=Ext.ux.form.Imagefield.superclass.validateValue.call(this,value);
return valid;
},
setPreview: function(){
if (Ext.isEmpty(this.getValue()) || !this.previewImage) return false;
if (this.preview && this.isValid() && !this.forceUpload){
if (!this.forceUpload){
//use browser preview if available
Ext.DomHelper.insertFirst(this.preview,{tag:'img',src:'images/spinner.gif',alt:'preview',id:this.previewId,style:'max-width:'+this.maxPreviewWidth+'px;'});
var previewImg = Ext.getDom(this.previewId);
if (Ext.isGecko3){
var file = this.getEl().dom.files[0];
previewImg.src = file.getAsDataURL();
this.updatePreviewSize();
this.setResizable();
}
else if (Ext.isIE){
if (!Ext.isIE6){
//non ie 6 requires sites to be added to trusted sites
previewImg.alt='If you are unable to view the image, ensure the site url is added to the trusted site';
}
var file = this.getValue();
previewImg.src = 'file://'+file;
this.updatePreviewSize();
this.setResizable();
}
else{
this.processUpload();
}
}else
this.processUpload();
}
},
processUpload: function(){
(function(){
Ext.Ajax.request({
form: this.ownerCt.getForm().id,
url: this.imgPreviewUrl,
isUpload: true,
method:'POST',
params: {'imagename':this.getId()},
success:function(action){
try {
var jsonData = Ext.util.JSON.decode(action.responseText);
}
catch (err) {
var jsonData = false;
}
if(jsonData && jsonData.success === true){
Ext.getDom(this.previewId).src=jsonData.preview;
this.updatePreviewSize();
this.setResizable();
}
},
scope:this
});
}).defer(100,this);
},
updatePreviewSize: function(){
var widthDom = Ext.getDom(this.previewId+'-width');
var heightDom = Ext.getDom(this.previewId+'-height');
var previewSize = Ext.fly(this.previewId).getSize();
widthDom.innerHTML = 'width:'+previewSize.width+'px';
this.previewWidth = previewSize.width;
heightDom.innerHTML = 'height:'+previewSize.height+'px';
this.previewHeight = previewSize.height;
this.validate();
},
setResizable:function(){
if (this.resizable)
this.updateResizer();
},
updateResizer:function(){
if (this.resizer)
this.resizer.destroy(true);
if(this.preview){
//had to do this as if image is not in browser cache, it will cause the image size not properly rendered
(function(){
this.resizer = new Ext.Resizable(this.previewId, {
handles: this.resizeHandles,
maxWidth:this.maxPreviewWidth,
pinned: this.pinned,
preserveRatio:this.preserveRatio,
wrap:true
});
this.resizer.on("resize",this.updatePreviewSize,this);
}).defer(100,this);
}
},
getPreviewSize:function(){
return {'width':this.previewWidth,'height':this.previewHeight};
}
});
Ext.reg('imagefield', Ext.ux.form.Imagefield);
Demo site:http://www.jasin.biz/playground/imagefield.html
(http://www.jasin.biz/playground/imagefield.html)
The extension stills need lots of torture testing and improvements, do help me improving it :)
hope this extension will help someone out there :). If anyone can point me the properties of file upload field for safari and chrome do let me know... thanks!.