Preview of image before upload

[silve69]

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]

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]

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]

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]

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]

Try this http://colinramsay.co.uk/screencasts/extjsupload/