John Davidson

Message:

I am working on a feature which should allow users to "Drag and Drop" or "Browse" audio files and upload them to the server. The "Browse" part works fine and I can upload the files to the server using PHP. However, I cannot access files with the "drag and drop" feature.

So, how can I store the file name or file data in the the <input type="file" name="uploaded-file" id="uploadBTN" hidden /> section using the "drag and drop" functionality. I have attached my PHP, HTML, and JS snippets for the code.

<?php



session_start();

$_SESSION;



include("Config.php");

include("functions.php");





$user_data = check_login($pdo);





if ($_SERVER['REQUEST_METHOD'] === "POST") {



  function cleanSpecialCharacters($string)

  {

    $string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.

    return preg_replace('/[^A-Za-z0-9.-]/', "", $string); // Removes special chars.

  }



  //$rand = rand(10, 100);

  $streplaceFileName = cleanSpecialCharacters($_FILES['uploaded-file']['name']);

  //$audioFile = $rand . "-" . $streplaceFileName;

  $audioFile = $streplaceFileName;

  $ds = DIRECTORY_SEPARATOR;

  $storeFolder = 'audio/' . $_SESSION['user_name'];



  if (is_dir($storeFolder)) {

  } else {

    mkdir('audio/' . $_SESSION['user_name']);

  }



  if ((!empty($_FILES)) && !empty($_FILES['uploaded-file']['name'])) {

    // if (preg_match('/[.](mp3)|(mp4)$/', $_FILES['uploaded-file']['name'])) {

    //$filename = $rand . "-" . $streplaceFileName;

    $filename = $streplaceFileName;

    $tempFile = $_FILES['uploaded-file']['tmp_name'];

    $targetPath = $storeFolder . $ds;

    $targetFile = $targetPath . $filename;

    $_SESSION['file_name_audio'] = $targetFile;

    $check = move_uploaded_file($tempFile, $targetFile);

    if ($check)

    {

      $uploadMSG = "File Uploaded Successfully!";

      header("Location: upload-details.php");

    } 

    //}

  }

}





?>

<main class="container">

  <div>

    <form action="" class="w-100 pt-5" enctype="multipart/form-data" method="POST">

      <div class="uploadBox">

        <i class="fas fa-cloud-upload-alt"></i>

        <h2 class="text-center">Drag & Drop to Upload File</h2>

        <span class="text-center">OR</span>

        <label class="btn btn-outline-dark btn-lg" for="uploadBTN">&nbsp;&nbsp;Browse File&nbsp;&nbsp;</label>

        <input type="file" name="uploaded-file" id="uploadBTN" hidden />

      </div>

      <div class="tagsInput mt-3">

        <div class="form-div d-flex row justify-content-between">

          

        </div>

        <div class="form-div row d-flex justify-content-between mt-3">

          

          <input type="submit" name="Submit" class="btn pink-bg text-white mx-auto w-100 px-4 my-3" value="Upload Podcast">

        </div>

      </div>

    </form>

  </div>

</main>

const uploadBox = document.querySelector(".uploadBox"),

  uploadHeading = document.querySelector(".uploadBox h2"),

  uploadBtn = document.querySelector(".uploadBox label"),

  uploadSpan = document.querySelector(".uploadBox span"),

  uploadIcon = document.querySelector(".uploadBox i"),

  uploadInput = document.querySelector('.uploadBox input[type="file"]');

let file;



const uploadedActions = filename => {

  uploadBox.style.justifyContent = "center";

  uploadHeading.innerHTML = "Uploading!";

  uploadSpan.innerHTML = filename;

  uploadBtn.style.display = "none";

  uploadIcon.style.display = "none";

};



uploadBox.addEventListener("drop", e => {

    e.preventDefault();



    file = e.dataTransfer.files[0];

    let fileType = file.type;

    console.log(fileType.split("/")[0]);



    if (fileType.split("/")[0] === "audio") {

      uploadedActions(file.name);

      uploadInput.files[0] = file;

      let fileReader = new FileReader();

      fileReader.onload = function () {

        let fileURL = fileReader.result;

      };

      fileReader.readAsDataURL(file);

    } else {

      alert("This is not an audio file.");

      uploadBox.classList.remove("active");

    }

  });

---

My Answer:
In order to store the file name or file data in the input type file section using the drag and drop functionality, you can modify your JavaScript code as follows:

javascript
const uploadBox = document.querySelector(".uploadBox"),
uploadHeading = document.querySelector(".uploadBox h2"),
uploadBtn = document.querySelector(".uploadBox label"),
uploadSpan = document.querySelector(".uploadBox span"),
uploadIcon = document.querySelector(".uploadBox i"),
uploadInput = document.querySelector('.uploadBox input[type="file"]');
let file;

const uploadedActions = filename => {
uploadBox.style.justifyContent = "center";
uploadHeading.innerHTML = "Uploading!";
uploadSpan.innerHTML = filename;
uploadBtn.style.display = "none";
uploadIcon.style.display = "none";
};

uploadBox.addEventListener("drop", e => {
e.preventDefault();

file = e.dataTransfer.files[0];
let fileType = file.type;
console.log(fileType.split("/")[0]);

if (fileType.split("/")[0] === "audio") {
uploadedActions(file.name);
uploadInput.files = e.dataTransfer.files;
} else {
alert("This is not an audio file.");
uploadBox.classList.remove("active");
}
});


In this code snippet, when a file is dropped into the upload box, it checks if the file type is audio. If it is an audio file, it sets the file name in the upload box and assigns the file to the input type file element. This way, you can access the file data in the input type file element when using the drag and drop functionality.