PDA

View Full Version : load image in FORM



sagardash
21 Jul 2010, 5:17 AM
Hi

i want to load image that is present in db,and change it by using the upload option(browse button)

please need help... THANKS

21559

Aero
21 Jul 2010, 5:48 AM
You have the image in a db ? As a Blob or a ref (string) to it ?

You have already made the anchor layout so the box (image-holder) is postioned correctly?.

If so I would use something simple as a xtype box




{xtype: 'box',
id:'pixbox',
autoEl: {

tag: 'img',

src:'defaultImage.jpg'
// or url src: 'url'
}
}

Using an handler on the button and change the pic,ref to the uploaded path



Ext.get('pixbox').dom.src = 'myNewPic.jpg.';

sagardash
21 Jul 2010, 6:00 AM
thanks for reply..

ya i want this url src:'url'

but how to call this url..

the image already stored in server in one folder.. while fetching i am getting the image name also..
but how to show that image in that place i am wondering

Aero
21 Jul 2010, 6:36 AM
Yeah, i understand, you want to show current image in the box.

Well,as you said you have the image url path in the Db table you just need to fetch based on some params,userID for instance,right ?

When you open that dialogwindow or an any event you need to make a AJAX request to a server side scipt that return (echo) the path. In order to get the image-url-path (the o.responseText):



Ext.Ajax.request({
url : 'http://your-url/ajaxtest.php' ,
params : { action : 'getUserPic' },
method: 'GET',

success:function(o){
if (o.responseText == '') {
Ext.Msg.alert('Failed', "You have no image in our Db",function(btn, text){
if (btn == 'ok'){

} });

} else {

Ext.get('pixbox').dom.src = o.responseText


} });



might not work becuase of }) all i have in the example.

Aero
21 Jul 2010, 6:43 AM
Yes, you need to fetch the url-image-path from a server-side script (echo) by doing a AJAXrequest and look at the response and decide what to do with it...change the src:to the responsetext for instance. So upon any event with the window/panel-dialog send a request for the image path




Ext.Ajax.request({
url : 'http://your-url/giveMePic.php' ,
params : { action : 'getUserPic' },
method: 'GET',

success:function(o){
if (o.responseText == '') {

Ext.Msg.alert('Failed', "No image saved ",function(btn, text){

if (btn == 'ok'){


} });


} else {


Ext.get('pixbox').dom.src = responseText;

);
}
},

Condor
21 Jul 2010, 11:02 PM
So you are looking for an ImageField component. I'm sure there is one in the user extensions forum.

sagardash
21 Jul 2010, 11:27 PM
here the image is coming while loading...

but if i want to upload image its not changing...please need help



<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var picBox = {
columnWidth: '100 px',
bodyStyle: 'padding:10px',
items: [
{ xtype: 'box',
autoEl: { tag: 'div',

html: '<img id="pic" src="../images/'+ Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
}
}
]
}

var picFiles = {
columnWidth: .65,
layout: 'form',
labelAlign:'top',
items: [{
xtype: 'textfield',
fieldLabel: 'Current',
labelSeparator: '',
name: 'currPic',
id:'currPic',
readOnly: true,
disabled:true,
anchor:'100%'
},
{
xtype: 'textfield',
fieldLabel: 'New (JPG or PNG only)',
labelSeparator: '',
name: 'newPic',
id:'newPic',
style:'width: 300px',
inputType: 'file',
allowBlank: false
}]
}


function validateFileExtension(fileName) {
var exp = /^.*.(jpg|JPG|png|PNG|txt|TXT)$/;
return (exp.test(fileName));
}

var pictUploadForm = new Ext.FormPanel({
frame: true,
renderTo : Ext.getBody(),
title: 'Change Picture',
bodyStyle: 'padding:5px',
width: 420,
layout: 'column',

url: 'data2.txt', //{success:true,data:{contactId:'',file:'CTK SOFT Logo.jpg'}}

method: 'POST',
fileUpload: true,
items: [picBox, picFiles],
buttons: [{
text: 'Upload Picture',
handler: function() {
var theForm = pictUploadForm.getForm();
if (!theForm.isValid()) {
Ext.MessageBox.alert('Change Picture',
'Please select a picture');
return;
}
if (!validateFileExtension(Ext.getDom('newPic').value)) {
Ext.MessageBox.alert('Change Picture',
'Only JPG or PNG, please.');
return;
}
theForm.submit({
params: { act: 'setPicture', id: 'contact1' },
//waitMsg: 'Uploading picture'
})
}
},
{
text: 'Cancel'
}]
});
pictUploadForm.on({
actioncomplete: function(form, action) {
if (action.type == 'load') {
var pic = action.result.data;
alert(pic.file);
Ext.getDom('pic').src = pic.file;
Ext.getCmp('currPic').setValue(pic.file);
}
if (action.type == 'submit') {
var pic = action.result.data;
alert(pic.file);
Ext.getDom('pic').src = pic.file;
Ext.getCmp('currPic').setValue(pic.file);
Ext.getDom('newPic').value = '';
}
}
});
//pictUploadForm.render(document.body);
pictUploadForm.getForm().load({
params: { act: 'getPicture',id: 'contact1'},
//waitMsg: 'Loading'
});


});

</script>


THANKS

sagardash
22 Jul 2010, 6:31 AM
any one please help me regarding this ...please