Hide or disable Touch UI dialog (asset) file upload

danc13675873

30-12-2018

Does anyone know the JS code required to hide or disable an (asset) file upload in a Touch UI dialog based on if a checkbox is ticked. I am loading the JS using a client library for the dialog.

                                        <items jcr:primaryType="nt:unstructured">

                                            <file

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                                                allowUpload="{Boolean}false"

                                                autoStart="{Boolean}false"

                                                class="cq-droptarget"

                                                fieldLabel="Image Asset"

                                                fileNameParameter="./fileName"

                                                fileReferenceParameter="./fileReference"

                                                mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"

                                                multiple="{Boolean}false"

                                                name="./file"

                                                title="Upload Image Asset"

                                                uploadUrl="${suffix.path}"

                                                useHTML5="{Boolean}true"/>

                                            <imageFromLinkedPage

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

                                                fieldDescription="When checked, populate the image with the linked page's thumbnail."

                                                text="Get image from linked page"

                                                name="./imageFromPage"

                                                value="{Boolean}true"

                                                uncheckedValue="{Boolean}false"

                                                checked="{Boolean}false"/>

                                        </items>

Accepted Solutions (1)

Accepted Solutions (1)

Ravi_Pampana

MVP

31-12-2018

Hi,

Below is the sample code, using this we can disable and enable the browse option for image field. You can extend this as per your requirement.

Add class "cq-dialog-checkbox-showhide" attribute to checkbox field. Class value can be any and update the js code accordingly.

Screen Shot 2018-12-31 at 6.44.01 PM.png

Add below code to js file and add category as below

categories

String[]

cq.authoring.dialog

//For checkbox changes in dialog

$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {

        disabledBrowse($(this));

    });

    //To check the value on initial load

     $(document).on("foundation-contentloaded", function(e) {

        // if there is already an inital value make sure the according target element becomes visible

        $(".cq-dialog-checkbox-showhide").each( function() {

            disabledBrowse($(this));

        });

    });

   

    function disabledBrowse(el) {

   

    var checked = el.prop('checked');

    if(checked) {

  

    $("input.coral-FileUpload-input").attr('disabled','disabled');

    }else {

  

    $("input.coral-FileUpload-input").removeAttr('disabled');

    }

     }

Screen Shot 2018-12-31 at 6.41.06 PM.png