Activities of "oncalldev@cloudassert.com"

As you can see the performance of the call - https://localhost:44370/api/account/profile-picture-file/fc6acc7a-ab15-e109-325e-3a0d8602930e

It takes almost 2 minutes to load the profile picture. however when we download the file from Azure blob it gets displayed in a milli-second. How can we optimize the performance of this call?

ABP Framework versionv 8.0.1

UI Type: Angular

Database System: EF Core (SQL Server)

Tiered (for MVC) or Auth Server Separated (for Angular): Auth server separated angular

Exception message and full stack trace:

Steps to reproduce the issue: https://authserver-domain-name/api/account/profile-picture/fc6acc7a-ab15-e109-325e-3a0d8602930e gets the file stream from DB. However I want to store the profile pictures in Azure Blob and store only the reference link in DB.

Could you please share the files where I need to make the change and also please share the existing logic that is used to upload the stream to DB. This is a production issue reported by customer and we need immediate assistance.

Also please mention where is the mapping of Users and their corresponding blobs?

Can you provide me var UPPY_UPLOAD_ENDPOINT = $("#uploadEndpoint").val(); uppy endpoint URL and what does it refer,and what does getUppyHeaders refer to?

function getUppyHeaders() { var headers = {}; headers[abp.security.antiForgery.tokenHeaderName] = abp.security.antiForgery.getToken(); return headers; }

Can we connect remotely to check

i have added in authserver application only still the file size exceeds than the expected file size , the actual image size it 125kb

These are the application i have in my project, where should i add the Default.js file or can we connect remotely to check it

Please check your mail i have attached the test project

Hi Can you check it remotely

(function ($) {

$(function () {
    var l = abp.localization.getResource('AbpAccount');

    var _accountService = volo.abp.account.account;

    var UPPY_UPLOAD_ENDPOINT = $("#uploadEndpoint").val();

    function getUppyHeaders() {
        var headers = {};
        headers[abp.security.antiForgery.tokenHeaderName] = abp.security.antiForgery.getToken();

        return headers;
    }

    var UPPY_OPTIONS = {
        endpoint: UPPY_UPLOAD_ENDPOINT,
        formData: true,
        fieldName: "ImageContent",
        method: "post",
        headers: getUppyHeaders(),
    };

    var UPPY = new Uppy.Uppy().use(Uppy.XHRUpload, UPPY_OPTIONS);

    UPPY.setOptions({
        restrictions: { maxFileSize: 10240  } // set the max file size
    });

    var UPPY_FILE_ID = "uppy-upload-file";

    var fileInput = $("#ChangeProfilePictureForm").find("#Picture");

    var imageContainer = document.getElementById("image");
    imageContainer.addEventListener("ready", putSampleImages);
    imageContainer.addEventListener("cropmove", putSampleImages);
    imageContainer.addEventListener("zoom", putSampleImages);

    var cropper = null;
    var saveProfilePictureBtn = $("#SaveProfilePicture");
    var imageProcessSection = $("div.image-process-section");

    var ppTypeRadio = $(".pp-type-selector");
    var uploadFileContainer = $("div#UploadPPContainer");

    function getSelectedPPTypeValue() {
        return $("input[name=pptype]:checked", "#ChangeProfilePictureForm").val();
    }

    ppTypeRadio.change(function () {
        var selectedValue = getSelectedPPTypeValue();

        if (selectedValue === "use-picture") {
            uploadFileContainer.removeClass("hidden-section");
        } else {
            uploadFileContainer.addClass("hidden-section");

            if (cropper) {
                $("ul.sample-images li").html("");
                cropper.destroy();
                imageContainer.src = "";
                fileInput.val("");
            }
        }
    });

    var fr = new FileReader();
    fr.onload = function (e) {
        imageContainer.src = this.result;

        cropper = new Cropper(imageContainer, {
            aspectRatio: 1 / 1,
            viewMode: 1,
        });

        putSampleImages();
    };

    fileInput.change(function () {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }

        var cursorInfo = $('#CursorInfo');
        cursorInfo.removeClass('hidden-section');
        cursorInfo.addClass('cursor-info');

        fr.readAsDataURL($(this).prop("files")[0]);
        imageProcessSection.css("display", "initial");
    });

    function putSampleImages() {
        var places = [
            ["big", 250],
            ["medium", 150],
            ["small", 75],
        ];

        for (let i = 0; i < places.length; i++) {
            var place = places[i];
            var selector = "ul.sample-images li." + place[0];

            $(selector).html(
                cropper.getCroppedCanvas({ width: place[1], height: place[1] })
            );
        }
    }

    saveProfilePictureBtn.click(function (e) {
        e.preventDefault();

        var $this = $(this);

        var message = null;
        var callBack = null;

        var selectedType = getSelectedPPTypeValue();

        if (selectedType === "use-gravatar") {
            // Use Gravatar

            message = l("UseGravatarConfirm");
            callBack = function (isConfirmed) {
                if (!isConfirmed) {
                    return;
                }

                $this.buttonBusy();
                _accountService
                    .setProfilePicture({ type: 1 })
                    .then(function (result) {
                        window.location.reload();
                    });
            };
        } else if (selectedType === "use-default") {
            message = l("NoProfilePictureConfirm");

            callBack = function (isConfirmed) {
                if (!isConfirmed) {
                    return;
                }

                $this.buttonBusy();
                _accountService
                    .setProfilePicture({ type: 0 })
                    .then(function (result) {
                        window.location.reload();
                    });
            };
        } else {
            if (!cropper) {
                abp.message.warn(l("PleaseSelectImage"));
                return;
            }

            var canvas = null;

            try {
                canvas = cropper.getCroppedCanvas();
            } catch (e) { }

            if (canvas === null) {
                abp.message.warn(l("PleaseSelectImage"));
                return;
            }

            message = l("PPUploadConfirm");
            callBack = function (isConfirmed) {
                if (!isConfirmed) {
                    return;
                }

                $this.buttonBusy();

                canvas.toBlob(function (blob) {
                    UPPY.cancelAll();

                    UPPY.addFile({
                        id: UPPY_FILE_ID,
                        name: fileInput[0].files[0].name, // file name
                        type: 2, // file type
                        data: blob, // file blob
                    });

                    UPPY.upload().then((result) => {
                        if (result.failed.length > 0) {
                            $this.buttonBusy(false);
                            abp.message.error(l("UploadFailedMessage"));
                        } else {
                            window.location.reload();
                        }
                    });
                },"image/jpeg");
            };
        }
        abp.message.confirm(message, l("AreYouSure")).then(callBack);
    });
});

})(jQuery); This the code i used

The file size i uploaded is 125kb but in it stored as 1.9mb This is the actual file i used I added Default.js in Authserver Module by creationg file in this path https://localhost:port/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js