Load specific image to HTML file upload on button click

Question

My script has an HTML file upload button in which I can upload an image by selecting any. I am creating functionality to load a specific image by clicking a button. Like if I click a button the HTML file upload value should load this URL image. Image 1 https://studysciences.com/wp-content/uploads/2020/05/Osteoarthritis-main.jpg

var $btnLoadMaskImage = $('#input-mask-image-file');
var $btnApplyMask = $('#btn-apply-mask');
var $btnClose = $('.close');

$btnLoadMaskImage.on('change', function() {
    var file;
    var imgUrl;

    if (!supportingFileAPI) {
        alert('This browser does not support file-api');
    }

    file = event.target.files[0];

    if (file) {
        imgUrl = URL.createObjectURL(file);

        imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(function() {
            imageEditor.addImageObject(imgUrl).then(function(objectProps) {
                URL.revokeObjectURL(file);
                console.log(objectProps);
            });
        });
    }
});

$btnApplyMask.on('click', function() {
    imageEditor.applyFilter('mask', {
        maskObjId: activeObjectId
    }).then(function(result) {
        console.log(result);
    });
});
$btnClose.on('click', function() {
    imageEditor.stopDrawingMode();
    $displayingSubMenu.hide();
});

<input type="file" accept="image/*" id="input-mask-image-file">

Answer 1

Working DEMO environment: https://codepen.io/tester2020/pen/ExPEyER?editors=1001

Essential code:

var $newBtn = $('#newBtn');

$newBtn.on('click', function() {

  // URL address of your image:
  var imgUrl = 'https://i.ibb.co/BPfJmqM/Osteoarthritis-main.jpg';

  var byteNumbers = new Array(imgUrl.length);

  for (var i = 0; i < imgUrl.length; i++) {
    byteNumbers[i] = imgUrl.charCodeAt(i);
  }

  var file = new File(byteNumbers, imgUrl, { type: "image/jpeg" });

  imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(function() {
    imageEditor.addImageObject(imgUrl).then(function(objectProps) {
      URL.revokeObjectURL(file);
      console.log(objectProps);
    });
  });
});