Изменение вложенного файла для ввода с использованием JavaScript

Question

Я работаю в проприетарной CMS, где у меня есть доступ только HTML + Javascript / jQuery, и я использую их автоматически сгенерированную форму. Я пытаюсь добавить в эту форму возможность обрезки изображений с помощью cropper. js. Я написал сценарий для загрузки загруженного файла в обрезку. Я ищу обходной путь, чтобы прикрепить этот файл обратно к исходному скрытому полю, созданному CMS. Когда я пытаюсь установить значение скрытого файла, я получаю сообщение «Не удалось установить свойство 'value' в 'HTMLInputElement': этот элемент ввода принимает имя файла, которое может быть только программно установлено на пустую строку» *. 1001 *

Вот фрагмент моего кода, который вызывает ошибку

$("#crop-image").click(function() {
    var canvas = cropper.getCroppedCanvas();
    document.querySelector('.upload-container').appendChild(canvas);
    var blob = canvas.toDataURL();
    console.log(typeof blob);
    console.log(blob);
    const hiddenInput = document.getElementById("signup_signup_profile_attributes_image");
    hiddenInput.value = blob;
})

Кто-нибудь знает, как заставить этот метод работать, или другой обходной путь для выполнения sh того, что я пытаюсь делать?