Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to upload an image with html5smartimage to DAM?

Avatar

Level 2

Hi to all.

Could you please suggest how to upload images from a component dialog with html5smartimage widget to /content/dam/mySite/userName/fileName?

When I set this value ("/content/dam/mySite/userName/fileName") to the name parameter of the widget, it creates all this folders under a component node and saves an image there.

[img]Capture.PNG[/img]

Also I would like to save file with it's original name and to the folder, which is a value of another field in a dialog... For example: I have in a dialog a textfield widget where I type some name ('Evgeny" for ex). And when I upload an image it is saved to a /content/dam/mySite/Evgeny/originalFileName.jpg

Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 10

All CQ components are JavaScript. What you can do is create a custom sling servlet and upload the file using the sling servlet and using the JCR API . See the community article that uploads a file to CQ and stores the file in the DAM:

http://scottsdigitalcommunity.blogspot.ca/2013/07/uploading-files-to-adobe-experience.html

The only difference between this article and you use case is the JavaScript. However -- you can extend the component to post the data to the back end. The backend uses the JCR API to store the file in the DAM:

 

session = this.repository.loginAdministrative(null);
    Node node = session.getNode("/content/dam/travel"); 
    javax.jcr.ValueFactory valueFactory = session.getValueFactory();            
    javax.jcr.Binary contentValue = valueFactory.createBinary(is);           
    Node fileNode = node.addNode(fileName, "nt:file");
    fileNode.addMixin("mix:referenceable");
    Node resNode = fileNode.addNode("jcr:content", "nt:resource");
    resNode.setProperty("jcr:mimeType", "image/jpeg");
    resNode.setProperty("jcr:data", contentValue);
    Calendar lastModified = Calendar.getInstance();
    lastModified.setTimeInMillis(lastModified.getTimeInMillis());
    resNode.setProperty("jcr:lastModified", lastModified);
    session.save();      

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

All CQ components are JavaScript. What you can do is create a custom sling servlet and upload the file using the sling servlet and using the JCR API . See the community article that uploads a file to CQ and stores the file in the DAM:

http://scottsdigitalcommunity.blogspot.ca/2013/07/uploading-files-to-adobe-experience.html

The only difference between this article and you use case is the JavaScript. However -- you can extend the component to post the data to the back end. The backend uses the JCR API to store the file in the DAM:

 

session = this.repository.loginAdministrative(null);
    Node node = session.getNode("/content/dam/travel"); 
    javax.jcr.ValueFactory valueFactory = session.getValueFactory();            
    javax.jcr.Binary contentValue = valueFactory.createBinary(is);           
    Node fileNode = node.addNode(fileName, "nt:file");
    fileNode.addMixin("mix:referenceable");
    Node resNode = fileNode.addNode("jcr:content", "nt:resource");
    resNode.setProperty("jcr:mimeType", "image/jpeg");
    resNode.setProperty("jcr:data", contentValue);
    Calendar lastModified = Calendar.getInstance();
    lastModified.setTimeInMillis(lastModified.getTimeInMillis());
    resNode.setProperty("jcr:lastModified", lastModified);
    session.save();      

Avatar

Level 2

HI Scott, thank you for your reply!

I use something similar to your code: upload an image from a component dialog with CQ.form.FileUploadField and then in java class, which implement javax.jcr.observation.EventListener interface on NODE_ADDED event move this file to where I want:

 

import com.day.cq.commons.jcr.JcrUtil; import org.apache.felix.scr.annotations.* import org.apache.sling.jcr.api.SlingRepository; import org.osgi.service.component.ComponentContext; import javax.jcr.* @Component(immediate = true) public class PresenterImageService implements EventListener { private Session adminSession; @Reference SlingRepository repository; @Activate public void activate(ComponentContext context) throws Exception { try { adminSession = repository.loginAdministrative(null); adminSession.getWorkspace().getObservationManager().addEventListener( this, //handler Event.NODE_ADDED, //binary combination of event types "/content/mySite", //path true, //is Deep? null, //uuids filter {"nt:file"}, //nodetypes filter false); } catch (RepositoryException e) { //log.error("unable to register session", e); throw new Exception(e); } } @Deactivate public void deactivate() { if (adminSession != null) { adminSession.logout(); } } @Override public void onEvent(EventIterator eventIterator) { try { while (eventIterator.hasNext()) { // /content/mySite/presenters/jcr:content/presenters-container/presenter_3/file/jcr:content String eventPath = eventIterator.nextEvent().getPath(); Node sourceFileNode = adminSession.getNode(eventPath); Node fileNode = sourceFileNode.getParent(); Node presenterNode = fileNode.getParent(); if (presenterNode.hasProperty("node_type")) { if (presenterNode.getProperty("node_type").getString().equals("presenter")) { String userName = presenterNode.getProperty("account").getString(); String fileName = presenterNode.getProperty("avatarName").getString(); String pathToDAM = "/content/dam/mySite/users/" + userName + "/avatar"; Node avatarParentNode = JcrUtil.createPath(pathToDAM, "nt:folder", adminSession); if (avatarParentNode.hasNodes()) { NodeIterator nodeIterator = avatarParentNode.getNodes(); while (nodeIterator.hasNext()) { nodeIterator.nextNode().remove(); } } Node avatarNode = avatarParentNode.addNode(fileName, "nt:file"); JcrUtil.copy(sourceFileNode, avatarNode, "jcr:content"); String avatarPath = avatarNode.getPath(); presenterNode.setProperty("avatarPath", avatarPath); sourceFileNode.remove(); fileNode.remove(); } } adminSession.save(); } } catch (RepositoryException e) { e.printStackTrace(); } } }