How to upload an image with html5smartimage to DAM? | Community
Skip to main content
E
eug_k
Level 2
October 16, 2015
Solved

How to upload an image with html5smartimage to DAM?

  • October 16, 2015
  • 2 replies
  • 1164 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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();      

2 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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();      
E
eug_kAuthor
Level 2
October 16, 2015

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(); } } }
Terms & ConditionsAccessibility statement

Loading footer...