Profile picture loading #7060 | Support Center | ABP Commercial

oncalldev@cloudassert.com created 13 days 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 13 days ago
Support Team Fullstack Developer

hi

Is your image size 34MB?
0

oncalldev@cloudassert.com created 13 days 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 13 days 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 13 days ago

I havent enabled it
0

maliming created 13 days ago
Support Team Fullstack Developer

Thanks. I will check in depth.
0

maliming created 13 days 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 13 days ago

Where an we find Default.js file
0

maliming created 13 days ago
Support Team Fullstack Developer

hi

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

oncalldev@cloudassert.com created 13 days 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 12 days ago
Support Team Fullstack Developer

hi

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

oncalldev@cloudassert.com created 12 days ago

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

maliming created 12 days 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 9 days 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 9 days 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 9 days 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 9 days 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 days ago

Hi Can you check it remotely
0

maliming created 7 days ago
Support Team Fullstack Developer

hi

Can you share a test project and the image?

liming.ma@volosoft.com
0

oncalldev@cloudassert.com created 6 days ago

Please check your mail i have attached the test project
0

maliming created 6 days ago
Support Team Fullstack Developer

Thanks. I will check your project asap.
0

maliming created 6 days 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 6 days 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 6 days ago
Support Team Fullstack Developer

hi

Add the Default.js to the AuthServer project.
0

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