fileupload.js

// This file has been altered to give the option to the author to automatically open the meta editor after uploading files.

(function (document, $) {

    "use strict";

    $(document).on("foundation-contentloaded", function (e) {
        _intialize();
    });

    $(document).on("foundation-collection-navigate", function (e) { //FixMe: For Clumn View, content loaded event should be triggered on column navigation as well
        if ($(".cq-damadmin-admin-childpages.foundation-collection").data("foundationLayout").layoutId === "column") {
            _intialize();
        }

    });

    function _intialize() {
        var fileUploadSelectSelector = "coral-chunkfileupload"; //FixMe: It should iterate & initialize all coral-fileupload, coral-chunkfileupload elements available on page
        var fileUploadAll = [];
        fileUploadAll = document.querySelectorAll(fileUploadSelectSelector);
        for (var i = 0; i < fileUploadAll.length; i++) {
            var fileUpload = fileUploadAll[i];

            if (!fileUpload) {
                return;
            }

            if (fileUpload.attributes.getNamedItem('is') && fileUpload.attributes.getNamedItem('is').value != "coral-chunkfileupload") {
                //Workarounf for Firexfox, Safari CQ-73789
                fileUpload.attributes.removeNamedItem('is');
                fileUpload.attributes.item('is').value = "coral-chunkfileupload";
            }

            if (fileUpload.isInitialised == null || fileUpload.isInitialised == false) {
                Coral.commons.ready(fileUpload, function (readyFileUpload) {
                    readyFileUpload.initialize();
                    var assetFU = new DamFileUpload().set('fileUpload', readyFileUpload);
                    assetFU.initialize();
                });
            }
        }
    }

    var uploadDialogEl;
    var currentUserId = getCurrentUserId();
    var FileRejectionType = {
        FILE_SIZE_EXCEEDED: function (fileUpload) {
            return Granite.I18n.get("Following file(s) are too large. Only files smaller than {0} GB are allowed.",
                sizeInGb(fileUpload.sizeLimit));
        },

        MIME_TYPE_REJECTED: function (fileUpload) {
            return Granite.I18n.get("Following file(s) are of file type(s) which are restricted.");
        }
    };

    function getCurrentUserId() {
        var currentUserId = "";
        var currentUserInfo;
        var CURRENT_USER_JSON_PATH = Granite.HTTP.externalize('/libs/granite/security/currentuser.json');
        var result = Granite.$.ajax({
            type: "GET",
            async: false,
            url: CURRENT_USER_JSON_PATH
        });
        if (result.status === 200) {
            currentUserInfo = JSON.parse(result.responseText);
            currentUserId = currentUserInfo.authorizableId;
        }
        return currentUserId;
    }

    function getCheckedOutBy(assetPath) {
        var checkedOutBy = "";
        var checkedOutInfo;
        var CHECKED_OUT_INFO_PATH = Granite.HTTP.externalize(assetPath + '.companioninfo.json');
        var result = Granite.$.ajax({
            type: "GET",
            async: false,
            url: CHECKED_OUT_INFO_PATH
        });
        if (result.status === 200) {
            checkedOutInfo = JSON.parse(result.responseText);
            checkedOutBy = checkedOutInfo.checkedOutBy;
        }
        return checkedOutBy;
    }

    function sizeInGb(sizeInBytes) {
        return Math.floor(sizeInBytes / (1024 * 1024 * 1024));
    }

    var DamFileUpload = new Class({
        fileUpload: null,
        uploadDialog: null,
        contentPath: '',
        contentType: '',
        directUpload: false,
        _ILLEGAL_FILENAME_CHARS: ['*', '/', ':', '[', '\\', ']', '|', '#', '%', '{', '}', '?'],

        set: function (prop, value) {
            this[prop] = value;
            return this;
        },

        initialize: function () {

            var dragCounter = 0;

            var self = this;

            //Create an upload dialog.
            self._createUploadDialog();

            document.body.appendChild(self.uploadDialog);

            var $foundationPath = $('.foundation-content-path');

            // Content path
            self.contentPath = self._getContentPath();
            // Content type: Folder or asset
            self.contentType = $foundationPath.data("foundationContentType");

            // Set the action attribute/
            self.fileUpload.setAttribute('action', self._getActionPath(self.contentPath));

            //Asynchronous upload by default
            self.fileUpload.setAttribute('async', true);

            //Container's Layout
            self.fileUpload.layoutId = $(".cq-damadmin-admin-childpages.foundation-collection").data("foundationLayout").layoutId;

            self.duplicateAssets = [];

            self.restrictedFiles = [];

            self.forbiddenFiles = [];

            self.manualPause = false;

            self.openMetaEditor = false;

            if (!self.fileUpload) {
                return;
            }
            // Add the file-added event listener
            Coral.commons.ready(self.fileUpload, function () {

                var fileRejectionMessageFunction = null;

                self.fileUpload
                    .on('click', function () {
                        var parentAPI = $(self.fileUpload).closest(".foundation-toggleable").adaptTo("foundation-toggleable");
                        if (parentAPI) {
                            parentAPI.hide();
                        }
                    })
                    .off('coral-fileupload:fileadded')
                    .on('coral-fileupload:fileadded', function (event) {
                        // Add file name parameter out of the file
                        event.detail.item.name = event.detail.item.file.name;
                    })
                    .off('coral-fileupload:filesizeexceeded')
                    .on('coral-fileupload:filesizeexceeded', function (event) {
                        // Add to rejected list if filesizeexceeded
                        self.fileUpload.rejectedFiles = self.fileUpload.rejectedFiles || [];
                        self.fileUpload.rejectedFiles.push(event.detail.item);
                        fileRejectionMessageFunction = FileRejectionType.FILE_SIZE_EXCEEDED;
                    })
                    .off('coral-fileupload:filemimetyperejected')
                    .on('coral-fileupload:filemimetyperejected', function (event) {
                        // Add to rejected list if filemimetyperejected
                        self.fileUpload.rejectedFiles = self.fileUpload.rejectedFiles || [];
                        self.fileUpload.rejectedFiles.push(event.detail.item);
                        fileRejectionMessageFunction = FileRejectionType.MIME_TYPE_REJECTED;
                    })
                    .on('change', function (event) {
                        if (self.fileUpload.uploadQueue && self.fileUpload.uploadQueue.length) {
                            if (self.directUpload == true && self._allFilesHasValidNames())
                                self._submit();
                            else
                                self._confirmUpload();
                            self.directUpload = false;
                        }
                        if (self.fileUpload.rejectedFiles && self.fileUpload.rejectedFiles.length) {
                            self._showRejectedFiles(fileRejectionMessageFunction);
                        }
                    })
                    .on('coral-fileupload:fileremoved', function (event) {
                        event.detail.item.listDialogEL.parentNode.removeChild(event.detail.item.listDialogEL);
                    })
                    .off('coral-fileupload:loadend')
                    .on('coral-fileupload:loadend', function (event) {
                        self._fileUploaded(event);
                    })
                    .off('coral-fileupload:progress')
                    .on('coral-fileupload:progress', function (event) {
                        self._onUploadProgress(event);
                    })
                    .off('coral-fileupload:load')
                    .on('coral-fileupload:load', function (event) {
                        self._onFileLoaded(event);
                    })
                    .off('coral-fileupload:error')
                    .on('coral-fileupload:error', function (event) {
                        self._fileUploadedStatus(event);
                    })
                    .off('coral-fileupload:abort')
                    .on('coral-fileupload:abort', function (event) {
                        self._fileUploadCanceled(event);
                    })
                    .off('coral-chunkfileupload:loadstart')
                    .on('coral-chunkfileupload:loadstart', function (event) {
                        self._onChunkUpoadStart(event);
                    })
                    .off('coral-chunkfileupload:progress')
                    .on('coral-chunkfileupload:progress', function (event) {
                        self._onChunkLoaded(event);
                    })
                    .off('coral-chunkfileupload:loadend')
                    .on('coral-chunkfileupload:loadend', function (event) {
                        self._onFileLoaded(event);
                        self._refresh(event);
                    })
                    .off('coral-chunkfileupload:cancel')
                    .on('coral-chunkfileupload:cancel', function (event) {
                        self._fileChunkedUploadCanceled(event);
                    })
                    .off('coral-chunkfileupload:pause')
                    .on('coral-chunkfileupload:pause', function (event) {
                        self._pauseChunkUpload(event);
                    })
                    .off('coral-chunkfileupload:resume')
                    .on('coral-chunkfileupload:resume', function (event) {
                        self._queryChunkUploadStatus(event);
                    })
                    .off('coral-chunkfileupload:error')
                    .on('coral-chunkfileupload:error', function (event) {
                        self._fileChunkedUploadError(event);
                    })
                    .off('coral-chunkfileupload:timeout')
                    .on('coral-chunkfileupload:timeout', function (event) {
                        self._fileChunkedUploadTimeout(event);
                    })
                    .off('coral-chunkfileupload:querysuccess')
                    .on('coral-chunkfileupload:querysuccess', function (event) {
                        self._fileChunkedUploadQuerySuccess(event);
                    })
                    .off('coral-chunkfileupload:queryerror')
                    .on('coral-chunkfileupload:queryerror', function (event) {
                        self._fileChunkedUploadQueryError(event);
                    });
                if (self.fileUpload.dragDropSupported == true) {
                    $("coral-shell-content")[0].addEventListener('drop', function (event) {
                        dragCounter = 0;
                        event.preventDefault();
                        self._dropZoneDrop(event);
                        self.directUpload = true;
                        self.fileUpload._onInputChange(event); // workaround until Coral.FileUpload adds an API to add Files programmatically
                    }, false);

                    $("coral-shell-content")[0].addEventListener('dragover', function (event) {
                        event.preventDefault(); // Preventing dragover is also required to prevent the browser of loading the file
                    }, false);

                    $("coral-shell-content")[0].addEventListener('dragleave', function (event) {
                        dragCounter--;
                        if (dragCounter === 0) {
                            self._dropZoneDragLeave(event);
                        }
                    }, false);

                    $("coral-shell-content")[0].addEventListener('dragenter', function (event) {
                        event.preventDefault(); // Preventing dragover is also required to prevent the browser of loading the file
                        dragCounter++;
                        self._dropZoneDragEnter(event);
                    }, false);
                }

            });
        },
        _onUploadProgress: function (event) {
            var el = event.detail.item.element;
            var progressBar = $('coral-progress', el)[0];
            progressBar.value = Math.round((event.detail.loaded / event.detail.total) * 70);
        },
        _onFileLoaded: function (event) {
            var self = this;
            var el = event.detail.item.element;
            var progressBar = $('coral-progress', el)[0];
            if (progressBar) {
                progressBar.value = 100; //FixMe: There is lag between progress bar status & refresh action, hence not removing the progress bar
                $('coral-icon', el).each(function (cnt, item) {
                    if (!item.classList.contains('coral-Icon--file'))
                        $(item).remove();
                });
            }
            $(event.detail.item.listDialogEL).remove();
        },
        _fileUploaded: function (event) {
            var self = this;
            self._fileUploadedStatus(event);
        },

        _onError: function (event) {
            var self = this;

            var $el = $(document.getElementById("uploadRow_" + _g.XSS.getXSSValue(event.detail.item.name)));
            $('.coral-Icon--pauseCircle', $el).hide();
            $('.coral-Progress-status', $el).css('background', '#FF0000');

            window.damUploadedFilesErrorCount = window.damUploadedFilesErrorCount || 0;
            window.damUploadedFilesErrorCount++;
            event.detail.item.isFailed = true;
            $('.dam-asset-upload-list-dialog-fileCount-failed', self.uploadDialog).show();
            $('.dam-asset-upload-list-dialog-fileCount-failed', self.uploadDialog)[0].innerText = window.damUploadedFilesErrorCount + Granite.I18n.get(' of ') + window.damTotalFilesForUpload + Granite.I18n.get(' assets failed');
            if (window.damUploadedFilesErrorCount + window.damUploadedFilesCount == window.damTotalFilesForUpload) {
                // upload is finished, change cancel button to OK button
                $('.dam-asset-upload-cancel-button', self.uploadDialog).text('OK');
            }
        },
        _allFilesHasValidNames: function () {
            var files = this.fileUpload.uploadQueue;
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    if (!this.utils.validFileName(files[i].file.name, this._ILLEGAL_FILENAME_CHARS))
                        return false;
                }
                return true;
            }
            return false;
        },
        _detectDuplicateAssets: function (event) {
            var self = this;
            if (self.duplicateAssets.length > 0) {
                var firstDuplicate = self.duplicateAssets[0];
                var uploadedAsset = "<b>" + _g.XSS.getXSSValue(firstDuplicate[0]) + "</b>";
                var duplicatedBy = firstDuplicate[1].split(":");
                var duplicatedByMess = "<br><br>";

                for (var i = 0; i < duplicatedBy.length; i++) {
                    duplicatedByMess += _g.XSS.getXSSValue(duplicatedBy[i]) + "<br>"
                }

                var assetExistsMessage = Granite.I18n
                    .get(
                        "The asset uploaded {0} already exists in these location(s):",
                        uploadedAsset);
                assetExistsMessage += duplicatedByMess;
                var description = Granite.I18n
                    .get("Click 'Keep It' to keep or 'Delete' to delete the the uploaded asset.");

                var applyToAllMessage = Granite.I18n.get("Apply to all");
                var userSelection = "";
                var content = assetExistsMessage + "<br><br>" + description;
                var applyToAll = '<coral-checkbox id="applyToAll">Apply to all</coral-checkbox>';
                +
                    applyToAllMessage;
                content = "<p>" + content + "</p>";
                if (self.duplicateAssets.length > 1) {
                    content += applyToAll;
                }
                var dialog = new Coral.Dialog().set({
                    id: 'buyDialog',
                    header: {
                        innerHTML: 'Duplicate Asset Detected !'
                    },
                    backdrop: Coral.Dialog.backdrop.STATIC,
                    content: {
                        innerHTML: content
                    }
                });
                $.each(dialog.getElementsByTagName('coral-dialog-footer'), function (cnt, item) {
                    //Keep Button
                    var keepButton = new Coral.Button().set({
                        variant: 'default',
                        innerText: Granite.I18n.get('Keep')
                    });
                    keepButton.label.textContent = Granite.I18n.get('Keep');
                    item.appendChild(keepButton);
                    keepButton.on('click', function () {
                        if ($("#applyToAll").val() === "on" || self.duplicateAssets.length === 1) {
                            self._cleanupAfterDeletingDuplicates();
                        } else {
                            // remove duplicates[0]
                            self.duplicateAssets.splice(0, 1);
                            self._detectDuplicateAssets(event);
                            //self._refresh(event);
                        }
                        dialog.hide();
                        //self._pageRefresh(event);
                    });

                    //Delete Button
                    var deleteButton = new Coral.Button().set({
                        variant: 'primary'
                    });
                    deleteButton.label.textContent = Granite.I18n.get('Delete');
                    item.appendChild(deleteButton);
                    deleteButton.on('click', function () {
                        if ($("#applyToAll").val() === "on" || self.duplicateAssets.length === 1) {
                            var a = [];
                            for (var i = 0; i < self.duplicateAssets.length; i++) {
                                a[i] = self.duplicateAssets[i][0];
                            }
                            self._deleteAssetsAfterUpload(a);
                            self._cleanupAfterDeletingDuplicates();
                            //self._refresh(event);
                        } else {
                            var a = [];
                            a[0] = self.duplicateAssets[0][0];
                            self._deleteAssetsAfterUpload(a);
                            // remove duplicates[0]
                            self.duplicateAssets.splice(0, 1);
                            self._detectDuplicateAssets(event);
                        }
                        dialog.hide();
                        //self._pageRefresh(event);
                    });

                });

                document.body.appendChild(dialog);
                dialog.show();
            }
        },
        _showRestrictedFiles: function (event) {
            var self = this;
            var restrictedFiles = self.restrictedFiles;
            if (restrictedFiles.length > 0) {
                var message = FileRejectionType.MIME_TYPE_REJECTED(self.fileUpload);
                var heading = Granite.I18n.get('Restricted Files');

                var content = "<p class='item-list'>";
                var filesToList = (restrictedFiles.length > 10) ? 10 : restrictedFiles.length;
                for (var i = 0; i < filesToList; i++) {
                    content = content + restrictedFiles[i]["fileName"] + "<br/>";
                }
                if (filesToList != restrictedFiles.length) {
                    content = content + "..." + "<br/>";
                }
                content += "</p>";
                content = "<p>" + message + "</p>" + content;

                var dialog = new Coral.Dialog().set({
                    id: 'buyDialog',
                    header: {
                        innerHTML: heading
                    },
                    backdrop: Coral.Dialog.backdrop.STATIC,
                    content: {
                        innerHTML: content
                    }
                });


                $.each(dialog.getElementsByTagName('coral-dialog-footer'), function (cnt, item) {
                    //Keep Button
                    var okButton = new Coral.Button().set({
                        variant: 'primary',
                        innerText: Granite.I18n.get('OK')
                    });
                    okButton.label.textContent = Granite.I18n.get('OK');
                    item.appendChild(okButton);
                    okButton.on('click', function () {
                        self.restrictedFiles = [];
                        dialog.hide();
                        self._cleanupAfterRestrictedAssets();
                    });
                });

                document.body.appendChild(dialog);
                dialog.show();
            }
        },
        _onChunkUploadError: function (event) {
            var self = this;
            var element = event.detail.item.element;
            $('coral-icon.coral-Icon--pauseCircle', element)[0].hide();
            $('coral-icon.coral-Icon--playCircle', element)[0].show();
            $('.coral-Progress-status', element)[0].style.background = 'red';
            var errorDialog = new Coral.Dialog()
                .set({
                    variant: 'error',
                    header: {
                        innerHTML: Granite.I18n.get('Error')
                    },
                    content: {
                        innerHTML: function () {
                            var contentHtml = Granite.I18n.get("Failed to upload the following file:");
                            contentHtml = contentHtml + "<br><br>";
                            contentHtml = contentHtml + event.detail.item.name;
                            contentHtml = contentHtml + "<br><br>";
                            contentHtml = contentHtml + Granite.I18n.get("You may retry.");
                            return contentHtml;
                        }()
                    },
                    footer: {
                        innerHTML: '<button is="coral-button" variant="primary" coral-close>Ok</button>'
                    }
                }).show();
        },
        _cleanupAfterDeletingDuplicates: function (event) {
            self.duplicateAssets = [];
            var contentApi = $(".foundation-content").adaptTo(
                "foundation-content");
            if (contentApi) {
                contentApi.refresh();
            } else {
                location.reload();
            }
        },
        _cleanupAfterRestrictedAssets: function (event) {
            var contentApi = $(".foundation-content").adaptTo(
                "foundation-content");
            if (contentApi) {
                contentApi.refresh();
            } else {
                location.reload();
            }
        },

        _prependErrorTooltip: function (item) {
            var errorIcon = new Coral.Icon().set({
                id: "dam-file-name-textfield-fielderror",
                icon: "infoCircle",
                size: "S"
            });
            errorIcon.className += ' coral-Form-fielderror error-info-icon';
            item.prepend(errorIcon);
            var errorToolTip = new Coral.Tooltip().set({
                variant: 'error',
                content: {
                    innerHTML: Granite.I18n.get("Characters {0} are not allowed in the file name", this._ILLEGAL_FILENAME_CHARS.join(', '))
                },
                target: '#dam-file-name-textfield-fielderror',
                placement: 'left',
                id: "dam-file-name-textfield-fielderror-tooltip"
            });
            item.prepend(errorToolTip);
        },

        _onChunkUpoadStart: function (event) {
            var $el = $(document.getElementById("uploadRow_" + _g.XSS.getXSSValue(event.detail.item.name)));
            $('.coral-Icon--pauseCircle', $el)[0].show();
        },
        _onChunkLoaded: function (event) {
            var self = this;
            var el = event.detail.item.element;
            if (el) {
                var progress = ((event.detail.offset + event.detail.chunk.size) / (event.detail.item.file.size)) * 70;
                if (((event.detail.item.file.size - event.detail.offset) <= 2 * event.detail.chunk.size) && $('coral-progress', el)[0].getAttribute('autoProgressSet') != 'true') {
                    $('coral-progress', el)[0].setAttribute('autoProgressSet', 'true');
                    var i = 1;
                    var timer = setInterval(function () {
                        if (i > 20 || $('coral-progress', el)[0].value == 100) {
                            clearInterval(timer);
                            return;
                        }
                        progress = progress + 1;
                        $('coral-progress', el)[0].value = progress;
                        i++;
                    }, 10000);
                }
                if (progress === 100) {
                    self._onFileLoaded(event);
                } else {
                    $('coral-progress', el)[0].value = progress;
                }
            }
        },
        /**
         * Creates a dialog which is not attached to the dom
         * */
        _createUploadDialog: function () {
            var self = this;
            if (!self.uploadDialog) {
                uploadDialogEl = new Coral.Dialog().set({
                    header: {
                        innerHTML: Granite.I18n.get('Upload Assets')
                    },
                    backdrop: Coral.Dialog.backdrop.STATIC
                });
                $(uploadDialogEl).attr('id', 'uploadListDialog');

                $.each(uploadDialogEl.getElementsByTagName('coral-dialog-footer'), function (cnt, item) {

                    var uploadFilesStatus = document.createElement('div');
                    uploadFilesStatus.classList.add('dam-asset-upload-list-dialog-uploadStatus');
                    // Uploaded asset count message
                    var uploadFilesCount = document.createElement('div');
                    uploadFilesCount.classList.add('foundation-layout-util-subtletext');
                    uploadFilesCount.classList.add('dam-asset-upload-list-dialog-fileCount-uploaded');
                    //Failed asset count message
                    var failedFilesCount = document.createElement('div');
                    failedFilesCount.classList.add('foundation-layout-util-subtletext');
                    failedFilesCount.classList.add('dam-asset-upload-list-dialog-fileCount-failed');

                    uploadFilesStatus.appendChild(uploadFilesCount);
                    uploadFilesStatus.appendChild(failedFilesCount);
                    item.appendChild(uploadFilesStatus);

                    //Open meta editor after upload
                    var metaEditorCheckbox = new Coral.Checkbox().set({
                        label: {
                            innerHTML: "Open metadata editor after upload"
                        },
                        value: ""
                    });
                    metaEditorCheckbox.style.float = 'left';
                    item.appendChild(metaEditorCheckbox);

                    //Cancel Button
                    var cancelButton = new Coral.Button().set({
                        variant: 'quiet',
                        innerText: Granite.I18n.get('Cancel')
                    });
                    cancelButton.label.textContent = Granite.I18n.get('Cancel');
                    cancelButton.classList.add('dam-asset-upload-cancel-button');
                    item.appendChild(cancelButton);
                    cancelButton.on('click', function () {
                        self.uploadDialog.hide();
                        self._cancelAll();
                    });

                    //Upload Button
                    var uploadButton = new Coral.Button().set({
                        variant: 'primary'
                    });
                    uploadButton.label.textContent = Granite.I18n.get('Upload');
                    uploadButton.classList.add('dam-asset-upload-button');
                    item.appendChild(uploadButton);
                    uploadButton.on('click', function () {
                        self.openMetaEditor = metaEditorCheckbox.checked;
                        self._submit();
                    });
                });
            }
            self.uploadDialog = uploadDialogEl;

        },

        _cancelAll: function () {
            var self = this;
            self.fileUpload.uploadQueue.forEach(function (item, cnt) {
                item.isCancelled = true;
            });

            for (var i = 0; i < self.fileUpload.uploadQueue.length;) {
                var item = self.fileUpload.uploadQueue[i];
                i++;
                if (($('coral-progress', item.element)[0].value != 100) || item.isFailed) {
                    i--;
                    self.fileUpload.cancel(item);
                }
            }
            $.each(self.uploadDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                $(item).empty();
            });

        },
        _addFileListToDialog: function (item) {
            var self = this;
            var fileName = item.file.name;
            var div = document.createElement('div');
            div.setAttribute('style', 'margin-bottom:0.5rem;');
            div.appendChild(new Coral.Textfield()
                .set({
                    value: fileName,
                    id: 'dam-asset-upload-rename-input'
                })
                .on('change', function (event) {
                    if (!self.utils.validFileName(this.value, self._ILLEGAL_FILENAME_CHARS)) {
                        this.className = this.className + ' is-invalid';
                        Array.prototype.slice.call(this.parentElement.getElementsByTagName('coral-tooltip')).forEach(function (item) {
                            $(item).remove();
                        });
                        Array.prototype.slice.call(this.parentElement.getElementsByClassName('coral-Form-fielderror')).forEach(function (item) {
                            $(item).remove();
                        });
                        this.parentElement.style.position = "relative";
                        this.parentElement.style.marginTop = "10px";
                        self._prependErrorTooltip(this.parentElement);
                        event.preventDefault();
                        return false;
                    } else {
                        this.classList.remove("is-invalid");
                        this.parentElement.style.marginTop = "";
                        Array.prototype.slice.call(this.parentElement.getElementsByTagName('coral-tooltip')).forEach(function (item) {
                            $(item).remove();
                        });
                        Array.prototype.slice.call(this.parentElement.getElementsByClassName('coral-Form-fielderror')).forEach(function (item) {
                            $(item).remove();
                        });
                        self.utils.addOrReplaceInCustomPatameter(item,
                            'fileName',
                            this.value)
                    }
                })
                .on('keypress', function (event) {
                    if (!self.utils.validCharInput(event.charCode)) {
                        event.preventDefault();
                    }
                })
            );
            div.appendChild(new Coral.Button()
                .set({
                    variant: 'minimal',
                    icon: 'closeCircle',
                    iconsize: 'XS'
                })
                .on('click', function (event) {
                    self.fileUpload._clearFile(fileName);
                    if (self.fileUpload.uploadQueue.length == 0) {
                        self.uploadDialog.hide();
                        self._cancelAll();
                    }
                })
            );
            item.listDialogEL = div;
            $.each(self.uploadDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                item.appendChild(div);
            });
        },
        _getContentPath: function () {
            var selectedFolders = $(".cq-damadmin-admin-childpages.foundation-collection .foundation-collection-item.is-selected");

            if (selectedFolders.length) {
                return selectedFolders.data("foundationCollectionItemId");
            }
            return $(".cq-damadmin-admin-childpages.foundation-collection").data("foundationCollectionId");
        },
        _getActionPath: function (path) {
            path = path.trim();
            if (path.charAt(path.length - 1) === "/") {
                path = path.substring(0, path.length - 1);
            }
            return Granite.HTTP.externalize(path) + '.createasset.html';
        },

        _submit: function () {
            var self = this;
            self.contentPath = self._getContentPath();
            if (self.fileUpload.uploadQueue && self.fileUpload.uploadQueue.length) {
                // add browser warning for the refresh
                window.onbeforeunload = Granite.I18n.get('Upload is in Progress. Refreshing page will lose the files that have not completed the upload.');
                // normalizeWhitespaces(fileUpload);

                var fileNames = [];
                var allFileNamesValid = true;
                var firstInvalidElement = null;
                $('coral-dialog-content div input', self.uploadDialog).each(function (cnt, ech) {
                    if (!self.utils.validFileName(ech.value, self._ILLEGAL_FILENAME_CHARS)) {
                        allFileNamesValid = false;
                        if (!firstInvalidElement) {
                            firstInvalidElement = this;
                        }
                        this.className = this.className + ' is-invalid';
                        Array.prototype.slice.call(this.parentElement.getElementsByTagName('coral-tooltip')).forEach(function (item) {
                            $(item).remove();
                        });
                        Array.prototype.slice.call(this.parentElement.getElementsByClassName('coral-Form-fielderror')).forEach(function (item) {
                            $(item).remove();
                        });
                        this.parentElement.style.position = "relative";
                        this.parentElement.style.marginTop = "10px";
                        self._prependErrorTooltip(this.parentElement);
                    }
                });

                if (firstInvalidElement) {
                    firstInvalidElement.focus();
                }

                if (allFileNamesValid) {
                    // get if any duplicate files are being uploaded
                    var duplicates = self.utils.getDuplicates(self.fileUpload.uploadQueue, self._getContentPath());
                    if (duplicates && duplicates.length) {
                        self.uploadDialog.hide();
                        self._showDuplicates(duplicates);
                    } else {
                        self._continueUpload();
                    }

                }
            }
        },

        _showDuplicates: function (duplicates) {
            var self = this;
            var xssName = _g.XSS.getXSSValue(duplicates[0]["name"]);
            var firstDuplicate = "<b>" + xssName + "</b>";
            var duplicateDialog = new Coral.Dialog().set({
                header: {
                    innerHTML: Granite.I18n.get('Name Conflict')
                }
            });
            document.body.appendChild(duplicateDialog);
            duplicateDialog.show();
            var assetExistsMessage;
            var description;
            var canOverwrite = self.utils.canOverwriteAssets(duplicates, self.contentPath);

            if (self.contentType === 'folder') {
                assetExistsMessage = Granite.I18n.get(
                    "An asset named {0} already exists in this location.",
                    firstDuplicate);
                description = canOverwrite ? Granite.I18n
                        .get("Click 'Create Version' to create the version of the asset or 'Replace' to replace the asset or 'Keep Both' to keep both assets.") :
                    Granite.I18n.get("Click 'Keep Both' to keep both assets or 'Cancel' to cancel the upload.");
            } else if (self.contentType === 'asset') {
                assetExistsMessage = Granite.I18n.get(
                    "A rendition named {0} already exists in this location",
                    firstDuplicate);
                description = Granite.I18n
                    .get("Click 'Replace' to replace the rendition or 'Keep Both' to keep both renditions or 'X' to cancel the upload.");
            }
            $.each(duplicateDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                item.innerHTML = '<p>' + assetExistsMessage + '<br><br>' + description + '</p>';
                if (duplicates.length > 1) {
                    var checkbox = new Coral.Checkbox();
                    $('coral-checkbox-label', checkbox).each(function () {
                        this.innerHTML = Granite.I18n.get("Apply to all");
                    });
                    item.appendChild(checkbox);
                }
            });

            // Add buttons to footer
            $.each(duplicateDialog.getElementsByTagName('coral-dialog-footer'), function (cnt, item) {

                var cancelButton = new Coral.Button().set({
                    variant: 'secondary'
                });
                cancelButton.label.textContent = Granite.I18n.get("Cancel");
                item.appendChild(cancelButton);
                cancelButton.on('click', function () {
                    duplicateDialog.hide();
                });

                var keepBothButton = new Coral.Button().set({
                    variant: 'secondary'
                });
                keepBothButton.label.textContent = Granite.I18n.get("Keep Both");
                item.appendChild(keepBothButton);
                keepBothButton.on('click', function () {
                    self._duplicateOperations.keepBoth(duplicateDialog, self, duplicates);
                    duplicateDialog.hide();
                });

                if (canOverwrite) {
                    var replaceButton = new Coral.Button().set({
                        variant: 'secondary'
                    });
                    replaceButton.label.textContent = Granite.I18n.get("Replace");
                    item.appendChild(replaceButton);
                    replaceButton.on('click', function () {
                        self._duplicateOperations.replace(duplicateDialog, self, duplicates);
                        duplicateDialog.hide();
                    });
                }

                if (self.contentType === 'folder' && canOverwrite) {
                    var createVersionButton = new Coral.Button().set({
                        variant: 'primary'
                    });
                    createVersionButton.label.textContent = Granite.I18n.get("Create Version");
                    item.appendChild(createVersionButton);
                    createVersionButton.on('click', function () {
                        self._duplicateOperations.createVersion(duplicateDialog, self, duplicates);
                        duplicateDialog.hide();
                    });
                }
            });
        },

        _showRejectedFiles: function (fileRejectionMessageFunction) {
            var self = this;
            var relectedDialog = new Coral.Dialog()
                .set({
                    variant: 'error',
                    header: {
                        innerHTML: Granite.I18n.get('Rejected Files')
                    },
                    content: {
                        innerHTML: function () {
                            var contentHtml = "";

                            if (fileRejectionMessageFunction != null)
                                contentHtml = fileRejectionMessageFunction(self.fileUpload);

                            contentHtml = contentHtml + "<br><br>";
                            for (var i = 0; i < self.fileUpload.rejectedFiles.length; i++) {
                                contentHtml = contentHtml + self.fileUpload.rejectedFiles[i].file.name + "<br>";
                            }
                            return contentHtml;
                        }()
                    },
                    footer: {
                        innerHTML: '<button is="coral-button" variant="primary" coral-close>Ok</button>'
                    }
                }).show();
            self.fileUpload.rejectedFiles = [];
        },

        _fileUploadCanceled: function (event) {
            var self = this;
            var item = event.detail.item;
            if (!item._xhr) {
                var cancelEvent = {};
                cancelEvent.item = item;
                cancelEvent.fileUpload = self.fileUpload;
                self._fileUploadItemCleanup(cancelEvent);
            } else if (self.fileUpload._canChunkedUpload(item) === true) {
                self._cleanUpChunkedUpload(item);
                self.fileUpload._cancelChunckedUpload(item);
                var cancelEvent = {};
                cancelEvent.item = item;
                cancelEvent.fileUpload = self.fileUpload;
                self._fileUploadItemCleanup(cancelEvent);
            } else if (item._xhr.readyState === 0) {
                var cancelEvent = {};
                cancelEvent.item = item;
                cancelEvent.fileUpload = self.fileUpload;
                self._fileUploadItemCleanup(cancelEvent);
            } else {
                self._cancelUpload(item);
            }

        },

        _fileUploadItemCleanup: function (event) {
            var self = this;
            // hide the item
            // Using document.getElementById as direct jquery selector behaves erroneously for xss prone string
            $(document.getElementById("uploadRow_" + _g.XSS.getXSSValue(event.item.name))).remove();

            self._refresh(event);
        },

        _changeIconPlayToPause: function (item) {
            var $el = $(document.getElementById("uploadRow_" + _g.XSS.getXSSValue(item.name)));
            $(".coral-Progress-bar", $el).addClass("small");
            $('.coral-Icon--playCircle', $el).hide();
            $('.coral-Icon--pauseCircle', $el).removeAttr("hidden");
            $('.coral-Icon--pauseCircle', $el).show();
            $('.coral-Progress-status', $el).css('background', '#2480cc');
        },

        _changeIconPauseToPlay: function (item) {
            var $el = $(document.getElementById("uploadRow_" + _g.XSS.getXSSValue(item.name)));
            $('.coral-Icon--pauseCircle', $el).hide();
            $('.coral-Icon--playCircle', $el).removeAttr("hidden");
            $('.coral-Icon--playCircle', $el).show();
            $('.coral-Progress-status', $el).css('background', '#FF0000');
        },

        /**
         Cancel upload of a file item
         @param {Object} item
         Object representing a file item
         */
        _cancelUpload: function (item) {
            item._xhr.abort();
        },

        _deleteAssetsAfterUpload: function (files) {
            // deletes the files from the server
            for (var i = 0; i < files.length; i++) {
                var filePath = Granite.HTTP.externalize(files[i]);
                Granite.$.ajax({
                    async: false,
                    url: filePath,
                    type: "POST",
                    data: {
                        ":operation": "delete"
                    }
                });
            }
        },

        _fileUploadedStatus: function (event) {
            var self = this;

            if (event.detail.item.statusChecked && event.detail.item.statusChecked == true)
                return;

            if (event.detail.item.isCancelled && event.detail.item.isCancelled == true) {
                var cancelEvent = {};
                cancelEvent.item = event.detail.item;
                cancelEvent.fileUpload = self.fileUpload;
                self._fileUploadItemCleanup(cancelEvent);
                return;
            }
            if ((event.detail && event.detail.item.status && event.detail.item.status == 200)) {
                self._refresh(event);
                return;
            } else if ((event.detail && event.detail.item.status && event.detail.item.status == 409)) {
                if (event.detail.item.status && event.detail.item.status == 409) {
                    var response = event.detail.item.responseText;
                    var title = $("#Path", response).text();
                    var changeLog = $("#ChangeLog", response).text().trim();
                } else {
                    //this condition is to support IE9
                    var title = event.message.headers['Path'];
                    var changeLog = event.message.headers['ChangeLog'];
                }
                var indexOfDuplicates = changeLog.indexOf("duplicates") + "duplicates(\"".length;
                var duplicates = changeLog.substring(indexOfDuplicates, changeLog.indexOf("\"", indexOfDuplicates));
                var arr = [title, duplicates];
                self.duplicateAssets.push(arr);
                self._refresh(event);
            } else if ((event.detail && event.detail.item.status && event.detail.item.status == 415) ||
                (event.detail && event.detail.item.status && event.detail.item.status == 415)) {
                if (event.detail && event.detail.item.status && event.detail.item.status == 415) {
                    var response = event.detail.item._xhr.responseText;
                    var msg = $("#Message", response).text();
                } else {
                    //this condition is to support IE9
                    var msg = $("#Message", response).text();
                }
                var file = msg.substr(0, msg.lastIndexOf(':'));
                var mimetype = msg.substr(msg.lastIndexOf(':') + 1);
                var obj = {
                    fileName: file,
                    mimeType: mimetype
                };
                self.restrictedFiles.push(obj);
                self._refresh(event);
            } else if ((event.detail && event.detail.item.status && event.detail.item.status == 403) ||
                (event.detail && event.detail.item.status && event.detail.item.status == 403)) {
                var forbiddenFile = {
                    fileName: event.item.fileName
                };
                self.forbiddenFiles.push(forbiddenFile);
                self._refresh(event);
            } else {
                self._onError(event);
            }

            event.detail.item.statusChecked = true;
            event.detail.item._xhr = null;
        },

        /**
         * will be called up on fileuploadsuccess, fileUploadedStatus and fileuploadcanceled.
         * when all the files have beend processed, then refreshes the content and
         * returns true otherwise returns false;
         */
        _refresh: function (event) {
            var self = this;

            window.damUploadedFilesCount = window.damUploadedFilesCount || 0;
            if (event.item && event.item.isCancelled && event.item.isCancelled == true) {
                window.damTotalFilesForUpload--;
                if (event.item.isFailed && event.item.isFailed == true)
                    window.damUploadedFilesErrorCount--;
            } else {
                window.damUploadedFilesCount++;
            }
            $('.dam-asset-upload-list-dialog-fileCount-uploaded', self.uploadDialog)[0].innerText =
                Granite.I18n.get("{0} of {1} assets uploaded", [window.damUploadedFilesCount, window.damTotalFilesForUpload], "Variables are numbers");

            if (window.damUploadedFilesErrorCount && window.damUploadedFilesErrorCount != 0) {
                $('.dam-asset-upload-list-dialog-fileCount-failed', self.uploadDialog).show();
                $('.dam-asset-upload-list-dialog-fileCount-failed', self.uploadDialog)[0].innerText =
                    Granite.I18n.get("{0} of {1} assets failed", [window.damUploadedFilesErrorCount, window.damTotalFilesForUpload], "Variables are numbers");
            } else {
                $('.dam-asset-upload-list-dialog-fileCount-failed', self.uploadDialog).hide();
            }

            if (window.damUploadedFilesErrorCount + window.damUploadedFilesCount == window.damTotalFilesForUpload) {
                // upload is finished, change cancel button to OK button
                $('.dam-asset-upload-cancel-button', self.uploadDialog).text('OK');
            }

            if (window.damUploadedFilesCount === window.damTotalFilesForUpload) {
                window.damUploadedFilesCount = 0;
                window.damTotalFilesForUpload = 0;
                // clean onbeforeunload
                window.onbeforeunload = null;

                if (self.duplicateAssets && self.duplicateAssets.length > 0) {
                    self._detectDuplicateAssets(event);
                } else if (self.restrictedFiles && self.restrictedFiles.length > 0) {
                    self._showRestrictedFiles(event);
                } else {
                    //refresh foundation-content
                    var contentApi = $(".foundation-content").adaptTo("foundation-content");
                    if (contentApi) {
                        contentApi.refresh();
                    } else {

                        if (self.openMetaEditor) {

                            var splitUrl = window.location.href.split("assets.html");
                            var metaEditorUrl = "/mnt/overlay/dam/gui/content/assets/metadataeditor.external.html?_charset_=utf-8";

                            this.fileUpload._uploadQueue.forEach(function (item) {
                                metaEditorUrl += "&item=" + splitUrl[1] + "/" + item.file.name;
                            });

                            window.location = metaEditorUrl;

                        } else {
                            location.reload();
                        }

                    }
                }


                self._cleanup(event);
                return true;
            } else {
                return false;
            }

        },

        _addFileUploadsToDialog: function (item) {
            var self = this;
            var fileName = item.file.name;
            var div = document.createElement('div');

            div.appendChild(self._createFileUploadRow(item));
            $.each(self.uploadDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                item.appendChild(div);
            });
        },

        _confirmUpload: function (event) {
            var self = this;
            // refresh layoutId
            self.fileUpload.layoutId = $(".cq-damadmin-admin-childpages.foundation-collection").data("foundationLayout").layoutId;

            // clear previous items
            $.each(self.uploadDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                $(item).empty();
            });

            self.fileUpload.uploadQueue.forEach(function (item, cnt) {
                item.parameters = item.parameters ? item.parameters : [];
                self._addFileListToDialog(item);
            });

            self.uploadDialog.on('keypress', function (event) {
                var charCode = event.which || event.keyCode;
                if (charCode == 13) { //Enter keycode
                    self._submit();
                }
            });

            self.uploadDialog.getElementsByClassName("dam-asset-upload-button")[0].show();
            self.uploadDialog.show();
        },

        _continueUpload: function (event) {
            var self = this;
            //Hide the empty message banner before adding the cards
            $(".cq-damadmin-assets-empty-content").hide();
            // refresh layoutId
            self.fileUpload.layoutId = $(".cq-damadmin-admin-childpages.foundation-collection").data("foundationLayout").layoutId;

            // clear previous items
            $.each(self.uploadDialog.getElementsByTagName('coral-dialog-content'), function (cnt, item) {
                $(item).empty();
            });

            self.fileUpload.uploadQueue.forEach(function (item, cnt) {
                item.parameters = item.parameters ? item.parameters : [];
                //CQ-103490 - Trim leading and trailing spaces from file names
                if (item.parameters[0] && item.parameters[0].value) {
                    item.parameters[0].value = (item.parameters[0].value).trim();
                }
                self._addFileUploadsToDialog(item);
            });

            self.uploadDialog.show();
            self.uploadDialog.getElementsByClassName("dam-asset-upload-button")[0].hide();
            $('.dam-asset-upload-cancel-button', self.uploadDialog).removeClass('coral-Button--quiet').addClass('coral-Button--primary');
            self.upload();
            window.damTotalFilesForUpload = window.damTotalFilesForUpload || 0;
            window.damTotalFilesForUpload = window.damTotalFilesForUpload + self.fileUpload.uploadQueue.length;
            $('.dam-asset-upload-list-dialog-fileCount-uploaded', self.uploadDialog)[0].innerText =
                Granite.I18n.get("0 of {0} assets uploaded", window.damTotalFilesForUpload, "Variables are numbers");
            self.fileUpload.uploadQueue = [];
        },
        /**
         Uploads the given filename, or all the files into the queue. It accepts extra parameters that are sent with the
         file.

         @param {String} [filename]
         The name of the file to upload.
         */
        upload: function (filename) {
            // file may be uploaded to a selected folder in current folder or current folder, so update action path before upload
            this.fileUpload.setAttribute('action', this._getActionPath(this._getContentPath()));
            if (!this.fileUpload.async) {

                if (typeof filename === 'string') {
                    throw new Error('Coral.FileUpload does not support uploading a file from the queue on synchronous mode.');
                }

                var $form = this.fileUpload.$.parents('form');
                if (!$form.length) {
                    $form = $(document.createElement('form'));
                    $form
                        .attr({
                            method: this.fileUpload.method.toLowerCase(), // method is lowercase for consistency with other attributes
                            enctype: 'multipart/form-data',
                            action: this._getActionPath(this._getContentPath())
                        })
                        .css('display', 'none');

                    $(this.fileUpload._elements.input).wrap($form);

                    Array.prototype.forEach.call(this.fileUpload.querySelectorAll('input[type="hidden"]'), function (input) {
                        $form.append(input);
                    });
                }

                $form.append($(document.createElement('input')).attr({
                    type: 'hidden',
                    name: '_charset_',
                    value: 'utf-8'
                }));

                $form.trigger('submit');

            } else {
                if (this.fileUpload.parallelUploads === false) {
                    var self = this;
                    var requests = [];
                    this.fileUpload._uploadQueue.forEach(function (item) {
                        self.fileUpload._abortFile(item.file.name);
                        requests.push(self.fileUpload._ajaxUpload(item, ""));
                    });

                    var p = requests[0](); // start off the chain
                    for (var i = 1; i < requests.length; i++) {
                        p = p.then(requests[i]);
                    }
                } else {

                    if (typeof filename === 'string') {
                        this.fileUpload._uploadFile(filename);
                    } else {

                        var self = this;
                        var requests = [];
                        this.fileUpload._uploadQueue.forEach(function (item) {
                            self.fileUpload._abortFile(item.file.name);
                            requests.push(self.fileUpload._ajaxUpload(item, ""));
                        });

                        for (var i = 0; i < requests.length; i++) {
                            requests[i]();
                        }
                    }
                }
            }
        },
        //Creating item at ColumnMode
        _createFileUploadRow: function (item) {
            var self = this;
            var assetName = _g.XSS.getXSSValue(item.name);
            item.parameters.forEach(function (each) {
                if (each.name == 'fileName') {
                    assetName = _g.XSS.getXSSValue(each.value);
                }
            });

            var uploadRow = document.createElement('div');
            uploadRow.classList.add("dam-asset-upload-list-dialog-item");
            uploadRow.id = "uploadRow_" + assetName;
            var title = document.createElement('div');
            title.innerHTML = assetName.substring(0, 50);
            var icon = new Coral.Icon().set({
                icon: "file",
                size: "XS"
            });
            icon.classList.add("dam-asset-upload-list-dialog-file-icon");
            uploadRow.appendChild(icon);

            var progress = new Coral.Progress();
            progress.size = Coral.Progress.size.SMALL;
            progress.classList.add("dam-asset-upload-list-item-progress");
            progress.id = "progress_" + assetName;
            var progressBar = $('.coral-Progress-bar', progress)[0];
            progressBar.classList.add("dam-asset-upload-list-item-progress-bar");

            var cancelIcon = new Coral.Icon().set({
                size: 'XS',
                icon: 'closeCircle'
            }).on('click', function () {
                self.fileUpload.cancel(item);
            });
            cancelIcon.classList.add("dam-asset-upload-list-item-cancel-icon");
            var pauseIcon = new Coral.Icon().set({
                size: 'XS',
                icon: 'pauseCircle'
            }).on('click', function () {
                self.fileUpload.pause(item);
            }).hide();
            pauseIcon.classList.add("dam-asset-upload-list-item-pause-icon");
            var playIcon = new Coral.Icon().set({
                size: 'XS',
                icon: 'playCircle'
            }).on('click', function () {
                self.fileUpload.resume(item);
            }).hide();
            playIcon.classList.add("dam-asset-upload-list-item-play-icon");
            title.appendChild(cancelIcon);

            if (self.fileUpload._canChunkedUpload(item)) {
                title.appendChild(pauseIcon);
                title.appendChild(playIcon);
            }
            uploadRow.appendChild(title);
            uploadRow.appendChild(progress);
            item.element = uploadRow;
            return uploadRow;

        },

        _cleanup: function (event) {
            var self = this;
            self.uploadDialog.hide();
            window.onbeforeunload = null;
            window.damFileUploadSucces = 0;
            self.fileUpload.list = [];
            self.fileUpload.uploadQueue.length = 0;
            self.fileUpload.rejectedFiles = [];
        },

        _fileChunkedUploadCanceled: function (event) {
            var self = this;
            var item = event.detail.item;
            self._changeIconPauseToPlay(item);
        },

        _cleanUpChunkedUpload: function (item) {
            var self = this;
            var filePath = self._getContentPath() + "/" + UNorm.normalize("NFC", item.name);
            var jsonPath = filePath + "/_jcr_content/renditions/original.1.json?ch_ck = " + Date.now();
            jsonPath = Granite.HTTP.externalize(jsonPath);
            var result = Granite.$.ajax({
                type: "GET",
                async: false,
                url: jsonPath
            });
            if (result.status === 200) {
                self._deleteChunks([item]);
            } else {
                self._deleteAssetsAfterUpload([filePath]);
            }
        },

        _deleteChunks: function (files) {
            // deletes the files from the server
            var self = this;
            var foundationContentPath = self._getContentPath();
            var foundationContentType = self.contentType;

            if (foundationContentType === "asset") {
                foundationContentPath += "/_jcr_content/renditions";
            }
            foundationContentPath = Granite.HTTP.externalize(foundationContentPath);
            for (var i = 0; i < files.length; i++) {
                var filePath = foundationContentPath + "/" + UNorm.normalize("NFC", files[i]["name"]);
                if (self.fileUpload._canChunkedUpload(files[i]) === true) {
                    self.fileUpload._deleteChunkedUpload(filePath);
                }
            }
        },


        //Pause
        _pauseChunkUpload: function (event) {
            var self = this;
            var item = event.detail.item;
            self.fileUpload._pauseChunckedUpload(item);
        },

        _queryChunkUploadStatus: function (event) {
            var self = this;
            var item = event.detail.item;
            self._changeIconPlayToPause(item);
            var url = self._getChunkInfoUrl(item, self.fileUpload);
            self.fileUpload._queryChunkedUpload(url, item);
        },

        _getChunkInfoUrl: function (item, fileupload) {
            var index = fileupload.attributes['action'].value.indexOf(".createasset.html");
            return fileupload.attributes['action'].value.substring(0, index) + "/" + item["name"] + ".3.json";
        },

        _fileChunkedUploadQuerySuccess: function (event) {
            var self = this;
            try {
                self._changeIconPlayToPause(event.detail.item);
                var json = JSON.parse(event.detail.originalEvent.target.responseText);
                var bytesUploaded = json["jcr:content"]["sling:length"];
                var fileSize = json["jcr:content"]["sling:fileLength"];
                var uploadStatus = json["jcr:content"]["chunkUploadStatus"];
                if (uploadStatus) {
                    var status = uploadStatus.split("?")[0];
                }
                if (status && status == "inProgress") {
                    // merging in progress, check status after 5 seconds
                    setTimeout(function () {
                        self._queryChunkUploadStatus(event);
                    }, 5000);

                } else if (status && status == "Error") {
                    // merge failed
                    event.message = "Error in Uploading"
                    var item = event.detail.item;
                    var error = uploadStatus.split("?");
                    if (error.length > 1) {
                        var errorStatus = error[1];
                        json = JSON.parse(errorStatus);
                        if (json["status"] == 409) {
                            // handle duplicate asset error
                            var arr = [json["path"], json["duplicates"]];
                            self.duplicateAssets.push(arr);
                            self.fileUpload.trigger("coral-chunkfileupload:loadend", {
                                item: event.detail.item,
                                originalEvent: event,
                                fileUpload: self.fileUplaod
                            });
                        } else if (json["status"] == 415) {
                            // handle mime type unsupported error
                            var obj = {
                                fileName: json["file"],
                                mimeType: json["mimetype"]
                            };
                            self.restrictedFiles.push(obj);
                            self._cleanUpChunkedUpload(item);
                            self.fileUpload.trigger("coral-chunkfileupload:loadend", {
                                item: event.detail.item,
                                originalEvent: event,
                                fileUpload: self.fileUplaod
                            });
                        }
                        else {
                            // handle any other error
                            self._handleChunkUploadFailed(event);
                        }
                    }
                    self.fileUpload.resolve();
                } else if (bytesUploaded) {
                    self.fileUpload._resumeChunkedUpload(event.detail.item, bytesUploaded);
                } else {
                    // merge was success
                    event.message = "Upload Success"
                    self.fileUpload.trigger("coral-chunkfileupload:loadend", {
                        item: event.detail.item,
                        originalEvent: event,
                        fileUpload: self.fileUplaod
                    });
                    self.fileUpload.resolve();
                }
            } catch (err) {
                event.message = "Error in query chunked upload."
                var item = event.detail.item;
                self._handleChunkUploadFailed(event);
                self.fileUpload.resolve();
            }
        },

        _handleChunkUploadFailed: function (event) {
            var self = this;
            var item = event.detail.item;
            self._onError(event);
            if (self.fileUpload._canChunkedUpload(item) === true) {
                self._cleanUpChunkedUpload(item);
                self.fileUpload._cancelChunckedUpload(item);
            }
        },
        _fileChunkedUploadQueryError: function (event) {
            var self = this;
            if (event.detail.originalEvent.target.status == 404) {
                self.fileUpload._resumeChunkedUpload(event.detail.item, 0);
            } else {
                self._fileChunkedUploadError(event);
            }
        },

        _fileChunkedUploadTimeout: function (event) {
            var self = this;
            // last chunk timeout
            // query about chunk merge status after 5 second
            setTimeout(function () {
                self._queryChunkUploadStatus(event);
            }, 5000);
        },

        _fileChunkedUploadError: function (event) {
            var self = this;

            if ((event.detail && event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 200)) {
                self.fileUpload.resolve();
                return;
            } else if ((event.detail && event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 415)) {
                if (event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 415) {
                    var response = event.detail.item._xhr.responseText;
                    var msg = $("#Message", response).text();
                } else {
                    //this condition is to support IE9
                    var msg = $("#Message", response).text();
                }
                var file = event.detail.item.name;
                var mimetype = msg.substr(msg.lastIndexOf(':') + 1);
                var obj = {
                    fileName: file,
                    mimeType: mimetype
                };
                self.restrictedFiles.push(obj);
                self._cleanUpChunkedUpload(event.detail.item);
                self.fileUpload.trigger("coral-chunkfileupload:loadend", {
                    item: event.detail.item,
                    originalEvent: event,
                    fileUpload: self.fileUplaod
                });
                self.fileUpload.resolve();
            } else if ((event.detail && event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 403)) {
                var forbiddenFile = {
                    fileName: event.detail.item.file.name
                };
                self.forbiddenFiles.push(forbiddenFile);
                self._handleChunkUploadFailed(event);
                self.fileUpload.resolve();
            } else if ((event.detail && event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 409)) {
                if (event.detail.originalEvent.target.status && event.detail.originalEvent.target.status == 409) {
                    var response = event.detail.item._xhr.responseText;
                    var title = $("#Path", response).text();
                    var changeLog = $("#ChangeLog", response).text().trim();
                } else {
                    //this condition is to support IE9
                    var title = event.message.headers['Path'];
                    var changeLog = event.message.headers['ChangeLog'];
                }
                var indexOfDuplicates = changeLog.indexOf("duplicates") + "duplicates(\"".length;
                var duplicates = changeLog.substring(indexOfDuplicates, changeLog.indexOf("\"", indexOfDuplicates));
                var arr = [title, duplicates];
                self.duplicateAssets.push(arr);
                event.message = "Upload Success"
                self.fileUpload.trigger("coral-chunkfileupload:loadend", {
                    item: event.detail.item,
                    originalEvent: event,
                    fileUpload: self.fileUplaod
                });
                self.fileUpload.resolve();
            } else {
                self._changeIconPauseToPlay(event.detail.item);
                if (self.manualPause === false) {
                    // retry after 5 seconds
                    setTimeout(function () {
                        self._queryChunkUploadStatus(event);
                    }, 5000);
                }
            }
        },


        //Drop Zone implementation

        _dropZoneDragEnter: function (event) {
            var message = Granite.I18n.get("Drag and drop to upload");
            var dragAndDropMessage = $('<div class=\"drag-drop-message\" style="text-align: center;"><h1 > <span>{</span>' + message + '<span>}</span></h1></div>');
            $('.foundation-collection').overlayMask('show', dragAndDropMessage);
        },

        _dropZoneDragLeave: function (event) {
            $('.foundation-collection').overlayMask('hide');
        },

        _dropZoneDrop: function (event) {
            $('.foundation-collection').overlayMask('hide');
        },

        _duplicateOperations: {
            keepBoth: function (duplicateDialog, damfileupload, duplicates) {
                var applyAllCheckbox = duplicateDialog.getElementsByTagName('coral-checkbox')[0];
                if ((applyAllCheckbox && applyAllCheckbox.checked) || duplicates.length === 1) {
                    this._autoResolveDuplicateFileNames(damfileupload, duplicates);
                    damfileupload._continueUpload(damfileupload.fileUpload);
                } else {
                    this._autoResolveDuplicateFileNames(damfileupload, [duplicates[0]]);
                    duplicates.splice(0, 1);
                    damfileupload._showDuplicates(duplicates);
                }

            },
            replace: function (duplicateDialog, damfileupload, duplicates) {
                var applyAllCheckbox = duplicateDialog.getElementsByTagName('coral-checkbox')[0];
                if ((applyAllCheckbox && applyAllCheckbox.checked) || duplicates.length === 1) {
                    this._addReplaceAssetParam(damfileupload.fileUpload, duplicates);
                    damfileupload._continueUpload(damfileupload.fileUpload);
                } else {
                    this._addReplaceAssetParam(damfileupload.fileUpload, [duplicates[0]]);
                    duplicates.splice(0, 1);
                    damfileupload._showDuplicates(duplicates);
                }
            },
            createVersion: function (duplicateDialog, damfileupload, duplicates) {
                var applyAllCheckbox = duplicateDialog.getElementsByTagName('coral-checkbox')[0];
                if ((applyAllCheckbox && applyAllCheckbox.checked) || duplicates.length === 1) {
                    damfileupload._continueUpload(damfileupload.fileUpload);
                } else {
                    duplicates.splice(0, 1);
                    damfileupload._showDuplicates(duplicates);
                }
            },
            _autoResolveDuplicateFileNames: function (damfileupload, duplicates) {
                var duplicatesIndex = 0;
                for (var i = 0; i < damfileupload.fileUpload.uploadQueue.length && duplicatesIndex < duplicates.length; i++) {
                    if (duplicates[duplicatesIndex].name === damfileupload.fileUpload.uploadQueue[i].name) {
                        damfileupload.fileUpload.uploadQueue[i].parameters = damfileupload.fileUpload.uploadQueue[i].parameters ? damfileupload.fileUpload.uploadQueue[i].parameters : [];
                        damfileupload.utils.addOrReplaceInCustomPatameter(damfileupload.fileUpload.uploadQueue[i],
                            'fileName',
                            this._resolveFileName(duplicates[duplicatesIndex].name, window.damDirectoryJson));
                        duplicatesIndex++;
                    }
                }
            },
            _resolveFileName: function (fileName, directoryJson) {
                var fn = fileName;
                var fileExtn = "";
                if (fileName.indexOf(".") !== -1) {
                    fn = fileName.substr(0, fileName.lastIndexOf("."));
                    fileExtn = fileName.substr(fileName.lastIndexOf(".") + 1);
                }
                var counter = 1;
                var tempFn;
                do {
                    tempFn = fn + counter;
                    counter++;
                } while (directoryJson[UNorm.normalize("NFC", tempFn) + "." + fileExtn]);
                return tempFn + "." + fileExtn;
            },
            _addReplaceAssetParam: function (fileUpload, duplicates) {
                for (var j = 0; j < duplicates.length; j++) {
                    var duplicateFileName = duplicates[j]["name"];
                    for (var i = 0; i < fileUpload.uploadQueue.length; i++) {
                        var fileName = fileUpload.uploadQueue[i].name;
                        if (duplicateFileName === fileName) {
                            fileUpload.uploadQueue[i].parameters = fileUpload.uploadQueue[i].parameters ? fileUpload.uploadQueue[i].parameters : [];
                            fileUpload.uploadQueue[i].parameters.push({
                                name: ':replaceAsset',
                                value: 'true'
                            });
                            break;
                        }
                    }
                }
            }
        },

        utils: {
            validFileName: function (fileName, illegalCharacters) {
                var utls = this;
                if (typeof fileName === 'string') {
                    if (utls.contains(fileName, illegalCharacters)) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    var allFileNamesValid = true;
                    fileName.forEach(function (eachName) {
                        if (utls.contains(eachName, illegalCharacters)) {
                            allFileNamesValid = false;
                        }
                    });
                    return allFileNamesValid;
                }
            },

            validCharInput: function (input) {
                var code = event.charCode;
                var restrictedCharCodes = [42, 47, 58, 91, 92, 93, 124, 35];
                if ($.inArray(code, restrictedCharCodes) > -1) {
                    return false;
                }
                return true;
            },
            contains: function (str, chars) {
                for (var i = 0; i < chars.length; i++) {
                    if (str.indexOf(chars[i]) > -1) {
                        return true;
                    }
                }
                return false;
            },
            getDuplicates: function (uploadFiles, contentPath) {
                var duplicates = [];
                var duplicateCount = 0;
                var jsonPath = "";
                var jsonResult;
                var foundationContent = $(".foundation-content-path");
                var foundationContentType = foundationContent
                    .data("foundationContentType");
                var resourcePath = encodeURIComponent(contentPath).replace(/%2F/g,
                    "/");
                if (foundationContentType === "folder") {
                    jsonPath = resourcePath + ".1.json?ch_ck = " + Date.now();
                } else if (foundationContentType === "asset") {
                    jsonPath = resourcePath + "/_jcr_content/renditions.1.json?ch_ck = " + Date.now();
                }
                jsonPath = Granite.HTTP.externalize(jsonPath);
                var result = Granite.$.ajax({
                    type: "GET",
                    async: false,
                    url: jsonPath
                });
                if (result.status === 200) {
                    jsonResult = JSON.parse(result.responseText);
                    for (var i = 0; i < uploadFiles.length; i++) {
                        if (jsonResult[UNorm.normalize("NFKC",
                                uploadFiles[i].name ? uploadFiles[i].name : uploadFiles[i].file.name)]) {
                            duplicates[duplicateCount] = uploadFiles[i];
                            duplicateCount++;
                        }
                    }
                }
                window.damDirectoryJson = jsonResult;
                return duplicates;
            },
            canOverwriteAsset: function (assetName, contentPath) {
                var assetPath = contentPath + "/" + assetName;
                var canOverwrite = true;
                var checkedOutBy = getCheckedOutBy(assetPath);
                if (checkedOutBy !== "") {
                    currentUserId = currentUserId !== "" ? currentUserId : getCurrentUserId();
                    canOverwrite = currentUserId === checkedOutBy;
                }
                return canOverwrite;
            },
            canOverwriteAssets: function (assets, contentPath) {
                var utls = this;
                for (var i = 0; i < assets.length; i++) {
                    if (utls.canOverwriteAsset(assets[i].name, contentPath) === false) {
                        return false;
                    }
                }
                return true;
            },
            addOrReplaceInCustomPatameter: function (item, name, value) {
                item.parameters = item.parameters ? item.parameters : [];
                var isPresent = false;
                item.parameters.forEach(function (itm) {
                    isPresent = true;
                    if (itm.name === name) {
                        itm.value = value;
                    }
                });
                if (!isPresent) {
                    item.parameters.push({
                        name: name,
                        value: value
                    })
                }

                // Specific handling for file name. As file object also contains name
                if (name === 'fileName') {
                    item.name = value;
                }
            }
        }

    });

})(document, Granite.$);
;