Smartphone

Goal

Create  a Touch UI Composite Multifield configuration supporting Images, widgets of type granite/ui/components/foundation/form/fileupload

For Classic UI Image Multifield check this post

For AEM 62 Image Multifield check this post

Hotfix 6670 must be installed for this widget extension to work

For a slideshow component check this post

Demo | Package Install


Bug Fixes

Support for File Upload in Multifield - Demo | Package Install

Select and Checkbox fixes - Demo | Package Install

Image Multifield for 61 SP1 (no hotfixes necessary) - Demo | Package Install


Image Mulitifield



Nodes in CRX



Dialog



Dialog XML

#49 makes the widget a composite multifield by adding empty valued flag eaem-nested
#78 fileReferenceParameter for storing image path

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root    
 jcr_primaryType="nt:unstructured"
 jcr_title="Touch UI Image Multi Field"
 sling_resourceType="cq/gui/components/authoring/dialog"
 helpPath="en/cq/current/wcm/default_components.html#Text">
 <content
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/container">
 <layout
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/layouts/tabs"
 type="nav"/>
 <items jcr_primaryType="nt:unstructured">
 <gallery
 jcr_primaryType="nt:unstructured"
 jcr_title="Gallery"
 sling_resourceType="granite/ui/components/foundation/section">
 <layout
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
 <items jcr_primaryType="nt:unstructured">
 <column
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/container">
 <items jcr_primaryType="nt:unstructured">
 <fieldset
 jcr_primaryType="nt:unstructured"
 jcr_title="India Dashboard"
 sling_resourceType="granite/ui/components/foundation/form/fieldset">
 <layout
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
 <items jcr_primaryType="nt:unstructured">
 <column
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/container">
 <items jcr_primaryType="nt:unstructured">
 <gallery
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/form/textfield"
 fieldDescription="Enter Gallery Name"
 fieldLabel="Gallery"
 name="./gallery"/>
 <artist
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/form/multifield"
 class="full-width"
 eaem-nested=""
 fieldDescription="Click + to add a Artist"
 fieldLabel="URLs">
 <field
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/form/fieldset"
 name="./artists">
 <layout
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
 method="absolute"/>
 <items jcr_primaryType="nt:unstructured">
 <column
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/container">
 <items jcr_primaryType="nt:unstructured">
 <artist
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/form/textfield"
 fieldDescription="Enter Artist Name"
 fieldLabel="Artist"
 name="./artist"/>
 <painting
 jcr_primaryType="nt:unstructured"
 sling_resourceType="granite/ui/components/foundation/form/fileupload"
 autoStart="{Boolean}false"
 class="cq-droptarget"
 fieldLabel="Painting"
 fileNameParameter="./paintingName"
 fileReferenceParameter="./paintingRef"
 mimeTypes="[image]"
 multiple="{Boolean}false"
 name="./painting"
 title="Upload Image"
 uploadUrl="${suffix.path}"
 useHTML5="{Boolean}true"/>
 </items>
 </column>
 </items>
 </field>
 </artist>
 </items>
 </column>
 </items>
 </fieldset>
 </items>
 </column>
 </items>
 </gallery>
 </items>
 </content>
</jcr:root>

Component Rendering

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-image-multifield

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-image-multifield/clientlib and set a property categories of String type to cq.authoring.dialog, dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/touchui-image-multifield/clientlib/js.txt, add the following

                         image-multifield.js

4) Create file ( type nt:file ) /apps/touchui-image-multifield/clientlib/image-multifield.js, add the following code

(function () {
 var DATA_EAEM_NESTED = "data-eaem-nested",
 CFFW = ".coral-Form-fieldwrapper",
 THUMBNAIL_IMG_CLASS = "cq-FileUpload-thumbnail-img",
 SEP_SUFFIX = "-",
 SEL_FILE_UPLOAD = ".coral-FileUpload",
 SEL_FILE_REFERENCE = ".cq-FileUpload-filereference",
 SEL_FILE_NAME = ".cq-FileUpload-filename",
 SEL_FILE_MOVEFROM = ".cq-FileUpload-filemovefrom";

 function getStringBeforeAtSign(str){
 if(_.isEmpty(str)){
 return str;
 }

 if(str.indexOf("@") != -1){
 str = str.substring(0, str.indexOf("@"));
 }

 return str;
 }

 function getStringAfterAtSign(str){
 if(_.isEmpty(str)){
 return str;
 }

 return (str.indexOf("@") != -1) ? str.substring(str.indexOf("@")) : "";
 }

 function getStringAfterLastSlash(str){
 if(!str || (str.indexOf("/") == -1)){
 return "";
 }

 return str.substr(str.lastIndexOf("/") + 1);
 }

 function getStringBeforeLastSlash(str){
 if(!str || (str.indexOf("/") == -1)){
 return "";
 }

 return str.substr(0, str.lastIndexOf("/"));
 }

 function removeFirstDot(str){
 if(str.indexOf(".") != 0){
 return str;
 }

 return str.substr(1);
 }

 function modifyJcrContent(url){
 return url.replace(new RegExp("^" + Granite.HTTP.getContextPath()), "")
 .replace("_jcr_content", "jcr:content");
 }

 /**
 * Removes multifield number suffix and returns just the fileRefName
 * Input: paintingRef-1, Output: paintingRef
 *
 * @param fileRefName
 * @returns {*}
 */
 function getJustName(fileRefName){
 if(!fileRefName || (fileRefName.indexOf(SEP_SUFFIX) == -1)){
 return fileRefName;
 }

 var value = fileRefName.substring(0, fileRefName.lastIndexOf(SEP_SUFFIX));

 if(fileRefName.lastIndexOf(SEP_SUFFIX) + SEP_SUFFIX.length + 1 == fileRefName.length){
 return value;
 }

 return value + fileRefName.substring(fileRefName.lastIndexOf(SEP_SUFFIX) + SEP_SUFFIX.length + 1);
 }

 function getMultiFieldNames($multifields){
 var mNames = {}, mName;

 $multifields.each(function (i, multifield) {
 mName = $(multifield).children("[name$=@Delete]").attr("name");
 mName = mName.substring(0, mName.indexOf("@"));
 mName = mName.substring(2);
 mNames[mName] = $(multifield);
 });

 return mNames;
 }

 function buildMultiField(data, $multifield, mName){
 if(_.isEmpty(mName) || _.isEmpty(data)){
 return;
 }

 _.each(data, function(value, key){
 if(key == "jcr:primaryType"){
 return;
 }

 $multifield.find(".js-coral-Multifield-add").click();

 _.each(value, function(fValue, fKey){
 if(fKey == "jcr:primaryType" || _.isObject(fValue)){
 return;
 }

 var $field = $multifield.find("[name=./" + fKey + "]").last();

 if(_.isEmpty($field)){
 return;
 }

 $field.val(fValue);
 });
 });
 }

 function buildImageField($multifield, mName){
 $multifield.find(".coral-FileUpload:last").each(function () {
 var $element = $(this), widget = $element.data("fileUpload"),
 resourceURL = $element.parents("form.cq-dialog").attr("action"),
 counter = $multifield.find(SEL_FILE_UPLOAD).length;

 if (!widget) {
 return;
 }

 var fuf = new Granite.FileUploadField(widget, resourceURL);

 addThumbnail(fuf, mName, counter);
 });
 }

 function addThumbnail(imageField, mName, counter){
 var $element = imageField.widget.$element,
 $thumbnail = $element.find("." + THUMBNAIL_IMG_CLASS),
 thumbnailDom;

 $thumbnail.empty();

 $.ajax({
 url: imageField.resourceURL + ".2.json",
 cache: false
 }).done(handler);

 function handler(data){
 var fName = getJustName(getStringAfterLastSlash(imageField.fieldNames.fileName)),
 fRef = getJustName(getStringAfterLastSlash(imageField.fieldNames.fileReference));

 if(isFileNotFilled(data, counter, fRef)){
 return;
 }

 var fileName = data[mName][counter][fName],
 fileRef = data[mName][counter][fRef];

 if (fileRef) {
 if (imageField._isImageMimeType(fileRef)) {
 thumbnailDom = imageField._createImageThumbnailDom(fileRef);
 } else {
 thumbnailDom = $("<p>" + fileRef + "</p>");
 }
 }

 if (!thumbnailDom) {
 return;
 }

 $element.addClass("is-filled");
 $thumbnail.append(thumbnailDom);

 var $fileName = $element.find("[name="" + imageField.fieldNames.fileName + ""]"),
 $fileRef = $element.find("[name="" + imageField.fieldNames.fileReference + ""]");

 $fileRef.val(fileRef);
 $fileName.val(fileName);
 }

 function isFileNotFilled(data, counter, fRef){
 return _.isEmpty(data[mName])
 || _.isEmpty(data[mName][counter])
 || _.isEmpty(data[mName][counter][fRef])
 }
 }

 //reads multifield data from server, creates the nested composite multifields and fills them
 function addDataInFields() {
 $(document).on("dialog-ready", function() {
 var $multifields = $("[" + DATA_EAEM_NESTED + "]");

 if(_.isEmpty($multifields)){
 return;
 }

 var mNames = getMultiFieldNames($multifields),
 $form = $(".cq-dialog"),
 actionUrl = $form.attr("action") + ".infinity.json";

 $.ajax(actionUrl).done(postProcess);

 function postProcess(data){
 _.each(mNames, function($multifield, mName){
 $multifield.on("click", ".js-coral-Multifield-add", function () {
 buildImageField($multifield, mName);
 });

 buildMultiField(data[mName], $multifield, mName);
 });
 }
 });
 }

 function collectImageFields($form, $fieldSet, counter){
 var $fields = $fieldSet.children().children(CFFW).not(function(index, ele){
 return $(ele).find(SEL_FILE_UPLOAD).length == 0;
 });

 $fields.each(function (j, field) {
 var $field = $(field),
 $widget = $field.find(SEL_FILE_UPLOAD).data("fileUpload");

 if(!$widget){
 return;
 }

 var prefix = $fieldSet.data("name") + "/" + (counter + 1) + "/",

 $fileRef = $widget.$element.find(SEL_FILE_REFERENCE),
 refPath = prefix + getJustName($fileRef.attr("name")),

 $fileName = $widget.$element.find(SEL_FILE_NAME),
 namePath = prefix + getJustName($fileName.attr("name")),

 $fileMoveRef = $widget.$element.find(SEL_FILE_MOVEFROM),
 moveSuffix = $widget.inputElement.attr("name") + "/" + new Date().getTime()
 + SEP_SUFFIX + $fileName.val(),
 moveFromPath = moveSuffix + "@MoveFrom";

 $(<input />).attr(type, hidden).attr(name, refPath)
 .attr(value, $fileRef.val() || ($form.attr("action") + removeFirstDot(moveSuffix)))
 .appendTo($form);

 $(<input />).attr(type, hidden).attr(name, namePath)
 .attr(value, $fileName.val()).appendTo($form);

 $(<input />).attr(type, hidden).attr(name, moveFromPath)
 .attr(value, modifyJcrContent($fileMoveRef.val())).appendTo($form);

 $field.remove();
 });
 }

 function collectNonImageFields($form, $fieldSet, counter){
 var $fields = $fieldSet.children().children(CFFW).not(function(index, ele){
 return $(ele).find(SEL_FILE_UPLOAD).length > 0;
 });

 $fields.each(function (j, field) {
 fillValue($form, $fieldSet.data("name"), $(field).find("[name]"), (counter + 1));
 });
 }

 function fillValue($form, fieldSetName, $field, counter){
 var name = $field.attr("name");

 if (!name) {
 return;
 }

 //strip ./
 if (name.indexOf("./") == 0) {
 name = name.substring(2);
 }

 //remove the field, so that individual values are not POSTed
 $field.remove();

 $(<input />).attr(type, hidden)
 .attr(name, fieldSetName + "/" + counter + "/" + name)
 .attr(value, $field.val())
 .appendTo($form);
 }

 //collect data from widgets in multifield and POST them to CRX
 function collectDataFromFields(){
 $(document).on("click", ".cq-dialog-submit", function () {
 var $multifields = $("[" + DATA_EAEM_NESTED + "]");

 if(_.isEmpty($multifields)){
 return;
 }

 var $form = $(this).closest("form.foundation-form"),
 $fieldSets;

 $multifields.each(function(i, multifield){
 $fieldSets = $(multifield).find("[class=coral-Form-fieldset]");

 $fieldSets.each(function (counter, fieldSet) {
 collectNonImageFields($form, $(fieldSet), counter);

 collectImageFields($form, $(fieldSet), counter);
 });
 });
 });
 }

 function overrideGranite_computeFieldNames(){
 var prototype = Granite.FileUploadField.prototype,
 ootbFunc = prototype._computeFieldNames;

 prototype._computeFieldNames = function(){
 ootbFunc.call(this);

 var $imageMulti = this.widget.$element.closest("[" + DATA_EAEM_NESTED + "]");

 if(_.isEmpty($imageMulti)){
 return;
 }

 var fieldNames = {},
 fileFieldName = $imageMulti.find("input[type=file]").attr("name"),
 $fieldSet = $imageMulti.find(SEL_FILE_UPLOAD).closest("[class=coral-Form-fieldset]"),
 counter = $imageMulti.find(SEL_FILE_UPLOAD).length;

 _.each(this.fieldNames, function(value, key){
 if(value.indexOf("./jcr:") == 0){
 fieldNames[key] = value;
 }else if(key == "tempFileName" || key == "tempFileDelete"){
 value = value.substring(0, value.indexOf(".sftmp")) + getStringAfterAtSign(value);
 fieldNames[key] = fileFieldName + removeFirstDot(getStringBeforeAtSign(value))
 + SEP_SUFFIX + counter + ".sftmp" + getStringAfterAtSign(value);
 }else{
 fieldNames[key] = getStringBeforeAtSign(value) + SEP_SUFFIX
 + counter + getStringAfterAtSign(value);
 }
 });

 this.fieldNames = fieldNames;

 this._tempFilePath = getStringBeforeLastSlash(this._tempFilePath);
 this._tempFilePath = getStringBeforeLastSlash(this._tempFilePath) + removeFirstDot(fieldNames.tempFileName);
 }
 }

 $(document).ready(function () {
 addDataInFields();
 collectDataFromFields();
 });

 overrideGranite_computeFieldNames();
})();