Trying to change the value of Input using Javascrpit getting security error

Question

I am trying to resize a user input using Javascript. I am able to get right to almost the last part.

1. I am taking the user input image
2. I am creating a new image with the same src as the input image
3. I am resizing the new image
4. I show a small preview thumbnail to the user
5. SO far everything worked... Now the last part that did not work
6. I change the input.result = new_resized_image.src

Below is the error message I get

Below is the code

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");

        const file_input = document.getElementById('main_image');
        file_input.addEventListener('change', function (e) {
        const file = file_input.files[0];
        const reader = new FileReader();
        reader.onload = function () {
            if (!file.name.match(/.(jpg|jpeg|png|gif)$/i)){
                alert('Only jpg, jpeg, png, gif accepted at the moment');
                file_input.value = "";
            }
            if (file.size <= (1024*1024)){
                const img = new Image();
                img.src = reader.result;
                console.log("Small Image Width " + img.width);
                console.log( "Small Image Height " + img.height);
                const preview_image = document.getElementById("preview");
                preview_image.src = img.src;
                console.log("Thumbnail Image height " + preview_image.height);
                console.log("Thumbnail Image width " + preview_image.width);
            }
            else {
                const img = new Image();
                img.src = reader.result;
                const preview_image = document.getElementById("preview");
                const MAX_WIDTH = 1024;
                const MAX_HEIGHT = 1024;

                img.onload = function(){
                    console.log(img.width);
                    console.log(img.height);
                    let width = img.width;
                    let height = img.height;

                    if (width > height){
                        if (width > MAX_WIDTH){
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    }else {
                        if (height > MAX_HEIGHT){
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT
                        }
                    }
                    const canvas = document.createElement("canvas");
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(img, 0, 0, width, height);
                    const new_image = document.getElementById("new_image");
                    new_image.src = canvas.toDataURL('image/jpeg');
                    new_image.onload = function(){
                      console.log(this.width);
                      console.log(this.height);
                    };


                    preview_image.src = new_image.src;
                    file_input.value = new_image.src;

                };

Answer 1

It is always possible to convert the data to base64 and stick that in a hidden <input> or <textarea> if what you want is to send the image back to the server when the client submits the form.

Then you can always have a button that looks like a "Browse" button if you think that's important to have such in your form.

Also, you could use jQuery.ajax() or fetch() to send the base64 or some other type of data to your server.

Answer 2

I think the last line should be

file_input.src instead of file_input.value