Javascript 如何将拖放功能添加到我已自定义为图像的文件输入HTML标签中

document.addEventListener("DOMContentLoaded", function() {
  const fileUploadElement = document.getElementById('fileUpload');
  const chosenFileElement = document.getElementById('chosen-file');
  const fileDropArea = document.getElementById('fileDropArea');

  const handleFileSelect = function(event) {
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    showFileName(files);
  };

  const handleDragOver = function(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy'; 
  };

  const showFileName = function(files) {
    if (files.length > 0) {
      chosenFileElement.textContent = files[0].name;
    } else {
      chosenFileElement.textContent = 'No file chosen';
    }
  };

  fileDropArea.addEventListener('dragover', handleDragOver, false);
  fileDropArea.addEventListener('drop', handleFileSelect, false);

  fileUploadElement.addEventListener('change', function() {
    showFileName(this.files);
  });
});

.required-file::after {
  content: "*";
  color: red;
}

.custom-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: 2px dashed #ccc;
}

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

<label for="fileUpload" class="custom-upload" id="fileDropArea">
        <img src="https://cataas.com/cat" width="100" height="100">
    </label>
<input type="file" id="fileUpload" name="fileUpload">
<span class="required-file" id="chosen-file">No file chosen</span>