<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upload File</title>
  <style>
    #drop-zone {
      width: 100%;
      max-width: 400px;
      padding: 50px;
      border: 2px dashed #888;
      text-align: center;
      margin: 100px auto 20px auto;
      font-family: sans-serif;
      cursor: pointer;
    }
    #drop-zone.hover {
      border-color: #333;
    }
    #submit-btn {
      display: block;
      margin: 0 auto;
      padding: 10px 20px;
    }
  </style>
</head>
<body>
  <div id="drop-zone">Click or Drag & Drop a file here</div>
  <button id="submit-btn" disabled>Submit</button>

  <script>
    let selectedFile = null;

    const dropZone = document.getElementById('drop-zone');
    const submitBtn = document.getElementById('submit-btn');

    // Click-to-select
    dropZone.addEventListener('click', () => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '*/*';
      input.onchange = () => {
        selectedFile = input.files[0];
        dropZone.textContent = `Selected: ${selectedFile.name}`;
        submitBtn.disabled = false;
      };
      input.click();
    });

    // Drag over
    dropZone.addEventListener('dragover', e => {
      e.preventDefault();
      dropZone.classList.add('hover');
    });

    dropZone.addEventListener('dragleave', () => {
      dropZone.classList.remove('hover');
    });

    // Drop file
    dropZone.addEventListener('drop', e => {
      e.preventDefault();
      dropZone.classList.remove('hover');
      if (e.dataTransfer.files.length > 0) {
        selectedFile = e.dataTransfer.files[0];
        dropZone.textContent = `Selected: ${selectedFile.name}`;
        submitBtn.disabled = false;
      }
    });

    // Submit file
    submitBtn.addEventListener('click', () => {
      if (!selectedFile) return alert('No file selected!');

      const formData = new FormData();
      formData.append('file', selectedFile);

      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(res => res.text())
      .then(msg => alert(msg))
      .catch(err => alert('Error: ' + err));
    });
  </script>﻿
﻿
 

﻿
﻿
﻿