Drag and drop image for an uploader

.NET
1

This code exists in my current ASP.net document that I would like to replace or at least have the ability to “drag and drop” an image, but at the same time have the click an image to upload too. Code works fine but don’t know how to replace or modify with drag and drop.

Any help would be appreciated.

<!DOCTYPE html>
<head runat="server">
    <title>Upload Images</title>
      <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField runat="server" ID="hdnPhotoURL" />
    <asp:HiddenField runat="server" ID="hdnAgentID" />
    <div>
        <asp:Panel ID="pnlMain" runat="server">
            Photo: <asp:FileUpload ID="fupPhoto" runat="server" /><br />
            <br />

            <center><asp:Button ID="btnUpload" runat="server" Text="Upload Photo" OnClick="btnUpload_Click" /></center>
            
            <asp:Label runat="server" ID="lblAlert"></asp:Label>
        </asp:Panel>
        <asp:Panel runat="server" Visible="false" ID="litJS">

This is some AI generated code that I would like to incorporate into this page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop File Upload</title>
<style>
  .drop-zone {
    max-width: 200px;
    height: 200px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #009578;
    border-radius: 5px;
    cursor: pointer;
  }
  .drop-zone:hover {
    background-color: #f1f1f1;
  }
  .drop-zone input[type="file"] {
    display: none;
  }
</style>
</head>
<body>

<form id="file-upload-form" class="box" method="post" action="" enctype="multipart/form-data">
  <div class="drop-zone">
    <span>Drag and drop a file here or click</span>
    <input type="file" name="files[]" id="file" multiple />
  </div>
</form>

<script>
  let dropZone = document.getElementById('file-upload-form');

  dropZone.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.target.classList.add('drop-zone--over');
  });

  dropZone.addEventListener('dragleave', function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.target.classList.remove('drop-zone--over');
  });

  dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    let files = e.dataTransfer.files;
    document.getElementById('file').files = files;
    // You can perform the upload or file processing here
  });

  dropZone.addEventListener('click', function() {
    document.getElementById('file').click();
  });
</script>