Dropzone form validation

Question

I am creating a drop zone form using dropzone.js. When the form submits empty the form fails by submitting to an empty ULR. How can I revalidate the form to check fields are not empty?

This is my code. Thanks for all the help.

HTML CODE (index.php)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<head>   
<link href="../CSS/dropzone.css" type="text/css" rel="stylesheet" />
</head>

<body>

<form id="uploader" class="dropzone" action="upload.php"><BR>    <BR> 
  <div class="dropzone-previews"></div><BR><BR> <!-- this is were the previews should be shown. -->
 <div id="previews" class="dropzone-previews"></div>
  <!-- Now setup your input fields -->
  <input type="email" name="username" />
  <input type="password" name="password" />
  <input type="hidden" name="additionaldata" value="1" />

  <button type="submit">Submit data and files!</button>
</form>



</body>
</html>

upload.php

<?php
$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = '../upload_test/uploads';   //2

if (!empty($_FILES)) {


 $tempFile = $_FILES['file']['tmp_name'];          //3             

 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

 $targetFile =  $targetPath. $_FILES['file']['name'];  //5


$allowed =  array('gif','png' ,'jpg');
$filename = $_FILES['file']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$allowed) ) {
echo 'error';


move_uploaded_file($tempFile,$targetFile); //6

}
?>  
NEW JS custom.dropzone.js which seems to break the upload.php function

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form               element

  // The configuration we've talked about above
  autoProcessQueue: false,
  parallelUploads: 3,
  maxFiles: 3,
  previewsContainer: ".dropzone-previews",

  accept: function(file, done) {
    console.log("uploaded");
    done();
   },

  init: function() {
  this.on("maxfilesexceeded", function(file){
    alert("No more files please!");
  });
},

// The setting up of the dropzone
init: function() {
  var myDropzone = this;

  // First change the button to actually tell Dropzone to process the queue.
  this.element.querySelector("button[type=submit]").addEventListener("click",   function(e) {
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();
    myDropzone.processQueue();
   });

   // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
   // of the sending event because uploadMultiple is set to true.
   this.on("sendingmultiple", function() {
  // Gets triggered when the form is actually being sent.
  // Hide the success button or the complete form.
   });
   this.on("successmultiple", function(files, response) {
  // Gets triggered when the files have successfully been sent.
  // Redirect user or notify of success.
  });
  this.on("errormultiple", function(files, response) {
  // Gets triggered when there was an error sending the files.
  // Maybe show form again, and notify user of error
  });
 }

}

Barbarossa · Accepted Answer · 2014-08-05T14:22:40.147

I ran into a similar problem today. In my case the Form was build with Zend Form Builder (doing all the validation,...) to make it short (at least as short as possible):

i changed the existing fileuploadfield of my form to a standard text input field (might even be hidden) - as a required field.
Added dropzone above the form, created the required PHP Action which does nothing but move the files from php-tmp folder to my own tmp folder (project specific) and then returns the new path/filename as json
in js I added a "on succes" function to my dropzone which takes the json result and appends it to the content of my input field (from 1)
The Action of my actual form takes those paths does some other stuff (like generating user folders,...) and moves those files (uploaded via dropzone) into those new folders.

Hope i could help at least a bit ;)

This is the method I'm using for ZF2 and dropzone - it seems overly complex but works (well still need to handle deleting the file after I delete the doctrine entity) — dan2k3k4, Aug 05 '14 at 14:30

score 1 · Answer 2 · answered Jan 10 '14 at 15:54

Dropzone.js is an asynchronous framework. if you use this kind of script, you must use it thinking this way.

You can use JQUERY ( library of AJAX). With Jquery you can verify your value in your checkfield and send you picture on server at the same time.

Hope it helps you

Dropzone form validation

2 Answers2

Linked