Заменить ввод (файл) вновь созданным файлом

Я предполагаю, что должно быть легкое решение моей проблемы. но мое незнание JS мешает мне решить эту проблему.

У меня есть поле input для файла, в котором после выбора файла появляется модальное всплывающее окно начальной загрузки, чтобы обрезать это изображение с помощью Croppie.js. Затем изображение отображается так, как оно должно выглядеть (обрезанная версия).

Мой HTML (соответствующие части):

  <!-- this is where the image will appear -->
  <img src = "" class = "js-image img-responsive img-thumbnail" id = "item-img-output" />

  <input type = "file" id = "program_header_image_headerImage_file" name = "program_header_image[headerImage][file]" class = "js-item-upload form-control-file">
  <button type = "submit" class = "btn btn-success" style = "margin-top: 15px">Save</button>

JS (соответствующие части)

$('#cropImageBtn').on('click', function(ev) {
      $uploadCrop.croppie('result', {
        type: 'base64',
        format: 'jpeg',
        size: {
          width: 1920,
          height: 400
        }
      }).then(function(resp) {
        $('#item-img-output').attr('src', resp);
        $('#cropImagePop').modal('hide');
      });

Чтобы увидеть это в действии, используйте JSFiddle.

Теперь, когда я нажимаю кнопку отправки, загружается исходное изображение, а не только что обрезанное. Это имеет смысл, потому что это то, что находится на входе. Однако, как я могу сделать так, чтобы вместо этого загружалось мое обрезанное изображение?