Profile picture loading #7060 | Support

oncalldev@cloudassert.com created 7 months 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

29 Answer(s)

0

maliming created 7 months ago
Support Team Fullstack Developer

hi

Is your image size 34MB?
0

oncalldev@cloudassert.com created 7 months 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
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

Have you enabled the EnableImageCompression(AbpProfilePictureOptions)?

If so you can try to disable it.
0

oncalldev@cloudassert.com created 7 months ago

I havent enabled it
0

maliming created 7 months ago
Support Team Fullstack Developer

Thanks. I will check in depth.
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

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
0

oncalldev@cloudassert.com created 7 months ago

Where an we find Default.js file
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

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

oncalldev@cloudassert.com created 7 months 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
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

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

oncalldev@cloudassert.com created 7 months ago

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

maliming created 7 months ago
Support Team Fullstack Developer

hi

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
0

oncalldev@cloudassert.com created 7 months 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
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

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 7 months 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

1

maliming created 7 months ago
Support Team Fullstack Developer

hi

Can I check it remotely?

You can join and share your screen.

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

oncalldev@cloudassert.com created 7 months ago

Hi Can you check it remotely
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

Can you share a test project and the image?

liming.ma@volosoft.com
0

oncalldev@cloudassert.com created 7 months ago

Please check your mail i have attached the test project
0

maliming created 7 months ago
Support Team Fullstack Developer

Thanks. I will check your project asap.
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

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.
0

oncalldev@cloudassert.com created 7 months ago

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
0

maliming created 7 months ago
Support Team Fullstack Developer

hi

Add the Default.js to the AuthServer project.
0

oncalldev@cloudassert.com created 7 months ago

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

maliming created 7 months ago
Support Team Fullstack Developer

hi

If the size is still large, you can change the quality parameter, e.g. 0.85, 0.8.

Showing 1 to 25 of 29 entries.

Previous
1 (current)
2
Next

Have an answer to this question? Log in and write your answer.