Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
Adobe Summit 2023 | Complete list of AEM Sessions & Labs
SOLVED

How to select only image/video from pathbrowser in touch UI

Avatar

Level 2

HI All,

 I have a requirement to show only image/video files when I open a asset picker from pathbrowser in touch UI. Please guide me on this.

 

Thanks in advance

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@prasanth96karats ,

 

As Anudeep has mentioned, even I have tried with AbstractNodePredicate and it's working for me.

 

Please refer below sample class -

/**
*
*/
package com.aem.demo.core.services.impl;

import com.day.cq.commons.predicate.AbstractNodePredicate;
import org.apache.commons.collections.Predicate;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.SyntheticResource;
import org.apache.sling.api.resource.ValueMap;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.jcr.Node;
import javax.jcr.RepositoryException;

// http://docs.adobe.com/docs/en/cq/current/javadoc/com/day/cq/commons/predicate/AbstractNodePredicate....

@Component(
service = Predicate.class,
property = {
"predicate.name=my-imagevideopredicat"
}
)
public class ImageVideoAssetPredicate extends AbstractNodePredicate {
private final static Logger log = LoggerFactory.getLogger(ImageVideoAssetPredicate.class);

// Overriding evaluate(Object object) is optional. If this is not overridden AbstractNodePredicate
// provides the following logic;
//
// * If the parameter "object" is a JCR Node OR Sling Resource that can be adapted to a JCR Node
// * Then return evaluate(Node node)
// * Else return false
//
// -----------------------------------------------------------------------------------------------------
//
// In the case where the object is not a Node or adaptable to a Node, for example: A synthetic resource
// returned by a Sling Resource Provider, evaluate(Object object) can implement any custom logic as needed.

/*
* @Override public final boolean evaluate(final Object object) { if (object
* instanceof SyntheticResource) { // If the object is a Synthetic Resource
* final Resource resource = (Resource) object; final ValueMap properties =
* resource.getValueMap();
*
* // Check the Synthetic Resource as needed to figure out if it should be
* filtered in or out. return StringUtils.equals(properties.get("cat",
* String.class), "meow"); } else { // If not a SyntheticResource then use
* AbstractNodePredicate's "default" evaluation rules, which will // in turn
* call this.evaluate(Node node) defined below if the object is a/adaptable to a
* JCR Node. return super.evaluate(object); } }
*/

@Override
public final boolean evaluate(final Node node) throws RepositoryException {
// Anything can be checked here to file the Node in or out
String nodeName = node.getName();
if (node.isNodeType("dam:Asset") && nodeName.indexOf(".") >= 0) {
String extension = nodeName.substring(nodeName.lastIndexOf("."), nodeName.length());

if (extension.equalsIgnoreCase(".png") || extension.equalsIgnoreCase(".jpg") || extension.equalsIgnoreCase(".jpeg") || extension.equalsIgnoreCase(".mp4"))
{
return true;
}

}

return false;



}


}

 

Please refer the following link associated with sample predicate class : acs-aem-samples/SamplePredicate.java at master · Adobe-Consulting-Services/acs-aem-samples · GitHub

I have modified this sample predicate class in my workspace.

 

Here is my DAM folder with different types of assets -

DEBAL_DAS_2-1640693575988.png

 

 

But .png , .jpg , .jpeg and .mp4 are available while selection as shown below -

 

DEBAL_DAS_3-1640693663075.png

 

 

cq:dialog's content.xml -

<?xml version="1.0" encoding="UTF-8"?>

-<jcr:root jcr:title="Application" sling:resourceType="cq/gui/components/authoring/dialog" jcr:primaryType="nt:unstructured" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0">


-<content sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" jcr:primaryType="nt:unstructured">


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


-<column sling:resourceType="granite/ui/components/coral/foundation/container" jcr:primaryType="nt:unstructured">


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

<app-path sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser" jcr:primaryType="nt:unstructured" rootPath="/content/dam/we-retail/en/features" predicate="my-imagevideopredicat" name="./appPath" fieldLabel="Application Path"/>

</items>

</column>

</items>

</content>

</jcr:root>

 

Just sharing one more information here I am using AEM 6.5.9.0.

 

If you execute below SQL2 query, it will give you list of nodes with predicate property and coral3 pathbrowser -

 

SELECT * FROM [nt:base] AS s WHERE ISDESCENDANTNODE([/libs]) and predicate is not null and [sling:resourceType] = 'granite/ui/components/coral/foundation/form/pathbrowser'

 

one of the result is /libs/screens/core/components/content/app/cq:dialog/content/items/column/items/app-path and it has also predicate property(allows of aem pages).

component and bundle details -

 

DEBAL_DAS_4-1640694464938.png

Hope this will help.

 

 

View solution in original post

16 Replies

Avatar

Community Advisor

@prasanth96karats 

Use "cq/gui/components/authoring/dialog/fileupload" field (check image v2 for reference /apps/core/wcm/components/image/v2/image/cq:dialog/content/items/tabs/items/asset/items/columns/items/column/items/file).

  • Update mimeTypes property with all required types

Anudeep_Garnepudi_1-1640421765816.png

  • If you want to disable upload from file system, use property allowUpload (Boolean) flase

Anudeep_Garnepudi_2-1640421859838.png

 

 

 

Avatar

Level 2

@Anudeep_Garnepudi  -- Thanks for your time.

But my requirement is to use pathbrowser and component like AbstractResourcePredicate(Predicate ) which is mandatory.

 

Please find below code,

 

import com.day.cq.commons.predicate.AbstractResourcePredicate;


import org.apache.commons.collections.Predicate;
import org.apache.log4j.Logger;
import org.osgi.service.component.annotations.Component;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;


@Component(immediate = true,name = "Dam Image Predicate", property = {"predicate.name = damimagepredicate"})
public class DamImagePredicate extends AbstractResourcePredicate implements Predicate{

private Logger log = Logger.getLogger(DamImagePredicate.class);

private static final String REP_ACL = "rep:ACL";
private static final String JCR_CONTENT = "jcr:content";
private static final String JCR_PRIMARYTYPE = "jcr:primaryType";
private static final String DAM_ASSET = "dam:Asset";
private static final String PNG = ".png";
private static final String JPG = ".jpg";
private static final String JPEG = ".jpeg";

@Override
public boolean evaluate(final Resource resource){
log.info("inside predicate");
log.info(resource);
<!-- some code -->
}

}

 

And my content.xml

 

<path
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Please select image/video"
fieldDescription="select image/video"
name="./path"
predicate="damimagepredicate"
rootPath="/content"/>

 

my component is getting registered but its not getting call when I tried to upload any file

Avatar

Community Advisor

Hi @prasanth96karats ,

 

In your above code service=Predicate.class is missing, Just checking if that causing an issue.

Avatar

Community Advisor

@prasanth96karats 

  • Use granite/ui/components/coral/foundation/form/pathfield as granite/ui/components/coral/foundation/form/pathbrowser is deprecated.
  • Write a simple front-end validation to check file extension.

Anudeep_Garnepudi_0-1640455361405.png

 

Write custome clientlib and use below validation function.

 

$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
        selector: "[name='./path']",
        validate: function(el) {
            var value = $(el).val();
            var extension = value.substring(value.lastIndexOf("."), value.length);

            if (extension === '.png' || extension === '.jpg' || extension === '.jpeg' || extension === '.mp4') {
				return;
            } else {
              return "Select Image/Video";
            }
      }
    });

Result:

 

Anudeep_Garnepudi_1-1640455572011.png

 

Anudeep_Garnepudi_3-1640455624661.png

 

 

Avatar

Level 2

@Anudeep_Garnepudi  

Let me tell my requirement again --  "I should not able to select any other types(like files/documents/folders) other than image and videos in the window whenever I open asset picker from pathfield"(and its better if there is any solution with predicates other than Jquery).

 

Thanks 🙂

Avatar

Community Advisor

Use below and make necessary changes

import javax.jcr.Node;
import javax.jcr.RepositoryException;

import org.apache.commons.collections.Predicate;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.day.cq.commons.predicate.AbstractNodePredicate;

@Component(
		service = Predicate.class,
		property = {
				"predicate.name=image-video"
		}
		)
public class DamImageVideoPredicate extends AbstractNodePredicate {

	private final static Logger log = LoggerFactory.getLogger(DamImageVideoPredicate.class);

	@Override
	public final boolean evaluate(Node node) throws RepositoryException {
		if (node != null) {
			String nodeName = node.getName();
			if (node.getProperty("jcr:primaryType").getString().equals("dam:Asset") && nodeName.indexOf(".") >= 0) {
				String extension = nodeName.substring(nodeName.lastIndexOf("."), nodeName.length());
				if (extension.equalsIgnoreCase(".png") || extension.equalsIgnoreCase(".jpg") || extension.equalsIgnoreCase(".jpeg") || extension.equalsIgnoreCase(".mp4")) {
					return true;
				} else {
					return false;
				}
			}
		}
		return true;
	}
}

Dialog

Anudeep_Garnepudi_0-1640516330368.png

 

Avatar

Level 2

@Anudeep_Garnepudi  -- Already tried this, but no use 😞 

AbstractNodePredicate is deprecated, so I have to use AbstractResourcePredicate

Avatar

Level 2

@Anudeep_Garnepudi  -- Thanks for the time Anudeep,

 

Tried as you said,please find the below component and content.xml

 

package com.aviva.aem.core.services;

import com.day.cq.commons.predicate.AbstractNodePredicate;

import javax.jcr.Node;
import javax.jcr.RepositoryException;

import org.apache.commons.collections.Predicate;
import org.apache.log4j.Logger;
import org.osgi.service.component.annotations.Component;


@Component(service=Predicate.class,immediate = true,name = "Dam Image Predicate",
property = {"predicate.name = image-video"})
public class DamImagePredicate extends AbstractNodePredicate{

private Logger log = Logger.getLogger(DamImagePredicate.class);


@Override
public final boolean evaluate(Node node) throws RepositoryException {
log.info("inside predicate");
if (node != null) {
String nodeName = node.getName();
if (node.getProperty("jcr:primaryType").getString().equals("dam:Asset") && nodeName.indexOf(".") >= 0) {
String extension = nodeName.substring(nodeName.lastIndexOf("."), nodeName.length());
if (extension.equalsIgnoreCase(".png") || extension.equalsIgnoreCase(".jpg") || extension.equalsIgnoreCase(".jpeg") || extension.equalsIgnoreCase(".mp4")) {
return true;
} else {
return false;
}
}
}
return true;
}

}

 

<mediapath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Please select image/video"
fieldDescription="select image/video"
name="./mediapath"
predicate="image-video"
rootPath="/content"/>

 

When I use AbstractNodePredicate , my component is not even registering in OSGI, not sure why

 

 

Avatar

Community Advisor

@prasanth96karats 

Copy-paste the entire block of code that I shared and just change Class name and try once.

Try both AbstractResourcePredicate and AbstractNodePredicate.

I am using granite/ui/components/coral/foundation/form/pathbrowser, not working with granite/ui/components/coral/foundation/form/pathfield as it has no predicate property, has only filter property.

Avatar

Community Advisor

@prasanth96karats 

Just checked even AbstractResourcePredicate is working.

import org.apache.commons.collections.Predicate;
import org.apache.sling.api.resource.Resource;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.day.cq.commons.predicate.AbstractResourcePredicate;

@Component( service = Predicate.class, property = { "predicate.name=image-video" } )
public class DamImageVideoPredicate extends AbstractResourcePredicate {

	private final static Logger log = LoggerFactory.getLogger(DamImageVideoPredicate.class);

	@Override
	public final boolean evaluate(Resource node) {
		return true;
	}

Avatar

Level 2

@Anudeep_Garnepudi 

Not sure why it is not working in my machine, I tried by restarting instance as well. But no luck.

Is there any other configs we need to do for predicates other than adding predicate property to the pathbrowser

Avatar

Level 2

@Anudeep_Garnepudi 

please find below,

 

import com.day.cq.commons.predicate.AbstractResourcePredicate;


import org.apache.commons.collections.Predicate;
import org.apache.log4j.Logger;
import org.osgi.service.component.annotations.Component;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;


@Component(service=Predicate.class,immediate = true,name = "Dam Image Predicate", property = {"predicate.name = image-video"})
public class ImagePredicate extends AbstractResourcePredicate {

private Logger log = Logger.getLogger(ImagePredicate.class);

private static final String REP_ACL = "rep:ACL";
private static final String JCR_CONTENT = "jcr:content";
private static final String JCR_PRIMARYTYPE = "jcr:primaryType";
private static final String DAM_ASSET = "dam:Asset";
private static final String PNG = ".png";
private static final String JPG = ".jpg";
private static final String JPEG = ".jpeg";

@Override
public boolean evaluate(final Resource resource){
log.info("inside predicate");
log.info(resource);
if(null!= resource){
ValueMap valueMap = resource.getValueMap();
String primaryType = valueMap.get(JCR_PRIMARYTYPE,String.class);
if(null!=primaryType && !primaryType.isEmpty()){
if(primaryType.equalsIgnoreCase(REP_ACL)){
return false;
}
if(resource.getName().equalsIgnoreCase(JCR_CONTENT)){
return false;
}
if(primaryType.equalsIgnoreCase(DAM_ASSET)){
String resourceName = resource.getName();
if(null!=resourceName && !resourceName.isEmpty()){
if(resourceName.lastIndexOf(".")>-1){
String extension = resourceName.substring(resourceName.lastIndexOf("."), resourceName.length());
if(null!=extension && !extension.isEmpty()){
if(extension.equalsIgnoreCase(PNG) || extension.equalsIgnoreCase(JPG) || extension.equalsIgnoreCase(JPEG)){
return true;
}else{
return false;
}
}
}
}
}
}
}
return true;
}

}

 

 

dialog.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Text and Media"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Please enter title"
fieldDescription="Title"
name="./title"/>
<mediapath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Please select image/video"
fieldDescription="select image/video"
name="./mediapath"
predicate="image-video"
rootPath="/content"/>
</items>
</column>
</items>
</content>
</jcr:root>

Avatar

Community Advisor

@prasanth96karats Can you try once changing Component annotation to below

@Component( service = Predicate.class, property = { "predicate.name=image-video" } )