WebBuild/wwwroot/platform/controls/filedragndrop/filedragndrop.component.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var Unibase;
(function (Unibase) {
    let Forms;
    (function (Forms) {
        let Controls;
        (function (Controls) {
            class FileDragNDrop extends Unibase.Platform.Core.BaseComponent {
                constructor() {
                    super(...arguments);
                    this.formPropArray = [];
                    this.isMultipleArray = [];
                    this.files_array = [];
                    this.documentId = [];
                    this.fileSize = 20971520;
                }
                init(formpropertyid, prop, callback) {
                    var container = "control-container-" + prop.UniqueId;
                    var instance = this;
                    if (instance.formPropArray.length == 0 || $("#file_" + prop.UniqueId).val() == "") {
                        instance.itemid = 0;
                        instance.doc_array = [];
                        instance.files_array[formpropertyid] = [];
                        $("#hf_file_" + formpropertyid).val("");
                        instance.documentId[formpropertyid] = 0;
                        instance.Singledoc_array = [];
                        instance.rmvFiles_array = [];
                        instance.ismultiple = "false";
                        instance.local_container = container;
                        instance.singlefile = "";
                    }
                    else {
                        var newValues = instance.formPropArray.find(x => x.formpropertyid = prop.UniqueId);
                        instance.assignValues(newValues);
                    }
                    instance.loadPropertySettings(prop.PropertySettings, prop.UniqueId);
                    $('#browse_' + prop.UniqueId).click(function () {
                        $("#file_" + prop.UniqueId).click();
                    });
                    instance.dragNdrop(prop.UniqueId);
                    $("#file_" + prop.UniqueId).change(function () {
                        instance.UploadFile(prop.UniqueId);
                    });
                    Unibase.Platform.Files.Managers.FileManager.Instance().getDocumentTypes().then(function (response) {
                        instance.documenttypes = response.result;
                    }).then(function () {
                        if (callback != null) {
                            callback();
                        }
                    });
                }
                loadControl(container, prop) {
                    var instance = this;
                    instance.local_container = container;
                    instance.emptydoc_array(container);
                    var index = instance.formPropArray.findIndex((obj => obj.key == prop.UniqueId));
                    if (index >= 0) {
                        instance.formPropArray.splice(index, 1);
                    }
                    var regExpr = "";
                    var ErrMsg = "";
                    var Isrequired = prop.IsRequired != true ? 'hidden' : '';
                    var required = prop.IsRequired != true ? '' : 'required';
                    const { helpTooltipHtml, helpTextHtml } = Unibase.Platform.Forms.Components.FormViewer.Instance().getControlHelpHtml(prop);
                    var html = "";
                    var fileControlObj = prop.PropertySettings.find(x => x.ControlPropertyName == "IsFileControl");
                    if (fileControlObj.ControlPropertyValue == "false") {
                        html = '<div id="paneldrag" class="col-sm-12 mt-20 drag"><div class="col-sm-12" id="panel"><p>' +
                            '<div class="text-center"><i class="fa fa-cloud-download fa-3x" aria-hidden="true"></i></div>' +
                            '<div class="text-center" id="drag" style="font-size:medium">Drag and drop files here</div>' +
                            '<div class="text-center">Or</div>' +
                            '</p></div>' +
                            '<div class="row mb-10" id="UploadDiv_' + prop.DocPropertyName + '">' +
                            '<input type="text" class="hidden ' + required + '" id="hf_file_' + prop.UniqueId + '" value=""/>' +
                            '<div class="upload-btn-wrapper text-center container">' +
                            '<input id="file_' + prop.UniqueId + '" title="" type="file" onclick="this.value=null;" class="hidden d-none fileUpload_ form-control type-control value-control" data-isrequired="' + prop.IsRequired + '" data-propertyname="' + prop.DocPropertyName + '" data-isdefault="' + prop.IsDefault + '" data-propdoctypename="' + prop.DocTypeName + '" data-required="' + prop.IsRequired + '" data-regularexp="' + regExpr + '" data-validatemsg="' + ErrMsg + '" data-formdata="" value="Unibase.Forms.Controls.FileDragNDrop.Instance().fileDragNDropObj(' + prop.UniqueId + ');"/>' +
                            '<input type="button" value="Browse" class="btn btn-primary btn-lg center-block" id="browse_' + prop.UniqueId + '" />' +
                            '</div></div><div class="text-center my-1 control-help">' + helpTooltipHtml + helpTextHtml + '</div></div>' +
                            '<div class="row ml-15 fileuploads_ filename" id="fileuploads_' + prop.UniqueId + '"><div class="row col-sm-12 ml-10 mt-10 pull-center thumb_doc"><div class="col-sm-12 row pl-0"><div class="input-group">' +
                            '<span class="Selectedfile_ text-dark hidden"><h5 class="Selection mb-10 mt-10">Selected Files :</h5> <span class="Selectedfile"></span></span>' +
                            '</div></div><div class="row col-sm-12 pl-0 pr-0">' +
                            '<ul id="ulselectedfiles_' + prop.UniqueId + '" class="list-group mb-n mt-n-15 no-border ulselectedfiles col-sm-12 pl-0 pr-0">' +
                            '<li class="hidden no-border"></li>' +
                            '</ul></div></div></div>';
                    }
                    else {
                        var hiddenClass = "hidden";
                        if (prop.IsRequired) {
                            hiddenClass = "";
                        }
                        html = '<h6>' + helpTooltipHtml + prop.LabelName + '<span class="text-danger ' + hiddenClass + '"> *</span> :</h6><div class="row" id="UploadDiv_' + prop.DocPropertyName + '">' +
                            '<input type="text" class="hidden ' + required + '" id="hf_file_' + prop.UniqueId + '" value=""/>' +
                            '<div class="btn text-left container">' +
                            '<input id="file_' + prop.UniqueId + '" title="" type="file" onclick="this.value=null;" class="hidden d-none fileUpload_ form-control value-control" data-isrequired="' + prop.IsRequired + '" data-propertyname="' + prop.DocPropertyName + '" data-isdefault="' + prop.IsDefault + '" data-propdoctypename="' + prop.DocTypeName + '" data-required="' + prop.IsRequired + '" data-regularexp="' + regExpr + '" data-validatemsg="' + ErrMsg + '" data-formdata="" value="Unibase.Forms.Controls.FileDragNDrop.Instance().fileDragNDropObj(' + prop.UniqueId + ');"/>' +
                            '<input type="button" value="Browse" class="" id="browse_' + prop.UniqueId + '" />' + helpTextHtml +
                            '</div></div>' +
                            '<div class="row ml-15 fileuploads_ filename" id="fileuploads_' + prop.UniqueId + '"><div class="row col-sm-12 ml-10 pull-center thumb_doc"><div class="col-sm-12 row pl-0"><div class="input-group">' +
                            '<span class="Selectedfile_ text-dark hidden"><h6 class="Selection">Selected Files :</h6> <span class="Selectedfile"></span></span>' +
                            '</div></div><div class="row col-sm-12 pl-0 pr-0">' +
                            '<ul id="ulselectedfiles_' + prop.UniqueId + '" class="list-group mb-n mt-n-15 no-border ulselectedfiles col-sm-12 pl-0 pr-0">' +
                            '<li class="hidden no-border"></li>' +
                            '</ul></div></div></div>';
                    }
                    $("#" + container).html(html);
                    if (prop.PropertySettings[0].ControlPropertyValue == "false") {
                        $(".drag").css("border", "3px dashed #cccccc");
                    }
                }
                loadControlSettings(controlsettingjson, formpropertyid) {
                    return __awaiter(this, void 0, void 0, function* () {
                    });
                }
                loadPropertySettings(propertysettings, formpropertyid) {
                    var instance = this;
                    if (propertysettings != null) {
                        for (var i = 0; i < propertysettings.length; i++) {
                            var data = propertysettings[i];
                            if (data.ControlPropertyName == "IsMultiple" && data.ControlPropertyValue != "") {
                                if (data.ControlPropertyValue == "true") {
                                    instance.ismultiple = "true";
                                    $("#file_" + formpropertyid).attr("multiple", "multiple");
                                }
                                else {
                                    instance.ismultiple = "false";
                                    $("#file_" + formpropertyid).removeAttr("multiple");
                                }
                            }
                        }
                    }
                    var index = instance.isMultipleArray.findIndex((obj => obj.key == formpropertyid));
                    if (index >= 0) {
                        instance.isMultipleArray[index].value = instance.ismultiple;
                    }
                    else {
                        instance.isMultipleArray.push({ "key": formpropertyid, "value": instance.ismultiple });
                    }
                }
                bindEditFormDetails(formpropertyid, propval, DocPropertyName) {
                    var instance = this;
                    propval = propval.replaceAll("\\", "/");
                    var documentInfo = "";
                    var containerid = "control-container-" + formpropertyid;
                    if (!isNaN(Number(propval))) {
                        Unibase.Platform.Files.Managers.FileManager.Instance().getDocumentByRefId(Number(propval), formpropertyid).then(function (response) {
                            documentInfo = response.result;
                        }).then(function () {
                            if (documentInfo !== "") {
                                instance.documentId[formpropertyid] = documentInfo.DocumentId;
                                instance.bindData(documentInfo, formpropertyid);
                            }
                        });
                    }
                    else {
                        documentInfo = JSON.parse(propval);
                        instance.documentId[formpropertyid] = documentInfo.DocumentId;
                        instance.bindData(documentInfo, formpropertyid);
                    }
                }
                bindData(documentInfo, formpropertyid) {
                    var instance = this;
                    var filesList = documentInfo.DocumentFiles;
                    for (var i = 0; i < filesList.length; i++) {
                        var isRequired = $("#file_" + formpropertyid).data("isrequired");
                        if (isRequired) {
                            $("#file_" + formpropertyid).removeClass("required");
                        }
                        filesList[i].DocumentFilePath = filesList[i].DocumentFilePath.replaceAll("\\", "/");
                        var documentImage = '';
                        var imgSrc = "";
                        if (filesList[i].DocumentGroup != "") {
                            if (filesList[i].DocumentGroup == "Unknown")
                                documentImage = 'tenants/default/documenttypes/unknown.png';
                            else if (filesList[i].DocumentGroup == "Image") {
                                var byteCharacters = atob(filesList[i].FileData);
                                var byteNumbers = new Array(byteCharacters.length);
                                for (var k = 0; k < byteCharacters.length; k++) {
                                    byteNumbers[k] = byteCharacters.charCodeAt(k);
                                }
                                var byteArray = new Uint8Array(byteNumbers);
                                var fileTemp = new Blob([byteArray], { type: filesList[i].DocumentGroup + '/' + filesList[i].FileType + ';base64' });
                                imgSrc = URL.createObjectURL(fileTemp);
                                documentImage = imgSrc;
                            }
                            else if (filesList[i].DocumentGroup == "Excel")
                                documentImage = 'tenants/default/documenttypes/excel.png';
                            else if (filesList[i].DocumentGroup == "Pdf")
                                documentImage = 'tenants/default/documenttypes/pdf.png';
                            else if (filesList[i].FileType == "csv")
                                documentImage = 'tenants/default/documenttypes/csv.png';
                            else if (filesList[i].DocumentGroup == "Word")
                                documentImage = 'tenants/default/documenttypes/word.png';
                            else if (filesList[i].DocumentGroup == "Video")
                                documentImage = 'tenants/default/documenttypes/video.png';
                            else if (filesList[i].DocumentGroup == "Audio")
                                documentImage = 'tenants/default/documenttypes/audio.png';
                        }
                        instance.itemid++;
                        var docFilePath = filesList[i].DocumentFilePath.split('/');
                        var docFileName = docFilePath[docFilePath.length - 1];
                        var name = filesList[i].DocumentFilePath.split('/');
                        var tempName = name[name.length - 1].split('.');
                        name = tempName[tempName.length - 1];
                        name = encodeURIComponent(name).replace(/\'/g, "%2E");
                        var html = '<li class="list-group-item b-a clear pl-0 pr-0" style="border: none !important">' +
                            '<span id="fileuploads_' + formpropertyid + '_' + instance.itemid + '" class="block fileuploads_' + instance.itemid + ' filename">' +
                            '<span class="pull-left col-sm-12 pl-0 pr-0">' +
                            '<span class="fa fa-trash-o fa-lg text-danger mr-15" style="cursor:pointer" ; href="javascript:;" onclick="javascript:Unibase.Forms.Controls.FileDragNDrop.Instance().removeFile(' + formpropertyid + ',' + instance.itemid + ',\'' + name + '\'' + ',' + filesList[i].DocumentFileId + ');" title="Click to Delete"></span>' +
                            '<img class="mr-20" style="height:35px;width:35px;vertical-align:middle;" onerror="ReloadImage(event)" alt="" src="' + documentImage + '">' +
                            '<span class="fileName">' + docFileName + '</span>' +
                            '</span></span></li>';
                        $('#ulselectedfiles_' + formpropertyid).append(html);
                        $("#hf_file_" + formpropertyid).val("fileexists");
                        var file = filesList[i];
                        $('#fileuploads_' + formpropertyid).find('.Selectedfile_').removeClass("hidden");
                        var item = { Files: file };
                        instance.doc_array.push(item);
                    }
                }
                dragNdrop(formpropertyid) {
                    var instance = this;
                    instance.navigationHelper.showLoading();
                    $('#paneldrag').on('dragover', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                    });
                    $('#paneldrag').on('dragenter', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                    });
                    $('#paneldrag').on('drop', function (e) {
                        if (e.originalEvent.dataTransfer) {
                            if (e.originalEvent.dataTransfer.files.length) {
                                e.preventDefault();
                                e.stopPropagation();
                                if (instance.formPropArray.length > 0) {
                                    var index = instance.formPropArray.findIndex((obj => obj.key == formpropertyid));
                                    if (index >= 0) {
                                        var newValues = instance.formPropArray[index].value;
                                        instance.assignValues(newValues);
                                    }
                                }
                                if (instance.ismultiple == "false" && instance.doc_array.length < 1) {
                                    instance.SingleUploadFile(e.originalEvent.dataTransfer.files, formpropertyid);
                                }
                                else if (instance.ismultiple == "true" || instance.doc_array.length > 1) {
                                    instance.MultipleUploadFile(e.originalEvent.dataTransfer.files, formpropertyid);
                                    $("#file_" + formpropertyid).attr("multiple", "multiple");
                                }
                                else {
                                    instance.SingleUploadFile(e.originalEvent.dataTransfer.files, formpropertyid);
                                }
                            }
                        }
                    });
                    window.addEventListener("dragover", function (e) {
                        e = e || event;
                        e.preventDefault();
                    }, false);
                    window.addEventListener("drop", function (e) {
                        e = e || event;
                        e.preventDefault();
                    }, false);
                    instance.navigationHelper.hideLoading();
                }
                UploadFile(formpropertyid) {
                    var instance = this;
                    instance.navigationHelper.showLoading();
                    var prq = instance.isMultipleArray.find(x => x.key == formpropertyid);
                    instance.ismultiple = prq.value;
                    if (instance.formPropArray.length > 0) {
                        var index = instance.formPropArray.findIndex((obj => obj.key == formpropertyid));
                        if (index >= 0) {
                            var newValues = instance.formPropArray[index].value;
                            instance.assignValues(newValues);
                        }
                    }
                    if (instance.ismultiple == "false") {
                        $('#fileuploads_' + formpropertyid).find('.Selection').text("Selected File :");
                        $('#fileuploads_' + formpropertyid).find('.Selection').addClass("text-dark");
                        instance.SingleUploadFile(null, formpropertyid);
                    }
                    else if (instance.ismultiple == "true" || instance.doc_array.length > 1) {
                        instance.MultipleUploadFile(null, formpropertyid);
                        $("#file_" + formpropertyid).attr("multiple", "multiple");
                    }
                    else {
                        instance.SingleUploadFile(null, formpropertyid);
                        $('#fileuploads_' + formpropertyid).find('.Selection').text("Selected File :");
                        $('#fileuploads_' + formpropertyid).find('.Selection').addClass("text-dark");
                    }
                    instance.navigationHelper.hideLoading();
                }
                SingleUploadFile(event, formpropertyid) {
                    var instance = this;
                    if (instance.formPropArray.length > 0) {
                        var index = instance.formPropArray.findIndex((obj => obj.key == formpropertyid));
                        if (index >= 0) {
                            var newValues = instance.formPropArray[index].value;
                            instance.assignValues(newValues);
                        }
                    }
                    var fileUpload = $("#file_" + formpropertyid).get(0);
                    var files = fileUpload.files;
                    if (event != null)
                        files = event;
                    instance.singlefile = "";
                    var flag = 0;
                    if (files.length > 0) {
                        var html = "";
                        var count = 0;
                        for (var i = 0; i < files.length; i++) {
                            if (files[i].size <= instance.fileSize) {
                                instance.navigationHelper.showLoading();
                                flag = 0;
                                if (flag == 0) {
                                    instance.itemid++;
                                    var imgShow = '';
                                    if (!files[i].type.match('image.*')) {
                                        if (files[i].type.match('pdf.*')) {
                                            imgShow = 'tenants/default/documenttypes/pdf.png';
                                        }
                                        else if (files[i].type.match('csv.*')) {
                                            imgShow = 'tenants/default/documenttypes/csv.png';
                                        }
                                        else if (files[i].type.match('wordprocessingml.*') || files[i].type.match('text.*')) {
                                            imgShow = 'tenants/default/documenttypes/word.png';
                                        }
                                        else if (files[i].type.match('spreadsheetml.*')) {
                                            imgShow = 'tenants/default/documenttypes/excel.png';
                                        }
                                        else if (files[i].type.match('excel.*')) {
                                            imgShow = 'tenants/default/documenttypes/excel.png';
                                        }
                                        else
                                            imgShow = 'tenants/default/documenttypes/unknown.png';
                                    }
                                    else {
                                        var tmppath = URL.createObjectURL(files[i]);
                                        imgShow = tmppath;
                                    }
                                    var filename = encodeURIComponent(files[i].name).replace(/\'/g, "%2E");
                                    html = '<li class="list-group-item b-a clear pl-0 pr-0" style="border: none !important">' +
                                        '<span id="fileuploads_' + formpropertyid + '_' + instance.itemid + '" class="block fileuploads_' + instance.itemid + ' filename">' +
                                        '<span class="pull-left">' +
                                        '<span class="fa fa-trash-o fa-lg text-danger mr-15" style="cursor:pointer" href="javascript:;" onclick="javascript:Unibase.Forms.Controls.FileDragNDrop.Instance().removeFile(' + formpropertyid + ',' + instance.itemid + ',\'' + filename + '\'' + ',' + 0 + ');" title = "Click to Delete"></span>' +
                                        '<img style="height:35px;width:35px;vertical-align:middle;" onerror="ReloadImage(event)" alt="" src="' + imgShow + '">' +
                                        '<span class="ml-20 fileName">' + files[i].name + '</span>' +
                                        '</span></span></li>';
                                    instance.singlefile = files[i];
                                    $('#ulselectedfiles_' + formpropertyid).html(html);
                                    $('#fileuploads_' + formpropertyid).find('.Selectedfile_').removeClass("hidden");
                                    var item = { Files: instance.singlefile };
                                    if (item.Files.size <= instance.fileSize) {
                                        if (instance.Singledoc_array.length = 1) {
                                            instance.Singledoc_array.pop();
                                            instance.Singledoc_array.push(item);
                                            instance.getBase64(item).then(function (response) {
                                                var fileInfo = response;
                                                instance.files_array[formpropertyid] = [];
                                                instance.files_array[formpropertyid].push(fileInfo);
                                                $("#hf_file_" + formpropertyid).val("fileexists");
                                                count++;
                                                if (count == files.length) {
                                                    instance.navigationHelper.hideLoading();
                                                }
                                            });
                                        }
                                    }
                                    else {
                                        alert("Cannot Upload File More Than 20MB");
                                        break;
                                    }
                                }
                            }
                            else {
                                alert("Cannot Upload File More Than 20MB");
                                break;
                            }
                        }
                    }
                    var formPropDetails = { "Singledoc_array": instance.Singledoc_array, "doc_array": instance.doc_array, "rmvFiles_array": instance.rmvFiles_array, "itemid": instance.itemid, "ismultiple": instance.ismultiple, "local_container": instance.local_container, "instance.singlefile": instance.singlefile, "documentid": instance.documentId };
                    if (index >= 0)
                        instance.formPropArray[index].value = formPropDetails;
                    else
                        instance.formPropArray.push({ "key": formpropertyid, "value": formPropDetails });
                }
                MultipleUploadFile(event, formpropertyid) {
                    var instance = this;
                    if (instance.formPropArray.length > 0) {
                        var index = instance.formPropArray.findIndex((obj => obj.key == formpropertyid));
                        if (index >= 0) {
                            var newValues = instance.formPropArray[index].value;
                            instance.assignValues(newValues);
                        }
                    }
                    var errormsg = $("#" + instance.local_container).parents().find(".bizgaze_FormErrorMessages").attr("id");
                    var fileUpload = $("#file_" + formpropertyid).get(0);
                    var files = fileUpload.files;
                    if (event != null)
                        files = event;
                    var file = "";
                    var flag = 0;
                    if (files.length > 0) {
                        var xyz = "";
                        var html = "";
                        var count = 0;
                        instance.navigationHelper.showLoading();
                        for (var i = 0; i < files.length; i++) {
                            flag = 0;
                            if (files[i].size <= instance.fileSize) {
                                $("#ulselectedfiles_" + formpropertyid + " li").each(function (index, element) {
                                    if (index != 0 && flag == 0) {
                                        var filesSelected = $(this).find(".fileName").text();
                                        if (files[i].name == filesSelected) {
                                            xyz += files[i].name + " ";
                                            MessageHelper.Instance().showError(xyz + " files already exist", "" + errormsg);
                                            flag = 1;
                                        }
                                    }
                                });
                                if (flag == 0) {
                                    instance.itemid++;
                                    var imgShow = '';
                                    var filename = files[i].name;
                                    var fileExt = files[i].name.split(".");
                                    if (files[i].type.match('image.*')) {
                                        var tmppath = URL.createObjectURL(files[i]);
                                    }
                                    var docData = instance.documenttypes.find(x => x.documenttypename == fileExt[fileExt.length - 1].toLowerCase());
                                    if (docData != null) {
                                        if (docData.documentgroup == "Pdf") {
                                            imgShow = 'tenants/default/documenttypes/pdf.png';
                                        }
                                        else if (docData.documentgroup == "Image") {
                                            imgShow = tmppath;
                                        }
                                        else if (docData.documentgroup == "Word") {
                                            imgShow = 'tenants/default/documenttypes/word.png';
                                        }
                                        else if (files[i].type.match('csv.*')) {
                                            imgShow = 'tenants/default/documenttypes/csv.png';
                                        }
                                        else if (docData.documentgroup == "Excel") {
                                            imgShow = 'tenants/default/documenttypes/excel.png';
                                        }
                                        else if (docData.documentgroup == "Video") {
                                            imgShow = 'tenants/default/documenttypes/video.png';
                                        }
                                        else if (docData.documentgroup == "Audio") {
                                            imgShow = 'tenants/default/documenttypes/audio.png';
                                        }
                                    }
                                    else
                                        imgShow = 'tenants/default/documenttypes/unknown.png';
                                    filename = encodeURIComponent(filename).replace(/\'/g, "%2E");
                                    html = '<li class="list-group-item b-a clear pl-0 pr-0" style="border: none !important">' +
                                        '<span id="fileuploads_' + formpropertyid + '_' + instance.itemid + '" class="block fileuploads_' + instance.itemid + ' filename">' +
                                        '<span class="pull-left col-sm-12 pl-0 pr-0">' +
                                        '<span class="fa fa-trash-o fa-lg text-danger mr-15" style="cursor:pointer" ; href="javascript:;" onclick="javascript:Unibase.Forms.Controls.FileDragNDrop.Instance().removeFile(' + formpropertyid + ',' + instance.itemid + ',\'' + filename + '\'' + ',' + 0 + ');" title="Click to Delete"></span>' +
                                        '<img class="mr-20" style="height:35px;width:35px;vertical-align:middle;" onerror="ReloadImage(event)" alt="" src="' + imgShow + '">' +
                                        '<span class="fileName">' + files[i].name + '</span>' +
                                        '</span></span></li>';
                                    $('#ulselectedfiles_' + formpropertyid).append(html);
                                    file = files[i];
                                    $('#fileuploads_' + formpropertyid).find('.Selectedfile_').removeClass("hidden");
                                    var item = { Files: file };
                                    instance.doc_array.push(item);
                                    instance.getBase64(item).then(function (response) {
                                        var fileInfo = response;
                                        instance.files_array[formpropertyid].push(fileInfo);
                                        $("#hf_file_" + formpropertyid).val("fileexists");
                                        count++;
                                        if (count == files.length) {
                                            instance.navigationHelper.hideLoading();
                                        }
                                    });
                                }
                            }
                            else {
                                alert("file cannot be more than 20Mb");
                                break;
                            }
                        }
                        instance.navigationHelper.hideLoading();
                    }
                    var formPropDetails = { "Singledoc_array": instance.Singledoc_array, "doc_array": instance.doc_array, "rmvFiles_array": instance.rmvFiles_array, "itemid": instance.itemid, "ismultiple": instance.ismultiple, "local_container": instance.local_container, "instance.singlefile": instance.singlefile, "documentid": instance.documentId };
                    if (index >= 0)
                        instance.formPropArray[index].value = formPropDetails;
                    else
                        instance.formPropArray.push({ "key": formpropertyid, "value": formPropDetails });
                }
                emptydoc_array(container) {
                    var instance = this;
                    instance.itemid = 0;
                    instance.doc_array = [];
                    instance.Singledoc_array = [];
                    instance.rmvFiles_array = [];
                    instance.ismultiple = "false";
                    instance.local_container = container;
                    instance.singlefile = "";
                }
                removeFile(formpropertyid, itemid, name, DocumentFileId) {
                    name = decodeURIComponent(name.replace(/\%2E/g, "'"));
                    var instance = this;
                    var isRequired = $("#file_" + formpropertyid).data("isrequired");
                    if (instance.formPropArray.length > 0) {
                        var index = instance.formPropArray.findIndex((obj => obj.key == formpropertyid));
                        if (index >= 0) {
                            var newValues = instance.formPropArray[index].value;
                            instance.assignValues(newValues);
                        }
                    }
                    instance.rmvFiles_array.push({ DocumentFileId: DocumentFileId, name: name });
                    $("#fileuploads_" + formpropertyid + "_" + itemid).addClass("hidden");
                    $("#fileuploads_" + formpropertyid + "_" + itemid).parents('.list-group-item').remove();
                    for (var i = 0; i < instance.doc_array.length; i++) {
                        var filename = "";
                        filename = instance.doc_array[i].Files.DocumentFileName;
                        if (filename == undefined)
                            filename = instance.doc_array[i].Files.name;
                        if (filename == name) {
                            var fileNameWithoutExt = name.split(/\.(?=[^\.]+$)/)[0];
                            var fileIndex = instance.files_array[formpropertyid].findIndex(x => x.FileName == fileNameWithoutExt);
                            instance.files_array[formpropertyid].splice(fileIndex, 1);
                            if (instance.files_array[formpropertyid].length == 0) {
                                $("#file_" + formpropertyid).val(null);
                                $("#hf_file_" + formpropertyid).val("");
                            }
                            instance.doc_array = $.grep(instance.doc_array, function (value) {
                                return value != instance.doc_array[i];
                            });
                        }
                    }
                    for (var j = 0; j < instance.Singledoc_array.length; j++) {
                        var filename = "";
                        filename = instance.Singledoc_array[j].Files.DocumentFileName;
                        if (filename == undefined)
                            filename = instance.Singledoc_array[j].Files.name;
                        if (filename == name) {
                            instance.Singledoc_array = $.grep(instance.Singledoc_array, function (value) {
                                return value != instance.Singledoc_array[i];
                            });
                        }
                    }
                    if ($('#ulselectedfiles_' + formpropertyid + ' li').length == 1) {
                        $('#fileuploads_' + formpropertyid).find('.Selectedfile_').addClass("hidden");
                    }
                    if (isRequired) {
                        var fileArray = instance.files_array[formpropertyid];
                        var fileCount = $("#ulselectedfiles_" + formpropertyid + " li").length;
                        if (fileArray.length == 0) {
                            if (fileCount == 1) {
                                $("#file_" + formpropertyid).addClass("required");
                            }
                        }
                    }
                }
                getFormData(formpropertyid) {
                    var index = Unibase.Forms.Controls.FileDragNDrop.Instance().formPropArray.findIndex((obj => obj.key == formpropertyid));
                    if (index >= 0) {
                        var documentArray = Unibase.Forms.Controls.FileDragNDrop.Instance().formPropArray[index].value.doc_array;
                        var fileData = new FormData();
                        for (var i = 0; i < documentArray.length; i++) {
                            var files = documentArray[i].Files;
                            fileData.append(files.name, files);
                        }
                    }
                    return fileData;
                }
                fileDragNDropObj(formpropertyid) {
                    var instance = this;
                    var fileArray = [];
                    fileArray = instance.files_array[formpropertyid];
                    for (var i = 0; i < instance.rmvFiles_array.length; i++) {
                        var documentFileId = instance.rmvFiles_array[i].DocumentFileId;
                        if (documentFileId != 0) {
                            var fileReq = {
                                FileId: documentFileId,
                                FilePath: instance.rmvFiles_array[i].name,
                            };
                            fileArray.push(fileReq);
                        }
                    }
                    var fileObj = [...fileArray];
                    fileObj.unshift({
                        FileId: instance.documentId[formpropertyid],
                    });
                    return fileObj;
                }
                saveFile(formpropertyid, callback) {
                    var instance = this;
                    var fileArray = [];
                    fileArray = instance.files_array[formpropertyid];
                    var count = 0;
                    if (fileArray != undefined && fileArray.length > 0) {
                        instance.navigationHelper.showLoading();
                        for (var i = 0; i <= fileArray.length - 1; i++) {
                            var file = fileArray[i];
                            Unibase.Platform.Files.Managers.FileManager.Instance()._tempFileSave(file).then((res) => {
                                if (res.status == Unibase.Data.Status.Success) {
                                    var result = res.result;
                                    if (result != null) {
                                        fileArray[count].FileData = "";
                                        fileArray[count].Status = "Uploaded";
                                        count++;
                                        if (count == fileArray.length) {
                                            if (callback) {
                                                callback();
                                            }
                                        }
                                    }
                                }
                                else {
                                    fileArray[count].Status = "Failed";
                                    instance.navigationHelper.hideLoading();
                                    Unibase.Platform.Forms.Components.FormViewer.Instance().showError("File Upload Failed");
                                }
                            });
                        }
                    }
                    else {
                        if (callback) {
                            callback();
                        }
                    }
                }
                assignValues(newValues) {
                    var instance = this;
                    instance.itemid = newValues.itemid;
                    instance.doc_array = newValues.doc_array;
                    instance.Singledoc_array = newValues.Singledoc_array;
                    instance.rmvFiles_array = newValues.rmvFiles_array;
                    instance.ismultiple = newValues.ismultiple;
                    instance.local_container = newValues.local_container;
                    instance.singlefile = newValues.singlefile;
                }
                getBase64(item) {
                    return __awaiter(this, void 0, void 0, function* () {
                        var fileName = "";
                        fileName = item.Files.DocumentFileName;
                        if (fileName == undefined)
                            fileName = item.Files.name;
                        var refId = 0;
                        let file = item.Files;
                        let fileInfo = item.Files.name.split('.');
                        let fileType = ".unknown";
                        if (fileInfo.length > 0) {
                            fileType = fileInfo[fileInfo.length - 1];
                            fileInfo.splice(fileInfo.length - 1, 1);
                            fileName = fileInfo.join('.');
                        }
                        return new Promise((resolve, reject) => {
                            let content = '';
                            const reader = new FileReader();
                            reader.readAsDataURL(item.Files);
                            reader.onloadend = function () {
                                var base64String = reader.result.toString().replace(/^data:.+;base64,/, '');
                                var fileReq = {
                                    FileData: base64String,
                                    FileName: fileName,
                                    FileType: fileType,
                                    RefId: refId,
                                    ByteData: null,
                                    Status: "Converted",
                                    FilePath: "_files/documents/" + Unibase.Platform.Membership.Infos.Identity.getCurrentUser().tenantId + "/" + Unibase.Forms.Controls.FileDragNDrop.Instance().generateUUID().trim() + "/" + fileName + "." + fileType
                                };
                                resolve(fileReq);
                            };
                            reader.onerror = function (e) {
                                reject(e);
                            };
                        });
                    });
                }
                generateUUID() {
                    var d = new Date().getTime();
                    var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0;
                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                        var r = Math.random() * 16;
                        if (d > 0) {
                            r = (d + r) % 16 | 0;
                            d = Math.floor(d / 16);
                        }
                        else {
                            r = (d2 + r) % 16 | 0;
                            d2 = Math.floor(d2 / 16);
                        }
                        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                    });
                }
                static Instance() {
                    if (this._instance === undefined)
                        this._instance = new FileDragNDrop();
                    return this._instance;
                }
            }
            Controls.FileDragNDrop = FileDragNDrop;
        })(Controls = Forms.Controls || (Forms.Controls = {}));
    })(Forms = Unibase.Forms || (Unibase.Forms = {}));
})(Unibase || (Unibase = {}));