Question
Limiting the no.of files to drop in DragAndDrop control
Hi All,
I am trying to customize OOTB draganddrop control to limit the no.of files to be dropped in one go. I am able to succeed in case of Chrome Browser.
There is a separate code snippet for IE browser drag and drop feature.
Before starting the upload process i need to check the no. of files to be dropped.
I tried below in case of Chrome .
function pzHandleDrop(e){
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var count = files.length;
pzNumberOfFilesDropped = count;
pzNumberOfFilesUploaded = 0;
var busyIndicatorSet = false
if (count != 0) {
if(count < 21){
var reader = [];
for(var i = 0 ; i < count ; i++){
if(!busyIndicatorSet){
pega.u.d.setBusyIndicator(document.getElementById("pzDragDrop"),true);
busyIndicatorSet = true;
}
if(parseInt(files[i].size) <= parseInt("<%= maxFileUploadSizeBytes %>")){
reader[i] = new FileReader();
reader[i].fileName = files[i].name;
reader[i].onload = pzUploadFile;
try{
reader[i].readAsDataURL(files[i]);
}
catch(Error){/*Firefox throws exception on reading folder*/
alert("Only file(s) upload supported");
refreshFileListSection();
}
/*Folder drop case*/
reader[i].onerror = function(){
alert("Only file(s) upload supported");
refreshFileListSection();
}
}else {
alert("File " + files[i].name + " exceeds upload size limit of <%= maxFileUploadSizeMB %> MB");
refreshFileListSection();
}
}
}else{
alert("It allows only 20 files");
refreshFileListSection();
}
}
};
I am customizing below rule.
RULE-HTML-SECTION DATA-WORKATTACH-FILE PZMULTIDRAGDROPCONTROL #20170109T024327.463 GMT
Need to understand below code snippet.
function pzInitActivexDD() {
try
{
var oDesktopInt = document.getElementById("prDesktopInt");
if (oDesktopInt != null) {
var sServerUrl = window.location.href.substr(0, window.location.href.indexOf("?pyActivity"));
oDesktopInt.initDragDropControl(sServerUrl, window, "<%= maxFileUploadSizeBytes %>", "drag_drop_target", "drag_drop_over");
eval('function oDesktopInt::UploadComplete(p1, p2, p3, p4) { dragDropEventCallback(p1, p2, p3, p4);}');
// now display correct label
initActivexDDsetLabel(1);
}
}
catch ( e ){
}
};
Any suggestions to proceed further.
Thanks in advance.
***Updated by Moderator: Marissa to update categories***
Not sure what you want clarified. The code snippet you are looking at does not tie to number of files, but the number fo bytes in the file being uploaded.
If you look higher up in the same rule, you will see there is a reference to the number of files dropped: (OOPS, THIS IS THE VERY SNIPPET YOU INCLUDED YOURSELF....mybad)
function pzHandleDrop(e){
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var count = files.length;
pzNumberOfFilesDropped = count;
pzNumberOfFilesUploaded = 0;
var busyIndicatorSet = false
if (count != 0) {
I haven't played with this myself, but it looks as if you could put a check in here. The disadvantage, of course, would be that you wouldn't know you exceeded the number of files (say 10) until you finally stopped adding (at say 20), but my feeling is that if this is the easy way to do it, the user will learn fairly quickly that there is a limit. You might add some text element to the screen to advertise that as well.