Profile picture loading #7060

oncalldev@cloudassert.com created 2 years ago

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:

Post login, https://authserver-domain-name/api/account/profile-picture/fc6acc7a-ab15-e109-325e-3a0d8602930e request taking longer time to get response. Please find below screenshot image.png Seems the size of the response is around 34.7Mb. Due to this, Post login we were not able to see the profile icon at the top right corner until the request got completed. Attached a screenshot for your reference

maliming created 2 years ago

Support Team Fullstack Developer

Is your image size 34MB?

oncalldev@cloudassert.com created 2 years ago

The actual file size is arount 125kb This is the file i uploded , but in response it is getting stored as 2.0Mb , so the profile picture is also loaded very slow, what is the solution so that the profile picture get loaded as soon as we open the application

maliming created 2 years ago

Support Team Fullstack Developer

Have you enabled the EnableImageCompression(AbpProfilePictureOptions)?

If so you can try to disable it.

oncalldev@cloudassert.com created 2 years ago

I havent enabled it

maliming created 2 years ago

Support Team Fullstack Developer

Thanks. I will check in depth.

maliming created 2 years ago

Support Team Fullstack Developer

Please replace this js: account/src/Volo.Abp.Account.Pro.Public.Web/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js

https://docs.abp.io/en/abp/latest/Virtual-File-System#replacing-overriding-virtual-files https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface

oncalldev@cloudassert.com created 2 years ago

Where an we find Default.js file

maliming created 2 years ago

Support Team Fullstack Developer

https://localhost:port/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js

oncalldev@cloudassert.com created 2 years ago

Configure<AbpBundlingOptions>(options => { options.ScriptBundles .Configure( typeof(Volo.Abp.Account.Pro.Public.Web.Account).FullName, bundleConfig => { bundleConfig.AddFiles("/Pages/Identity/Roles/my-role-script.js"); }); }); In order to ovverride this account/src/Volo.Abp.Account.Pro.Public.Web/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js, Virtual file, what is the typeof that should be added.

For example in the below picture type of is typeof(Volo.Abp.Identity.Web.Pages.Identity.Roles.IndexModel).FullName,So in my case what is the type of that should be added

maliming created 2 years ago

Support Team Fullstack Developer

You can create the same Default.js file on your project.

oncalldev@cloudassert.com created 2 years ago

Can you share default.js (complete code) file with path and module

maliming created 2 years ago

Support Team Fullstack Developer

You can run your app and get the full js code: https://localhost:port/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js

Then create a folder and Default.js with structure Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js

oncalldev@cloudassert.com created 2 years ago

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

maliming created 2 years ago

Support Team Fullstack Developer

Please open the https://localhost:port/Pages/Account/Components/ProfileManagementGroup/ProfilePicture/Default.js in your browse to make sure the image/jpeg has been added to the toBlob method.

oncalldev@cloudassert.com created 2 years ago

(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 &lt; places.length; i++) {
            var place = places[i];
            var selector = &quot;ul.sample-images li.&quot; + 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 === &quot;use-gravatar&quot;) {
            // Use Gravatar

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

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

            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(&quot;PleaseSelectImage&quot;));
                return;
            }

            var canvas = null;

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

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

            message = l(&quot;PPUploadConfirm&quot;);
            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) =&gt; {
                        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

maliming created 2 years ago

Support Team Fullstack Developer

Can I check it remotely?

You can join and share your screen.

Thanks https://us05web.zoom.us/j/81173114824?pwd=ZZMagGmlB8Kq8rWPonJbb2PZtrzasN.1

oncalldev@cloudassert.com created 2 years ago

Hi Can you check it remotely

maliming created 2 years ago

Support Team Fullstack Developer

Can you share a test project and the image?

liming.ma@volosoft.com

oncalldev@cloudassert.com created 2 years ago

Please check your mail i have attached the test project

maliming created 2 years ago

Support Team Fullstack Developer

Thanks. I will check your project asap.

maliming created 2 years ago

Support Team Fullstack Developer

I found the reason. You can add the third parameter(quality) to decrease the image size.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#quality

A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.