AEM Cloud Service - Validate asset file extensions while uploading to AEM in browser | AEM Community Blog Seeding

[kautuk_sahni]

AEM Cloud Service - Validate asset file extensions while uploading to AEM in browser by Sreekanth Choudry Nalabotu

Abstract

Goal
The following steps explain adding a client side script to validate the file types while uploading to AEM using browser..

Solution
1) Create a project eaem-cs-validate-assets using archetype - https://github.com/adobe/aem-project-archetype

mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype
-D archetypeVersion=24 -D aemVersion=cloud -D appTitle="Experience AEM Validate Assets on Upload"
-D appId="eaem-cs-validate-assets" -D groupId="apps.experienceaem.assets" -D frontendModule=none
-D includeExamples=n -D includeDispatcherConfig=n
2) Create node /apps/eaem-cs-validate-assets/clientlibs/supported-file-types of type cq:ClientLibraryFolder, add String[] property categories with value [dam.gui.coral.fileupload], String[] property dependencies with value eaem.lodash.

3) Create file (nt:file) /apps/eaem-cs-validate-assets/clientlibs/supported-file-types/js.txt, add

supported-file-types.js

4) Create file (nt:file) /apps/eaem-cs-validate-assets/clientlibs/supported-file-types/supported-file-types.js, add the following code

(function ($, $document) {
"use strict";

var _ = window._,
ERROR_MSG = "Unsupported file extensions : ";

var _origConfirmUpload = window.DamFileUpload.prototype._confirmUpload;

window.DamFileUpload.prototype._confirmUpload = function (event) {
var invalidFileNames = [],
FILE_EXTS_SUPPORTED = getSuppportedFileExtensions();

this.fileUpload.uploadQueue.forEach(function(item) {
var fileName = item.name;

if(!fileName.includes(".")){
invalidFileNames.push(fileName);
return;
}

var ext = fileName.substring(fileName.lastIndexOf(".") + 1);

if(!FILE_EXTS_SUPPORTED.includes(ext.toUpperCase())){
invalidFileNames.push(fileName);
}
});

if(_.isEmpty(invalidFileNames)){
_origConfirmUpload.call(this, event);

var uploadDialog = this.uploadDialog;

_.defer(function(){
$(uploadDialog).find("input").attr("disabled", "disabled");
},0)
}else{
showAlert(ERROR_MSG + "" + invalidFileNames.join(",") + "");
}
};

function showAlert(message, title, callback){
var fui = $(window).adaptTo("foundation-ui"),
options = [{
id: "ok",
text: "OK",
primary: true
}];

message = message || "Unknown Error";
title = title || "Error";

fui.prompt(title, message, "warning", options, callback);
}

function getSuppportedFileExtensions(){
return [
"JPG", "PNG"
];
}
}(jQuery, jQuery(document)));

Read Full Blog

AEM Cloud Service - Validate asset file extensions while uploading to AEM in browser

Q&A

Please use this thread to ask the related questions.