Trying to get dropzone.js to work with PHP?

JavaScript
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.

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:

5

Thanks for checking it out @camperextraordinaire :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).