Drag & Drop File Manager JavaScript, HTML, CSS

👤 Sharing: AI 
```html
<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop File Manager</title>
<style>
#drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

#file-list {
  margin-top: 20px;
}

#file-list ul {
  list-style-type: none;
  padding: 0;
}

#file-list li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

#file-list li:last-child {
  border-bottom: none;
}
</style>
</head>
<body>

<div id="drop-area">
  <p>Drag and drop files here or click to select</p>
  <input type="file" id="file-input" multiple style="display: none">
</div>

<div id="file-list">
  <ul></ul>
</div>

<script>
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const fileListContainer = document.getElementById('file-list').querySelector('ul');

// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)
  document.body.addEventListener(eventName, preventDefaults, false) //Prevent dropping files anywhere
});

function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}

// Highlight drop area when item is dragged over it
['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
});

['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
});

function highlight(e) {
  dropArea.classList.add('highlight')
}

function unhighlight(e) {
  dropArea.classList.remove('highlight')
}

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
  let dt = e.dataTransfer
  let files = dt.files

  handleFiles(files)
}

// Handle file input click
dropArea.addEventListener('click', () => {
  fileInput.click();
});

fileInput.addEventListener('change', () => {
  handleFiles(fileInput.files);
});

function handleFiles(files) {
  files = [...files] // Convert FileList to Array
  files.forEach(uploadFile)
}

function uploadFile(file) {
  const listItem = document.createElement('li');
  listItem.textContent = file.name + ' (' + formatBytes(file.size) + ')';
  fileListContainer.appendChild(listItem);

  // You would typically upload the file to a server here.
  // Example (using FormData - this part doesn't actually send anything):
  // const formData = new FormData();
  // formData.append('file', file);
  //
  // fetch('/upload', {  //Replace '/upload' with your server endpoint
  //   method: 'POST',
  //   body: formData
  // })
  // .then(response => {
  //   // Handle response
  //   console.log('Upload success:', response);
  // })
  // .catch(error => {
  //   console.error('Upload error:', error);
  // });

}

function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Bytes';

  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
</script>

</body>
</html>
```
👁️ Viewed: 8

Comments