PDA

View Full Version : Preview of image before upload



silve69
22 Jul 2009, 9:50 AM
Hi guys,

I have the follow code inside a form panel... the idea is upload a picture but show a picture preview before... but the code doesn't work.



...
some code here
...
{
xtype:'box',
id: 'box_content',
autoHeight: true,
autoEl:{
tag: 'img',
src:'../img/data/no_image_profile.jpg'
}
},{
xtype: 'fileuploadfield',
emptyText: 'Select your picture',
fieldLabel: 'Change Picture',
name: 'photo-path',
width: 400,
listeners: {
'fileselected': function(fb, v){
Ext.getCmp('box_content').getEl().dom.src = v;
}
}
}
...
some code here
...


Somebody know another way to do that, or can help me to fix the code??
Best regards,

Silver

VinylFox
22 Jul 2009, 1:14 PM
Unfortunately that will never fully work, since some browsers do not provide the full local file path. You could probably get it to work in older FireFox by appending 'file://' to the front of 'v', not sure what IE would do.

The only reliable way to get this to work is to actually upload the file and pull the preview image from the server. There is likely a way to do this using Flash as well.

silve69
22 Jul 2009, 3:03 PM
Thanks VinylFox,

But... how I can upload the file to server if I don't have the full path to the file?
Do you have some sample or link about this?

Best regards!!!

Lukman
22 Jul 2009, 3:32 PM
Thanks VinylFox,

But... how I can upload the file to server if I don't have the full path to the file?
Do you have some sample or link about this?

Best regards!!!
The browser does have the full path of the file since you specifically point to the file using the file browser dialog. It's just that it doesn't give javascript (the environment Ext JS is riding on) the access to that information, maybe due to security reasons.

silve69
22 Jul 2009, 5:12 PM
Thanks Lukman,

Do you have a sample of uploading files?
I tryed embeding html code inside the form panel (usign the "html" property) but I have problems referencing the browse dialog for obtain the file path.

Somebody have a sample, please?
Bests!!!

VinylFox
23 Jul 2009, 5:01 AM
Try this http://colinramsay.co.uk/screencasts/extjsupload/