I have an image editor with a button, when the button is pressed it saves the image to a folder on the server. 

It works in most cases, although sometimes it throws an Http 400 error. 

How do I add error handling so I can present a nice message to the user?

It seems the error happens when the image size (height and/or width) is exceptionally big, is that the case? 

here's my code:

    <form method="post">
      <input type="hidden" asp-for="editedFileName" />
      <input type="hidden" asp-for="ImagePath" />
      <div class="admin-button-container align-right">
        <button type="submit" class="btn btn-theme-admin">Save Image</button>
      </div>
      <div class="imageEditor"></div>
    </form>

my js:

$(document).ready(function() {
	var OpenExecuted = false;
	//  page load
	showImgOption();
});


function onSelect(e) {
	$('#editedFileName').val(e.files[0].name);
}

function handleUploadImageEvents(imageEditor) {
	OpenExecuted = true;
	imageEditor._upload.bind("select", onSelect);
}

function onImageRendered(e) {
	zoom();
	saveImagePath();
};

function onExecute(e) {
	if (e.command === "OpenImageEditorCommand") {
		setTimeout(function() {
			handleUploadImageEvents(e.sender);
		});
	}
};

// this function will zoom out the photo if the height is more than 600px 
// so that it does not overlap other fields on the page
function zoom() {
	var imgEditor = $('.imageEditor').data('kendoImageEditor');

	imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.zoom = 1 });
	var imgHt = $(".k-imageeditor-canvas").height();
	if (imgHt > 600) {
		imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.getZoomLevel() - 0.5 });
	}
};


function ImgEditor() {
	$(`.imageEditor`).kendoImageEditor({
		toolbar: {
			items: [
				"open",
				"save",
				"crop",
				"resize",
				"undo",
				"redo",
				"zoomIn",
				"zoomOut",
				"zoomDropdown",
			]

		},
		messages: {
			toolbar: {
				open: "Upload"
			},
		},
		imageUrl: $('[id="ImagePath"]').val(),
		height: 650,
		error: onError,
		imageRendered: onImageRendered,
		execute: onExecute,
	});
}



function onError(e) {
	console.log('Error');
};

function showImgOption() {
	var imgFilePath = $('[id="ImagePath"]').val();
	if (imgFilePath.length > 0) {
		var imgFilename = imgFilePath.slice(imgFilePath.lastIndexOf("/") + 1, imgFilePath.length + 1);
		$('[id="FileName"]').val(imgFilename);
	}

		ImgEditor();
}


function saveImagePath() {
	const imageEditor = $('.imageEditor').data('kendoImageEditor');
	const image = imageEditor.getCurrentImage();
	const imageObject = new DOMParser().parseFromString(image, "text/xml");
	const canvas = imageEditor.getCanvasElement();
	const fileArray = canvas.toDataURL().split(",");
	const base64String = canvas.toDataURL();
	const imagePathSaved = $('[id="ImagePath"]').val(fileArray[1]);
}

As per document : ASP.NET MVC jQuery Support - Telerik UI for ASP.NET MVC

It says the MVC 2023.1.117.0 support JQuery 3.6.1, but when i tried to use JQuery 3.6.1 on MVC Example demo , the page won't load the component.

Do i need to setting another thing to upgrade jquery ?

I am using the Image Browser  https://demos.telerik.com/aspnet-mvc/editor/imagebrowser on my Razor pages.

How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?

I have a preview container where the max-width I am allowed to see the preview is 650px.
but when on ImageBrowser--> Insert Window --> I have a list of uploaded images --> if i am selecting images below max size but resolution is above 650px the images on preview are too stretched out.

I know we have an option to set the width n height when inserting but how do I auto set it before I hit insert button?
 I am thinking to use this:
<script>
    $(document).ready(function () {
        // Attach a click handler to the ImageBrowser tool of the Editor.
        $(".k-i-image").click(function () {
            setTimeout(function(){
                // Attach a select handler to the Upload embedded in the ImageBrowser.
                $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
                    // Prevent the event if the selected file exceeds the specified limit.
                    if (e.files[0].size > 1048576) {
                        e.preventDefault();
                        alert("Maximum allowed file size: 1MB");
                    }

                    // Check image resolution and limit width if necessary.
                    var img = new Image();
                    img.src = URL.createObjectURL(e.files[0].rawFile);

                    img.onload = function() {
                        if (img.width > 550) {
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");

                            // Calculate new height while maintaining the aspect ratio.
                            var ratio = 550 / img.width;
                            var newHeight = img.height * ratio;

                            canvas.width = 550;
                            canvas.height = newHeight;

                            // Draw the image on the canvas with the adjusted dimensions.
                            ctx.drawImage(img, 0, 0, 550, newHeight);

                            // Convert the canvas content back to a Blob object.
                            canvas.toBlob(function (blob) {
                                // Replace the original file with the resized image file.
                                e.files[0].rawFile = blob;
                            }, e.files[0].type);
                        }
                    };
                });
            });
        });
    });
</script>

I am using the Kendo Editor Image Browser from : https://demos.telerik.com/aspnet-mvc/editor/imagebrowser.
Where I have hidden/removed the 
1. Home icon
2.New Folder
3. Delete
4. Arrange By
5. Web Address
6. Alternate Text
using css on my local.

Is there any way to customize this without CSS?