Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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
Employee 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

22 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

 

 

 

@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

 

@Anudeep_Garnepudi  -- Already tried this, but no use  

AbstractNodePredicate is deprecated, so I have to use AbstractResourcePredicate

Avatar

Community Advisor

@prasanth96karats  Which version of AEM you are working on?

 

If AEM 6.5 documentation says nothing is Deprecated, more over granite/ui/components/coral/foundation/form/pathbrowser is deprecated.

https://www.adobe.io/experience-manager/reference-materials/6-5/javadoc/org/apache/commons/collectio...

 

https://www.adobe.io/experience-manager/reference-materials/6-5/javadoc/com/day/cq/commons/predicate...

 

AEM as Cloud documentation, Precicate Interface is deprecated, not AbstractNodePredicate

https://www.adobe.io/experience-manager/reference-materials/cloud-service/javadoc/org/apache/commons...

 

https://www.adobe.io/experience-manager/reference-materials/cloud-service/javadoc/com/day/cq/commons...

 

And the above shared code with field is tested and working in my local.

 

@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;
	}

@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

Community Advisor

@prasanth96karats Please share the latest Java class and dialog xml that you used. 

@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" } )