html5smartimage : Using pathfield as source of image , by disabling drap-drop

Question

I would like to use html5smartimage widget without letting the users upload images from their desktop and also avoid using the contentfinder. I created a dialog with a pathfield and a html5smartimage inputs. I have set the "allowUpload" to false. I want the user to input/pick the image using the pathfield component and then use it as source image reference to render the image in the html5smartimage widget. I have not been successful so far and any help/hint would be appreciated :). Here is what I have tried so far :

1. set the same "name" value to the pathfield and the fileReferenceParamter , hoping to pick up the users pathfield input into the smartimage, but the POST results two "./srcImageReference" parameters to be sent resulting in a pathfield change to a String [] on jcr node, thus concatenation of same paths each time.

2. I have gone through widgets.js to find a usable event function that gets called when a drap-drop is done , so I can simulate a similar one with the value from the pathfield, but I could not find any ..

Is extending the smartimage component and overriding the default drap-drop handlers the only option ? if so how do I go about it .

thanks Viper

Answer 1

The html5smartimage has a handleDrop( Object dragData ) method that is called when an image is dragged and dropped over it. We can call this from the dialogselect event of the pathfield.

In essence it's like faking a drag-drop. The dragData has a lot of fields but all that matters in this case is the image path and name (source : console.log()s in the handleDrop method ). So on when an image path is selected in the pathfield, use it's path and create hoax dragData object and call the image's handleDrop method.

function(pathfield,path,anchor){ 
    var dialog = pathfield.findParentByType('dialog');
    var image = dialog.findByType('html5smartimage')[0]; 
    var pathArray = path.split('/'); 
    var imageName = pathArray[(pathArray.length-1)]; 
    var fakeDragData = {}; 
    var fakeRecord = {}; 
    fakeRecord.path = path; 
    fakeRecord.name = imageName; 
    fakeRecord.get = function(name){ return this[name]; }; 
    fakeDragData.records = new Array(fakeRecord); 
    fakeDragData.single = true; 
    image.handleDrop(fakeDragData);
}

This way all of the images data is stored on node by the html5smart image widget itself, you will not need to read the value of pathfield in your jsp at all.

Answer 2

If you just want to use the html5smartimage to preview the image selected in the pathfield you can try something like this :

Instead of html5smartimage use a regular panel and use its html property to display the image in the panel. The panel's body.update() method can be called from listeners in the pathfield with markup up to create a preview image.

<tab1 jcr:primaryType="cq:Panel" title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
  <ImagePathField jcr:primaryType="cq:Widget" fieldLabel="Select Image" 
           name="./imagePath" rootPath="/content/dam" xtype="pathfield">
    <listeners jcr:primaryType="nt:unstructured" 
       dialogselect="function(pathfield,currentpath,anchor) {

            //dialogselect event - fired when a selection 
            //is made using pathfield's browse dialog
            //get the sibling panel through the pathfield

            var previewPanel = pathfield.nextSibling();

            //update the html property of panel to contain the
            //image selected in the pathfield using panel body's update method

            previewPanel.body.update('<img style="max-width: 100%;display: block;
                                      margin-left:auto;margin-right:auto;" 
                                      src="'+currentpath+'"/>');  
        }" 
       loadcontent="function(pathfield,record,path){ 

       //preview the image when dialog is opened for the first time
       var previewPanel = pathfield.nextSibling(); 

       if(pathfield.getValue() != '')  
       previewPanel.body.update('<img style="max-width: 100%;display: block;
                                  margin-left:auto;margin-right:auto;" 
                                  src="'+pathfield.getValue()+'"/>'); 
       }"/>
  </ImagePathField>
  <previewPanel jcr:primaryType="cq:Widget" fieldLabel="Preview Pane"
               height="250" html="No image to preview" xtype="panel"/>
</items>
</tab1>