How to create php multiple file zone upload?

Question

I have on my website upload.php file please I want to use this script on my server which controls the upload of files to the server and can only upload one file.

Now I would like to do a multiple file upload with a drop zone just like here: Multiple file Upload

As far as I know, I can set up a javascript and html form, but I don't know how to modify my upload.php file, which controls the upload of files to the server. Please see below is my upload.php file that controls the upload of one file how to modify it so that multiple files can be uploaded at once with the script whose link I left above:

<?php
$error_message = "";
$success_message = "";
if (IS_POST()) {
    if ($_FILES['upload']) {
        $name = $_FILES['upload']['name'];
        $size = $_FILES['upload']['size'];

        $type = getFileTypeText($_FILES['upload']['type']);
        $ext = pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION);

        $user = getUserFromSession();
        $userId = $user->id;

        if (!file_exists(ABSPATH . '/content/uploads/'.$userId.'/'.$name)) {

        $acceptedExt = ['srt', 'ass', 'sub', 'sbv', 'vtt', 'stl'];
        if (in_array($ext, $acceptedExt)) {
            $db_name = GET_GUID() . "." . $ext;
            $file_name_db = ABSPATH . '/content/uploads/' . $userId . '/' . $name;
            $description = isset($_POST["description"]) && $_POST["description"] != '' ? $_POST["description"] : $name;
            if ($size > 0) {
                move_uploaded_file($_FILES['upload']['tmp_name'], $file_name_db);
                chmod($file_name_db, 0666);
                $id = db_insertUploadDetails($name, $description, $size, $userId, $ext, $name);
                if ($id > 0) {
                    $success_message = "Uploaded successfully.";
                    echo "<script>location.href='list.php';</script>";
                }
            } else {
                $error_message = "Not a valid file.";
            }
        } else {
            $error_message = "Please upload only srt, ass, sub, sbv, vtt, stl";
        }
        }else{
            $error_message="File Already Exists";
        }
    }
}

arun s r · Answer 1 · 2022-01-24T21:48:48.937

So your point is like ,you want to upload multiple files in series right.Use ajax to send it one after another and this will work.No need of any edits.

<!DOCTYPE html>
<html>
 
<head>
  <title>Drag and drop Multiple files</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
 
<body>
  <div class="container">
    <h3>Drag and drop multiple file upload </h3><br />
    <div id="drop_file_area">
      Drag and Drop Files Here
    </div>
    <div id="uploaded_file"></div>
  </div>
</body>
 
</html>

Use some css to tidy up the things. ajax will be like this


<script>
  $(document).ready(function () {
    $("html").on("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $("html").on("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $('#drop_file_area').on('dragover', function () {
      $(this).addClass('drag_over');
      return false;
    });

    $('#drop_file_area').on('dragleave', function () {
      $(this).removeClass('drag_over');
      return false;
    });

    $('#drop_file_area').on('drop', function (e) {
      e.preventDefault();
      $(this).removeClass('drag_over');
      var formData = new FormData();
      var files = e.originalEvent.dataTransfer.files;
      for (var i = 0; i < files.length; i++) {
        formData.append('file[]', files[i]);
      }
      uploadFormData(formData);
    });

    function uploadFormData(form_data) {
      $.ajax({
        url: "upload.php",
        method: "POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
          $('#uploaded_file').append(data);
        }
      });
    }
  });
</script>

this will be the upload.php .db_config will be your db connect file

<?php
// Include the database connection file
include('db_config.php');
$fileData = '';
if(isset($_FILES['file']['name'][0]))
{
  foreach($_FILES['file']['name'] as $keys => $values)
  {
    $fileName = $_FILES['file']['name'][$keys];
    if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $values))
    {
      $fileData .= '<img src="uploads/'.$values.'" class="thumbnail" />';
      $query = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
      mysqli_query($con, $query);
    }
  }
}
echo $fileData;
?>

sanitizing the data is upto you.This is just an example

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Jan 24 '22 at 21:37

How to create php multiple file zone upload?

1 Answers1