jQuery can't run URL.createObjectUrl in fadeIn() function

Question

This code works fine as far as uploading images to a browser and then later to a server without a progressbar. I would like to add a progress bar to run during both uploads. I would like it to run once the fadeIn() function has been completed. The only method I can find is to run the code inside the fadeIn() function however this URL.createObjectURL(event.target.files[i]) throws this error

Uncaught TypeError: Cannot read properties of undefined (reading 'target')
    at HTMLDivElement.<anonymous>

No idea how to get around this.

 //put image html into iframe
   function upload_to_browser() {


  var html = "";
  var total_files = document.getElementById("files").files.length;
  var progressbar = $(".progressbar").progressbar({ max: total_files }).fadeIn(200, function () {

     for (var i = 0; i < total_files; i++) {
        var file = $("#files")[0].files[i];
        html = html + "<img id='image" + i + "' with=100 height=100 src='" + URL.createObjectURL(event.target.files[i]) + "'>";
     }
     document.getElementById("image_preview").contentDocument.write(html);
  });
   }

 .applet_preview {
      color: white;
      background: rgba(30, 30, 30, .1);
      border-radius: 10px;
      right: 10%;
      left: 10%;
      top: 10%;
      bottom: 10%;
      text-align: center;
      z-index: 900;
      display: none;
   }

   .progressbar {
      color: white;
      background: rgba(30, 30, 30, .7);
      border-radius: 10px;
      right: 10%;
      left: 10%;
      top: 50%;
      bottom: 50%;
      height: 20px;
      text-align: center;
      z-index: 950;
      position: fixed;
      display: none;

   }

<!-- html to upload images to pre

view -->
    <div id="applet_preview" class="applet_preview">

       <form action="javascript:void(0);" method="post" enctype="multipart/form-data">
          <input type="file" id="files" name="upload_file[]" onchange="upload_to_browser();"
             accept="image/png, image/gif, image/jpeg" multiple />
          <input type="button" class="button" id='upload' value="Upload Image" />
          <script>$("#upload").click(function () { upload_to_server(); });</script>
       </form>
       <iframe id="image_preview" style="width: 90%; height: 75%;"></iframe>
       <br><button id="close"> Cancel </button>
       <script>$("#close").click(function () {
             $("#applet_preview").fadeOut(200); 
             document.getElementById("image_preview").src = "about:blank";
          }); </script>
    </div>

<div class="progressbar" id="progressbar"></div>

Answer 1

Figure it out. If I create a Blob array first before calling the fadeIn() and then use it inside it works fine.

var total_files = document.getElementById("files").files.length;
var blobs = new Blob([]);
for (var i = 0; i < total_files; i++) {
   blobs[i] = URL.createObjectURL(event.target.files[i]);
}

$(".progressbar_background").fadeIn(200, function () {
var $iframe = $('#image_preview');

for (var i = 0; i < total_files; i++) {
   $iframe.contents().find("body").append("<img id='image" + i + "' with=100 height=100 src='" + blobs[i] + "'>");
}
});