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);
Ok, Actually, I'm asking you how to reproduce the problem, but you didn't provide the steps.
However, you can override the ResetPassword localization text
Open localization file to add the localization key:
"ConfirmPassword": "My confirm password"
Configure the AbpLocalizationOptions in the AuthServer module class
Configure<AbpLocalizationOptions>(options =>
{
options.Resources.Get<AccountResource>()
.AddVirtualJson("/Localization/Qa"); // replace Qa with yours
});
In reset password link i get this type of error message form confirmpassword like "The ConfirmPassword is required field" the object name is 'ConfirmPassword' but it should be actually ' Confirm Password',How can i change the object name.
Ok, I understand, but how do I reproduce the problem? Can you share a sample project to reproduce the problem with me, and I will check it out? My email is shiwei.liang@volosoft.com thanks.
You can see in my screenshot it's work.
Hi,
I could not reproduce the problem.
My steps:
abp new Qa -u angular -v 8.0.1
Could you share the full steps to reproduce? thanks.
Can we using zoom?
Hi,
Sorry, but I can't build the projects
Hi,
You can upload it to Google Drive or Onedrive and share the link.
Hi,
Can this help you? https://docs.abp.io/en/abp/latest/UI/Angular/Form-Validation#how-to-add-new-error-messages
Hi,
I didn't see any error message.
Can you share the full error logs? thanks.
Hi,
How do you configure the subdomain tenant resolver?
Could you share your steps?
