jQuery - File uploader with multiple instances

I am trying to convert the working codepen into jQuery from Javascript in order to run multiple instances of the image uploader. The problem may be my attempt to iterate over each .item but also may be in the conversion from addEventListener to .on(). https://codepen.io/moofawsaw/pen/dyPdpGy

Where did I go wrong in my conversion?

Here is my attempted jQuery conversion (not working):

$(document).ready(function() {
  function ekUpload() {
    var $item = $(".item");

    function fileDragHover(e) {
      var fileDrag = $item.find(".file-drag");

      e.stopPropagation();
      e.preventDefault();

      fileDrag.className =
        e.type === "dragover" ? "hover" : "modal-body file-upload";
    }

    async function fileSelectHandler(e) {
      // Fetch FileList object
      var files = e.target.files || e.dataTransfer.files;

      // Cancel event and hover styling
      fileDragHover(e);

      // Process all File objects
      for (let i = 0; i < files.length; i++) {
        const f = files[i];
        if (await hasAlpha(f)) {
          console.log("Selected image is transparent");
          parseFile(f);
          uploadFile(f);
        } else {
          console.log("Selected image is not transparent");
          $item.find(".response").removeClass("hidden");
          $item.find(".error-image").removeClass("hidden");
          $item.find(".file-image").addClass("hidden");
          output(
            '<strong class="warning">Image background is not transparent</strong>'
          );
        }
      }
    }
    // Output
    function output(msg) {
      // Response
      var m = $item.find(".messages");
      m.innerHTML = msg;
    }

    function Init() {
      console.log("Upload Initialised");

      var fileSelect = $item.find(".file-upload"),
        fileDrag = $item.find(".file-drag"),
        submitButton = $item.find(".submit-button");

      fileSelect.on("change", function(e) {
        fileSelectHandler(e);
      });

      // Is XHR2 available?
      var xhr = new XMLHttpRequest();
      if (xhr.upload) {
        // File Drop
        fileDrag.on("change dragleave", function(e) {
          fileDragHover(e);
        });
        fileDrag.on("drop", function(e) {
          fileSelectHandler(e);
        });
      }
    }

    function hasAlpha(file) {
      return new Promise((resolve, reject) => {
        let hasAlpha = false;
        const canvas = $item.find("canvas");
        const ctx = canvas.getContext("2d");

        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.onerror = reject;
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;

          ctx.drawImage(img, 0, 0);
          const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
            .data;

          for (let j = 0; j < imgData.length; j += 4) {
            if (imgData[j + 3] < 255) {
              hasAlpha = true;
              break;
            }
          }
          resolve(hasAlpha);
        };
        img.src = URL.createObjectURL(file);
      });
    }

    function parseFile(file) {
      console.log(file.name);
      output("<strong>" + encodeURI(file.name) + "</strong>");

      // var fileType = file.type;
      // console.log(fileType);
      var imageName = file.name;

      var isGood = /\.(?=svg|jpg|png|jpeg)/gi.test(imageName);
      if (isGood) {
        $item.find(".start").addClass("hidden");
        $item.find(".response").removeClass("hidden");
        $item.find(".notimage").addClass("hidden");
        // Thumbnail Preview
        $item.find(".error-image").addClass("hidden");
        $item.find(".file-image").removeClass("hidden");
        $item.find(".file-image").src = URL.createObjectURL(file);
      } else {
        $item.find(".error-image").removeClass("hidden");
        $item.find(".file-image").addClass("hidden");
        $item.find(".notimage").removeClass("hidden");
        $item.find(".start").removeClass("hidden");
        $item.find(".response").addClass("hidden");
        $item.find(".file-upload-form").reset();
      }
    }

    function uploadFile(file) {
      var xhr = new XMLHttpRequest(),
        fileInput = $this.find(".class-roster-file"),
        fileSizeLimit = 1024; // In MB

      if (xhr.upload) {
        // Check if file is less than x MB
        if (file.size <= fileSizeLimit * 1024 * 1024) {
          // File received / failed
          xhr.onreadystatechange = function(e) {
            if (xhr.readyState == 4) {
              // Everything is good!
              // document.location.reload(true);
            }
          };

          // Start upload
          xhr.open(
            "POST",
            document.getElementById("file-upload-form").action,
            true
          );
          xhr.setRequestHeader("X-File-Name", file.name);
          xhr.setRequestHeader("X-File-Size", file.size);
          xhr.setRequestHeader("Content-Type", "multipart/form-data");
          xhr.send(file);
        } else {
          output("Please upload a smaller file (< " + fileSizeLimit + " MB).");
        }
      }
    }

    // Check for the various File API support.
    if (window.File && window.FileList && window.FileReader) {
      Init();
    } else {
      $item.find("file-drag").css("display", "none");
    }
  }
  $(".item").each(function() {
    ekUpload();
  });
});

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Roboto");
html,
body,
* {
  box-sizing: border-box;
  font-size: 16px;
}

html,
body {
  height: 100%;
  text-align: center;
}

body {
  padding: 2rem;
  background: #f8f8f8;
}

h2 {
  font-family: "Roboto", sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #454cad;
  margin-bottom: 0;
}

p {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #5f6982;
}

.uploader {
  display: block;
  clear: both;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

.uploader label {
  float: left;
  clear: both;
  width: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: 7px;
  border: 3px solid #eee;
  transition: all .2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.uploader label:hover {
  border-color: #454cad;
}

.uploader label.hover {
  border: 3px solid #454cad;
  box-shadow: inset 0 0 0 6px #eee;
}

.uploader label.hover #start i.fa {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.3;
}

.uploader #start {
  float: left;
  clear: both;
  width: 100%;
}

.uploader #start.hidden {
  display: none;
}

.uploader #start i.fa {
  font-size: 50px;
  margin-bottom: 1rem;
  transition: all .2s ease-in-out;
}

.uploader #response {
  float: left;
  clear: both;
  width: 100%;
}

.uploader #response.hidden {
  display: none;
}

.uploader #response #messages {
  margin-bottom: .5rem;
}

.uploader #file-image {
  display: inline;
  margin: 0 auto .5rem auto;
  width: auto;
  height: auto;
  max-width: 180px;
}

.uploader #file-image.hidden {
  display: none;
}

.uploader #notimage {
  display: block;
  float: left;
  clear: both;
  width: 100%;
}

.uploader #notimage.hidden {
  display: none;
}

.uploader progress,
.uploader .progress {
  display: inline;
  clear: both;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background-color: #eee;
  overflow: hidden;
}

.uploader .progress[value]::-webkit-progress-bar {
  border-radius: 4px;
  background-color: #eee;
}

.uploader .progress[value]::-webkit-progress-value {
  background: linear-gradient(to right, #393f90 0%, #454cad 50%);
  border-radius: 4px;
}

.uploader .progress[value]::-moz-progress-bar {
  background: linear-gradient(to right, #393f90 0%, #454cad 50%);
  border-radius: 4px;
}

.uploader input[type="file"] {
  display: none;
}

.uploader div {
  margin: 0 0 .5rem 0;
  color: #5f6982;
}

.uploader .btn {
  display: inline-block;
  margin: .5rem .5rem 1rem .5rem;
  clear: both;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-transform: initial;
  border: none;
  border-radius: .2rem;
  outline: none;
  padding: 0 1rem;
  height: 36px;
  line-height: 36px;
  color: #fff;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  background: #454cad;
  border-color: #454cad;
  cursor: pointer;
}

.uploader input[type="file"],
.hidden {
  display: none;
}

.warning {
  color: red;
  font-weight: bold;
}

canvas {
  position: absolute;
  top: -2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Upload  -->
<div class="item">
  <form class="uploader file-upload-form">
    <input class="file-upload" type="file" name="fileUpload" accept="image/*" />
    <label for="file-upload" class="file-drag">
    <img src="#" alt="Preview" class="file-image hidden">
    <img src="https://cdn3.iconfinder.com/data/icons/online-states/150/Snooze-512.png" class="error-image hidden">
    <div class="start">
      <i class="fa fa-download" aria-hidden="true"></i>
      <div>Select a file or drag here</div>
      <div class="notimage hidden">Please select an image</div>
    </div>
    <div class="response hidden">
      <div class="messages"></div>
    </div>
  </label>
  </form>
  <div class="filename"></div>
  <canvas></canvas>
</div>
<div class="item">
  <form class="uploader file-upload-form">
    <input class="file-upload" type="file" name="fileUpload" accept="image/*" />
    <label for="file-upload" class="file-drag">
    <img src="#" alt="Preview" class="file-image hidden">
    <img src="https://cdn3.iconfinder.com/data/icons/online-states/150/Snooze-512.png" class="error-image hidden">
    <div class="start">
      <i class="fa fa-download" aria-hidden="true"></i>
      <div>Select a file or drag here</div>
      <div class="notimage hidden">Please select an image</div>
    </div>
    <div class="response hidden">
      <div class="messages"></div>
    </div>
  </label>
  </form>
  <div class="filename"></div>
  <canvas></canvas>
</div>

from jQuery - File uploader with multiple instances