Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,168 likes

Total Posts

6,289 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,168 likes

Total Posts

6,289 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

18-01-2021

BlogImage.jpg

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.

AEM AEMEBlogSeeding Experience Manager