Vue Js Drag and Drop Image Upload

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <h3>Vue Js drag and drop image upload</h3>
    <label for="uploadFile" class="btn btn-primary">Upload Image</label>
    <strong>OR</strong>
    <div class="drop-area" @dragover="dragOver" @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"
      @click="openFileDialog">
      <p>Drag and drop an image here</p>
      <input type="file" ref="fileInput" id="uploadFile" @change="handleFileUpload" />
    </div>
    <img :src="imageUrl" alt="Uploaded Image" v-if="imageUrl" style="max-width: 100%; margin-top: 20px;" />
  </div>

<script type="module">
    const app = Vue.createApp({
      data() {
        return {
          imageUrl: ''
        };
      },
      methods: {
        dragOver(event) {
          event.preventDefault();
          this.highlightDropArea(true);
        },
        dragEnter(event) {
          event.preventDefault();
          this.highlightDropArea(true);
        },
        dragLeave(event) {
          event.preventDefault();
          this.highlightDropArea(false);
        },
        drop(event) {
          event.preventDefault();
          this.highlightDropArea(false);
          const files = event.dataTransfer.files;
          if (files.length > 0) {
            this.handleFile(files[0]);
          }
        },
        openFileDialog() {
          const fileInput = this.$refs.fileInput;
          fileInput.click();
        },
        highlightDropArea(highlight) {
          const dropArea = document.querySelector('.drop-area');
          dropArea.classList.toggle('highlight', highlight);
        },
        handleFileUpload() {
          const fileInput = this.$refs.fileInput;
          if (fileInput.files.length > 0) {
            this.handleFile(fileInput.files[0]);
          }
        },
        handleFile(file) {
          // Perform file handling or upload logic here
          console.log('Uploaded file:', file);
          this.imageUrl = URL.createObjectURL(file);
        }
      }
    });

app.mount('#app');
  </script>

<style>
    #app {
      width: 600px;
      margin: 20px auto;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .24);
      text-align: center;
      padding: 20px;
    }

.btn {
      display: inline-block;
      padding: 10px 20px;
      border: none;
      background-color: blue;
      color: white;
      cursor: pointer;
    }

.btn-primary {
      background-color: blue;
    }

strong {
      display: block;
      margin-top: 20px;
      margin-bottom: 10px;
    }

.drop-area {
      border: 2px dashed gray;
      padding: 20px;
      margin-top: 20px;
      cursor: pointer;
    }

.drop-area p {
      margin: 0;
    }

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

.highlight {
      border-color: blue;
    }
  </style>
</body>

</html>