Drag & Drop File Upload

u.php

<?php
$max_file_size = 5 * 1024 * 1024 * 10; // 50MB
$path = "💎/"; # "~/domain.tld/cool_files/uploads/"; // Upload Directory, outside of web access dir.
// $valid_formats = array("rar","zip","7z","pdf","xlsx","xls","docx","doc","txt");
// $valid_formats_server = array(
//   "application/pdf",
//   "application/octet-stream",
//   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
//   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
//   "application/msword",
//   "application/vnd.ms-excel",
//   "text/plain"
// );
// Prevent uploading from wrong file types (server secure).
// foreach ($_FILES['files']['type'] as $t => $tName) {
//   if(!in_array($_FILES['files']['type'][$t], $valid_formats_server)){
//     echo "wrong FILE TYPE";
//     return;
//   }
// }
// Loop $_FILES to exeicute all files
if(isset($_FILES['files'])){
  $count = count($_FILES['files']['tmp_name']);
  # Array ( [files] => Array ( [name] => tramp.gif [type] => image/gif [tmp_name] => /tmp/phpbgi0DR [error] => 0 [size] => 1313056 ) )
  for ($f = 0; $f < $count; $f++) {
    if ($_FILES['files']['error'][$f] == 4) {
      // Skip file if any error found
      continue;
    }
    if ($_FILES['files']['error'][$f] == 0) {
      $name = $_FILES['files']['name'][$f];
      if ($_FILES['files']['size'][$f] > $max_file_size) {
        // Skip large files
        echo $message[] = "$name is too large!";
        continue;
      }
      // elseif(!in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats)){
      //   // Skip invalid file formats
      //   echo $message[] = "$name is not a valid format";
      //   continue;
      // }
      else {
        // No error found! Move uploaded files
        $prefix = sha1_file($_FILES["files"]["tmp_name"][$f]) . "-" . microtime() . "-";
        move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$prefix.$name);
      }
    }
  }
}
header('Location: /home');
exit;

upload.js

document.body.ondragenter = document.body.ondragover = function () {
  document.body.classList.add('hover');
  return false;
};
document.body.ondragleave = document.body.ondragend = function () {
  document.body.classList.remove('hover');
  return false;
};
document.body.ondrop = function (event) {
  event.preventDefault();
  document.body.classList.remove('hover');

  const formData = new FormData();
  for (let i = 0; i < event.dataTransfer.files.length; i++) {
    console.log('Name:', event.dataTransfer.files[i].name);
    console.log('Size:', event.dataTransfer.files[i].size);
    console.log('Type:', event.dataTransfer.files[i].type);
    // Base64 Output
    // const reader = new FileReader();
    // reader.onload = (event) => {
    //   console.log('Data:', event.target.result);
    // };
    // reader.readAsDataURL(files[i]);
    formData.append("files[]", event.dataTransfer.files[i]);
  }

  const request = new XMLHttpRequest();
  request.open('POST', '/test', true);
  request.setRequestHeader("Content-Type", "multipart/form-data");
  request.send(formData);
}