Image is not showing up on Dialog.

Question

Hi Guys
I am getting problem with Dialog. In my Dialog I have created the image field which accepts image from dam by Drag and drop. Whil Iam dropping the image it is showing up inside the Dialog properly and is showing up on the screen also But when I try to edit the image the current image got vanished inside the dialog. I don't understand why it is happening?
while uploading
The above image is not showing up while editing. Could you please help me where I am doing wrong?
here is my dialog.xml
<normalmode
jcr:primaryType="cq:Widget"
collapsed="{Boolean}false"
collapsible="{Boolean}false"
hidden="{Boolean}false"
title="Picture Properties"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<pictureurl
jcr:primaryType="cq:Widget"
allowUpload="{Boolean}true"
autoUploadDelay="1"
ddGroups="[media]"
fieldLabel="Picture Link"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
height="{Long}200"
name="./file"
requestSuffix="/image.img.png"
rootpath="/etc/designs/aib/business/images"
sizeLimit="100"
uploadUrl="/tmp/upload_test/*"
xtype="html5smartimage"/>
<picturealttext
jcr:primaryType="cq:Widget"
fieldLabel="Picture Alt Text"
name="./picturealttext"
xtype="textfield"/>
<picturetitletext
jcr:primaryType="cq:Widget"
fieldLabel="Picture Title Text"
name="./picturetitletext"
xtype="textfield"/>
</items>
</normalmode>
Cheers
Kirthi

Answer 1

Hi Jitendra,
It worked.Perfect. Thank you very much. I want to implement the same in my Custom widget which contains smartimage. But it is not showing up. Here is my Custom widget code for the smartfile but iam not getting Drag and drop jus it is showing up blank. Any idea how can I incorporate the smartfile in my Custom widget.
// Picture URL
                        this.add(new CQ.Ext.form.Label( {
                            cls : "customwidget-label",
                            text : ""
                        this.bannerImageURL = new CQ.form.SmartFile( {
                            cls : "customwidget-1",
                            fieldLabel : "Picture Link: ",
                            editable:false,
                            allowBlank : false,
                            anchor: '75%',
                            maxLength : 100,
                            cropParameter :"./image/imageCrop",
                            ddGroups : "media",
                            fileNameParameter : "./image/fileName",
                            fileReferenceParameter : "./image/fileReference",
                            mapParameter :"./image/imageMap",
                            rotateParameter : "./image/imageRotate",
                            name : "./image/file",
                            requestSuffix : "/image.img.png",
                            sizeLimit : "100",
                            autoUploadDelay : "1",
                            listeners : {
                                change : {
                                    scope : this,
                                    fn : this.updateHidden
                                dialogclose : {
                                    scope : this,
                                    fn : this.updateHidden
                        this.add(this.bannerImageURL);
Once again thanks for helping me to resolve the issue. The above is another requirement. Any ideas?
Cheers
Kirthi