WebBuild/wwwroot/platform/controls/imagepicker/imagepicker.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 ImagePicker {
                constructor() {
                    this.fileData = [];
                }
                jsFiles() {
                    return ["apps/communications/ai/components/resumeparsingmanager.js"];
                }
                init(formpropertyid, prop, callback) {
                    var instance = this;
                    var errormsg = $(".bizgaze_FormErrorMessages:visible").attr("id");
                    if ($("#img_" + prop.FormPropertyId).val() == "") {
                        instance.fileData[formpropertyid] = [];
                    }
                    $('#browse_' + prop.FormPropertyId).click(function () {
                        $("#img_" + prop.FormPropertyId).click();
                    });
                    instance.loadControlSettings(prop.ControlJsonText, prop.FormPropertyId);
                    $("#img_" + formpropertyid).change(function (e) {
                        $("#editFileName_" + formpropertyid).addClass("hidden");
                        if (!$("#editFileName_" + formpropertyid).hasClass("hidden") && instance.fileData[formpropertyid] != []) {
                            var fileReq = {
                                FileId: 1,
                                FilePath: instance.fileData[formpropertyid].FilePath,
                            };
                            instance.fileData[formpropertyid] = fileReq;
                        }
                        $("#img_" + formpropertyid).removeAttr("style");
                        var file = $("#img_" + formpropertyid).get(0);
                        var files = file.files;
                        if (!files[0].type.match('image.*')) {
                            $("#img_" + formpropertyid).val('');
                            MessageHelper.Instance().showError("Please Select Image File.", errormsg);
                        }
                        else {
                            instance.selectImageFile(files[0], prop.DocPropertyName, formpropertyid, null);
                            var item = { Files: files[0] };
                            instance.getBase64(item).then(function (response) {
                                var filePath = null;
                                if (instance.fileData[formpropertyid].FilePath != null) {
                                    filePath = instance.fileData[formpropertyid].FilePath;
                                }
                                instance.fileData[formpropertyid] = response;
                                instance.fileData[formpropertyid].FilePath = filePath;
                            });
                        }
                    });
                    if (callback != null) {
                        callback();
                    }
                }
                selectImageFile(file, DocPropertyName, formpropertyid, imgurl) {
                    var instance = this;
                    $("#fileCount").addClass('hidden');
                    var html = "";
                    var imgShow = "";
                    var filename = "";
                    if (file != null) {
                        var tmppath = URL.createObjectURL(file);
                        imgShow = tmppath;
                        filename = file.name;
                        $("#requiredImgInput_" + formpropertyid).val(filename);
                        instance.fileHtml(filename, formpropertyid, DocPropertyName, imgShow);
                    }
                    else {
                        filename = DocPropertyName;
                        $("#requiredImgInput_" + formpropertyid).val(filename);
                        DocPropertyName = "";
                        var src = "";
                        var path = 'apis/v4/Documents/GetFile?path=' + imgurl;
                        Unibase.Platform.Analytics.Managers.ReportManager.Instance().dataHelper().getAsync(path).then(function (response) {
                            src = 'data:image/png;base64,' + response.file;
                        }).then(function () {
                            instance.fileHtml(filename, formpropertyid, DocPropertyName, src);
                        });
                    }
                }
                fileHtml(filename, formpropertyid, DocPropertyName, imgShow) {
                    if (filename.length > 15) {
                        var File_Extension = filename.substr(filename.lastIndexOf("."));
                        filename = filename.substr(0, 15) + '...' + File_Extension;
                    }
                    var html = '<li class="list-group-item b-a clear p-0 mb-15" id="list-file_' + formpropertyid + '" style="border: none">' +
                        '<span class="block fileuploads filename hidden">' +
                        '<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.ImagePicker.Instance().removeFile(' + formpropertyid + ',\'' + filename + '\'' + ',\'' + DocPropertyName + '\'' + '); " title="Click to Delete"></span>' +
                        '<img id="img_upload " class="mr-20" style="height:35px;width:35px;vertical-align:middle;" alt="" src="' + imgShow + '">' +
                        '<span class="h6 fileName" title="' + filename + '">' + filename + '</span>' +
                        '</span></span></li>';
                    $('.fileuploads_' + formpropertyid).find('.thumb_output_').html(html);
                    $('#list-file_' + formpropertyid).find('.fileuploads').removeClass("hidden");
                }
                removeFile(formpropertyid, filename, docpropertyname) {
                    $('#img_' + formpropertyid).val(null);
                    $("#list-file_" + formpropertyid).remove();
                    $("#requiredImgInput_" + formpropertyid).val("");
                    $("#editFileName_" + formpropertyid).addClass("hidden");
                }
                loadControl(containerid, prop) {
                    var isrequired = 'hidden';
                    var required = '';
                    if (prop.IsRequired != null) {
                        isrequired = (prop.IsRequired) ? '' : 'hidden';
                        required = (prop.IsRequired) ? 'required' : '';
                    }
                    const { helpTooltipHtml, helpTextHtml } = Unibase.Platform.Forms.Components.FormViewer.Instance().getControlHelpHtml(prop);
                    var html = '<div id="ImageUpload" class="form-group floating-label focus m-0 pt-10 pb-10">' +
                        '<label for="lbl" id="lbl_' + prop.UniqueId + '" >' + helpTooltipHtml + '<span class="label-name">' + prop.LabelName + '</span><span class="text-danger ' + isrequired + '" id="spnIsRequired_' + prop.UniqueId + '"> *</span></label >' +
                        '<input id="requiredImgInput_' + prop.UniqueId + '" class="hidden d-none value-control form-control requiredImgInput ' + required + '" type="text" val="">' +
                        '<input id="img_' + prop.UniqueId + '" type="file" class="hidden fileUpload_ d-none" data-propertyname="' + prop.DocPropertyName + '" data-isdefault="' + prop.IsDefault + '" data-propdoctypename="' + prop.DocTypeName + '" data-required="' + prop.IsRequired + '" onclick="this.value=null;" />' +
                        '<input type="button" value="Choose Image" style="color:black;margin-left:20px;height: 30px;width: 130px;" id="browse_' + prop.UniqueId + '" /><label class="hidden" id="editFileName_' + prop.UniqueId + '"></label>' +
                        '<label for="file_' + prop.DocPropertyName + '"><span id="fileCount"></span></label><input type="hidden" id="hfId" value="">' +
                        '<label for="Validation" id="lblValidation_' + prop.DocPropertyName + '"></label>' +
                        '<input type="hidden" id="hfFormPropertyId" value="" />' + helpTextHtml + '</div>' +
                        '<div class="row ml-15 fileuploads_' + prop.FormPropertyId + ' filename"><div class="row col-md-12 pl-2"><div class="row">' +
                        '<ul class="list-group mb-n mt-n-15 no-border thumb_output_">' +
                        '<li class="hidden no-border"></li>' +
                        '</ul></div></div></div>';
                    $("#" + containerid).html(html);
                }
                loadControlSettings(controlsettingjson, formpropertyid) {
                    return null;
                }
                loadPropertySettings(propertysettings, formpropertyid) {
                    return null;
                }
                bindEditFormDetails(formpropertyid, propval, DocPropertyName) {
                    var instance = this;
                    if (propval != "") {
                        var splitArray = propval.split("/");
                        var fileName = splitArray[splitArray.length - 1];
                        propval = propval.replaceAll("/", "\\");
                        var fileReq = {
                            FileId: 0,
                            FilePath: propval,
                        };
                        instance.fileData[formpropertyid] = fileReq;
                        $("#editFileName_" + formpropertyid).removeClass("hidden");
                        instance.selectImageFile(null, fileName, formpropertyid, propval);
                    }
                }
                fileObj(formpropertyid) {
                    var instance = this;
                    var file = $("#img_" + formpropertyid).get(0);
                    var files = file.files;
                    if (files.length == 0 && $("#editFileName_" + formpropertyid).hasClass("hidden")) {
                        var filepath = instance.fileData[formpropertyid].FilePath;
                        if (instance.fileData[formpropertyid].FilePath != undefined) {
                            filepath = null;
                        }
                        var fileReq = {
                            FileId: 1,
                            FilePath: filepath,
                        };
                        instance.fileData[formpropertyid] = fileReq;
                    }
                    return instance.fileData[formpropertyid];
                }
                getBase64(item) {
                    return __awaiter(this, void 0, void 0, function* () {
                        var filename = "";
                        filename = item.Files.DocumentFileName;
                        if (filename == undefined)
                            filename = item.Files.name;
                        let file = item.Files;
                        let fileInfo = item.Files.name.split('.');
                        return new Promise((resolve, reject) => {
                            let instance;
                            let content = '';
                            const reader = new FileReader();
                            reader.readAsDataURL(item.Files);
                            reader.onloadend = function () {
                                return __awaiter(this, void 0, void 0, function* () {
                                    var base64String = reader.result.toString().replace(/^data:.+;base64,/, '');
                                    var fileReq = {
                                        FileData: base64String,
                                        FileName: fileInfo[0],
                                        FileType: fileInfo[1],
                                        ByteData: null
                                    };
                                    resolve(fileReq);
                                });
                            };
                            reader.onerror = function (e) {
                                reject(e);
                            };
                        });
                    });
                }
                static Instance() {
                    if (this._instance === undefined)
                        this._instance = new ImagePicker();
                    return this._instance;
                }
            }
            Controls.ImagePicker = ImagePicker;
        })(Controls = Forms.Controls || (Forms.Controls = {}));
    })(Forms = Unibase.Forms || (Unibase.Forms = {}));
})(Unibase || (Unibase = {}));