Taking longer time to load the User Profile Icon and My Account page as well #6806

5 Answer(s)

• 

  0

  liangshiwei created 8 months ago

  Support Team Fullstack Developer

  Hi,

  I guess the user uploaded a large size image as a profile picture You can wait for the page to load and then upload a smaller image as a profile picture

  Save Cancel
• 

  0

  oncalldev@cloudassert.com created 8 months ago

  Hi, Thanks for your response. The size of the uploaded profile picture is 762KB only.

  Save Cancel
• 

  0

  liangshiwei created 8 months ago

  Support Team Fullstack Developer

  Hi,

  I could not reproduce the problem

  My steps:

  • abp new Qa -u angular -v 8.0.1 --separate-auth-server
  • Create database
  • Run the application to upload an image.

  

  Could you please share the full steps to reproduce the problem? thanks.

  Save Cancel
• 

  0

  oncalldev@cloudassert.com created 8 months ago

  Hi Liangshiwei, I have checked with small size profile picture (i.e. 50kb/120kb). Its response is much faster than earlier. In this case, how can we restrict the user to upload with maximum profile picture size that is 150kb in manage accounts page. Could you please help me on this

  Save Cancel
• 

  0

  liangshiwei created 8 months ago

  Support Team Fullstack Developer

  Hi,

  ABP is using Uppy to upload images.

  You can set the max file size https://uppy.io/docs/uppy/#setoptionsopts https://uppy.io/docs/uppy/#restrictions

  You need to override the Default.js file:

  Create a Default.js file in the Pages/Account/Components/ProfileManagementGroup/ProfilePicture folder

  (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: ..... } // 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();
                              }
                          });
                      });
                  };
              }
              abp.message.confirm(message, l("AreYouSure")).then(callBack);
          });
      });
  
  })(jQuery);
  
  

  Save Cancel