Goal
Create a Touch UI Composite Multifield configuration supporting Images, widgets of type granite/ui/components/foundation/form/fileupload
For Classic UI Image Multifieldcheck this post
Hotfix 6670 must be installed for this widget extension to work
Supports Drag & Drop only. Still working on upload piece...
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 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="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>
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 = "-";
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;
}
if(str.indexOf("@") != -1){
str = str.substring(str.indexOf("@"));
}else{
str = "";
}
return str;
}
function getStringAfterLastSlash(str){
if(!str || (str.indexOf("/") == -1)){
return "";
}
return str.substr(str.lastIndexOf("/") + 1);
}
/**
* Removes multifield number suffix and returns just the fileRefName
* Input: paintingRef-1, Output: paintingRef
*
* @param fileRefName
* @returns {*}
*/
function getJustFileRefName(fileRefName){
if(!fileRefName || (fileRefName.indexOf(SEP_SUFFIX) == -1)){
return fileRefName;
}
return fileRefName.substring(0, fileRefName.lastIndexOf(SEP_SUFFIX));
}
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"){
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(".coral-FileUpload").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 fr = getJustFileRefName(getStringAfterLastSlash(imageField.fieldNames.fileReference));
if(_.isEmpty(data[mName]) || _.isEmpty(data[mName][counter])
|| _.isEmpty(data[mName][counter][fr])){
return;
}
var fileRef = data[mName][counter][fr];
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 $fileRef = $element.find("[name=\"" + imageField.fieldNames.fileReference + "\"]");
$fileRef.val(fileRef);
}
}
//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(".coral-FileUpload").length == 0;
});
$fields.each(function (j, field) {
var $field = $(field),
$widget = $field.find(".coral-FileUpload").data("fileUpload");
if(!$widget){
return;
}
var $fileRef = $widget.$element.find(".cq-FileUpload-filereference"),
namePath = $fieldSet.data("name") + "/" + (counter + 1) + "/"
+ getJustFileRefName($fileRef.attr("name"));
$('<input />').attr('type', 'hidden')
.attr('name', namePath)
.attr('value', $fileRef.val())
.appendTo($form);
$field.remove();
});
}
function collectNonImageFields($form, $fieldSet, counter){
var $fields = $fieldSet.children().children(CFFW).not(function(index, ele){
return $(ele).find(".coral-FileUpload").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, $fields;
$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 = {}, counter = $imageMulti.find(".coral-FileUpload").length;
_.each(this.fieldNames, function(value, key){
if(value.indexOf("./jcr:") == 0){
fieldNames[key] = value;
}else{
fieldNames[key] = getStringBeforeAtSign(value) + SEP_SUFFIX
+ counter + getStringAfterAtSign(value);
}
});
this.fieldNames = fieldNames;
}
}
$(document).ready(function () {
addDataInFields();
collectDataFromFields();
});
overrideGranite_computeFieldNames();
})();
5) The sample component in package install, renders images added in composite multifield
