Trying to get dropzone.js to work with PHP?

Trying to get dropzone.js to work with PHP?
0

#1

Hi :slight_smile:

Wondering if anyone has used dropzone.js here… I’m trying to get it to work (i.e. successfully insert the file information into the database) but this error is stopping me when I hit the submit button:

Notice: Undefined index: myFile in C:\xampp...............\upload.php on line 8 as well as my error “Format not allowed!

Or if possible, could you suggest a better “dropzone” (opensource) that’s more popular so that you can easily find support on it?

Here’s the code (html):

<form action='upload.php' class="dropzone" id="videoDropzone" name="videoDropzone" method="post" enctype="multipart/form-data">
	 <p class="dz-message">Drop video here to upload</p>
	<select form="videoDropzone" name="saveTo" class="saveTo" required>
		<option value="public">Public (everyone)</option>
		<option value="private">Private (just me)</option>
		<option value="scheduled">Scheduled</option>
		<option value="unlisted">Unlisted</option>
	</select>
	<button type="submit" name="videoDropzoneSubmit" id="videoDropzoneSubmit">Save</button>
</form>

And following is the config:

Dropzone.options.videoDropzone = {
  paramName: "myFile", // The name that will be used to transfer the file
  maxFilesize: 500, // MB
  maxFiles: 4,
  acceptedFiles: ".mp4, .jpg",
  addRemoveLinks: true,
  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  init: function() {
    var submitButton = document.querySelector("#videoDropzoneSubmit")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

  }

};

This is the complete upload.php file:

<?php
session_start();
include_once 'inc/dbh.inc.php';
$id = $_SESSION['id'];

if (isset($_POST['videoDropzoneSubmit'])) {

	$file = $_FILES['myFile'];

	$fileName = $_FILES['myFile']['name'];
	$fileTmpName = $_FILES['myFile']['tmp_name'];
	$fileSize = $_FILES['myFile']['size'];
	$fileType = $_FILES['myFile']['type'];
	$fileError = $_FILES['myFile']['error'];

	$fileExt = explode('.', $fileName);
	$fileActualExt = strtolower(end($fileExt));

	$allowed = array('mp4', 'jpg');

	if (in_array($fileActualExt, $allowed)) {
		if ($fileError === 0) {
			if ($fileSize < 500000000) { // 500 MB
				$fileNameNew = "video".$id.".".$fileActualExt;
				$fileDestination = 'uploads/'.$fileNameNew;
				move_uploaded_file($fileTmpName, $fileDestination);
				$sql = "INSERT INTO uploads VALUES (null, '$id', '$fileNameNew', '$fileType', '$fileSize')";
				$result = mysqli_query($conn, $sql);
				header("Location:test.php?uploadsuccess");
			} else {
				echo "File too large!";
			}
		} else {
			echo "Error uploading your file!";
		}
	} else {
		echo "Format not allowed!";
	}

} else {
	header("Location: test.php");
}

Note that the same upload code works with my other projects (without dropzone). I can’t find the proper documentation for these sorts of errors.


#2

Try changing your HTML to:

<form action='file-upload.php' class="dropzone" id="videoDropzone" name="videoDropzone" method="post" enctype="multipart/form-data">
    <p class="dz-message">Drop video here to upload</p>    
    <select name="saveTo" class="saveTo" required>
        <option value="public">Public (everyone)</option>
        <option value="private">Private (just me)</option>
        <option value="scheduled">Scheduled</option>
        <option value="unlisted">Unlisted</option>
    </select>
    <button type="submit" name="videoDropzoneSubmit" id="videoDropzoneSubmit">Save</button>
</form>

and your JavaScript to:

Dropzone.options.videoDropzone = {
    paramName: "myFile", // The name that will be used to transfer the file
    maxFilesize: 1000, // MB
    maxFiles: 4,
    acceptedFiles: ".mp4",
    addRemoveLinks: true,
    // Prevents Dropzone from uploading dropped files immediately
    autoProcessQueue: false,
    init: function() {
        var submitButton = document.querySelector("#videoDropzoneSubmit")
        myDropzone = this; // closure
        
        submitButton.addEventListener("click", function() {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });     
    }
};

#3

If I place the select and button elements inside the form, I get a different error (PHP says that there’s no such index as “myFile”).
According to the dropzone.js documentation, the form should be a standalone element, and unless you configure it differently the other elements should stay out of the form.
I don’t know if there’s perhaps another dropzone script I could use…There isn’t much support on this one unfortunately. Have you come across a dropzone like YouTube’s video-upload page by any chance? :slight_smile:


#4

I will post the exact code I used and it seemed to work fine. Keep in mind, I have no idea what your upload.php file looks like, so I can not comment on why you are getting that PHP error.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
</head>
<body>
    <form action='file-upload.php' class="dropzone" id="videoDropzone" name="videoDropzone" method="post" enctype="multipart/form-data">
        <p class="dz-message">Drop video here to upload</p>
        <select name="saveTo" class="saveTo" required>
            <option value="public">Public (everyone)</option>
            <option value="private">Private (just me)</option>
            <option value="scheduled">Scheduled</option>
            <option value="unlisted">Unlisted</option>
        </select>
        <button type="submit" name="videoDropzoneSubmit" id="videoDropzoneSubmit">Save</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
    <script>
    Dropzone.options.videoDropzone = {
        paramName: "myFile", // The name that will be used to transfer the file
        maxFilesize: 10, // MB
        maxFiles: 4,
        acceptedFiles: ".jpg,.jpeg",
        addRemoveLinks: true,
        // Prevents Dropzone from uploading dropped files immediately
        autoProcessQueue: false,
        init: function() {
            var submitButton = document.querySelector("#videoDropzoneSubmit")
            myDropzone = this; // closure
            
            submitButton.addEventListener("click", function() {
                myDropzone.processQueue(); // Tell Dropzone to process all queued files.
            });  
        }
    };
</script>
</body>
</html>

When I click Save button, it appears to work (I see no errors in the console). My generic php file loaded with no errors.


#5

Thanks for checking it out @RandellDawson :slight_smile:

Okay, I edited my local files to match yours. Now I find the PHP error, myFile index does not exist. I posted the PHP counterpart if that would be the problem. (see edited question)

The same PHP works if I try uploading via a normal <input type='file'> field. So I think it’s got to do with the dropzone configuration, on which I can’t seem to find any documentation (re the server-uploading part of it).