May 4, 2020
Estimated Post Reading Time ~

How to Disable Uploading of a file in Granite Fileupload Widget using

By default, the fileupload component in the Touch UI allows for files to be “dragged and dropped” into it from the DAM and also to be chosen from the local file system using a popup dialog. This is all fine and dandy unless it is undesirable to allow the uploading of files from the local file system (which is a frequent request from our customers). Uploading from the local file system can often lead to broken, or missing assets, or at the very least unmanaged assets. We strongly do not recommend allowing authors to do this.

Although this (the disabling of local file uploads) can be achieved through some very unpleasant javascript as shown below.

How to Disable Uploading of a file in Granite Fileupload Widget using
Disable Browse and Upload file in FileUpload widget - /libs/granite/ui/components/foundation/form/fileupload of Image component - /libs/foundation/components/image, in Touch UI Demo | Package Install

Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-fileupload-widget-disable-upload

2) Create node /apps/eaem-fileupload-widget-disable-upload/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies to underscore

3) Create file (nt:file) /apps/eaem-fileupload-widget-disable-upload/clientlib/js.txt and add

disable-upload.js

4) Create file (nt:file) /apps/eaem-fileupload-widget-disable-upload/clientlib/disable-upload.js and add the following code

(function ($, $document, gAuthor) {
var COMPONENT = "foundation/components/image",
FILE_UPLOAD = ".coral-FileUpload",
FILE_UPLOAD_BROWSE = ".cq-FileUpload-browse",
DATA_ATTR_FILE_UPLOAD = "fileUpload";

if(!gAuthor){
return;
}

$document.on('dialog-ready', disableUpload);

function disableUpload(){
var editable = gAuthor.DialogFrame.currentDialog.editable;

//if not an image component dialog, return
if((editable.type !== COMPONENT)){
return;
}

var $fileUploads = $(FILE_UPLOAD), cuiFileUpload, $uploadBrowse;

$fileUploads.each(function(index, fileUpload){
cuiFileUpload = $(fileUpload).data(DATA_ATTR_FILE_UPLOAD);

$uploadBrowse = cuiFileUpload.$element.find(FILE_UPLOAD_BROWSE);

$uploadBrowse.off().on("click tap", function(){
showErrorAlert("Upload Disabled");
});

cuiFileUpload.$element.find("input[type='file']").remove();
});
}

function showErrorAlert(message, title){
var fui = $(window).adaptTo("foundation-ui"),
options = [{
text: "OK",
warning: true
}];

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

fui.prompt(title, message, "error", options);
}
}(jQuery, jQuery(document), Granite.author));

Other possible but equally poor solutions, there exists a very simple and elegant solution to this problem. In order to disable the upload from local device feature add the following property to the fileupload field: allowUpload=”{Boolean}false”

For example:
<file
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Image asset"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
It should be noted that this solution works for AEM 6.2 and 6.3.

A better solution would be to change the way that the local file upload worked by actually forcing the user to specify what folder in the DAM the asset should be placed.

Source:
http://aempodcast.com/2017/aem-interface/asset-file-upload-prevention/#.XrCNnBNKiqC
http://experience-aem.blogspot.com/2016/06/aem-62-touch-ui-disable-upload-of-file-in-granite-fileupload-widget.html


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.