Custom Widget with SmartImage is not working

[Former Community Member]

I am looking for custom widget with smart image. using this i can drag and drop the images from CF or upload it directly.
I tried creating it but i see the blank Image Panel with no option to upload or drag and drop.

            this.file = new CQ.html5.form.SmartFile({
                cls: "HCW-QuickFact-6",                
                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",
                            xtype: "html5smartimage",
                            listeners : {
                                change : {
                                    scope : this,
                                    fn : this.updateHidden
                                },

                                dialogclose : {
                                    scope : this,
                                    fn : this.updateHidden
                                }

                            }

                        });
            this.add(this.file);

Please help me how to solve this issue.

[smacdonald2008 · Accepted solution]

To learn how to create a custom widget for CQ that lets you hook into the Content Finder and use images, see this community article:

http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-cq-widget-that-supports-image.html

This will explain how to create an widget such as:

[img]Content.png[/img]

Notice how you can drag an images from the content finder to the widget.

HTH

Scott