<div id="drop-area">
  <p>Drag and drop files here</p>
  <input type="file" id="file-input" multiple hidden>
</div>#drop-area {
  width: 100%;
  height: 200px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;}
#drop-area:hover {
  background-color: #f0f0f0;}
#drop-area p {
  margin: 0;
  font-size: 16px;
  color: #666;
}const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
dropArea.addEventListener('click', () => fileInput.click());
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.style.backgroundColor = '#e0e0e0';});
dropArea.addEventListener('dragleave', () => {
  dropArea.style.backgroundColor = '';});
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.style.backgroundColor = '';
  const files = e.dataTransfer.files;
  handleFiles(files);});
fileInput.addEventListener('change', () => {
  const files = fileInput.files;
  handleFiles(files);});
function handleFiles(files) {
  // Handle the uploaded files here
  console.log(files);}