Using Dropzone image uploader as one item in long form

Question

I have a long form. I will not post it here because it is not in English.

Form element looks like this:

<form action="/ads/new" method="post" enctype="multipart/form-data">

and if I add

class="dropzone"

then WHOLE form becomes a box for drag and drop image uploading. Also, my

<input name="file" type="file" />

still has basic looks and functionality. I would like to have Dropzone image uploader "box" inside a form - is that possible? If it is, how can I make it so?

UPDATE:

I finally have working dropzone but uploaded files look weird.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Dropzone.autoDiscover = false;
	jQuery(document).ready(function() {

	  $("div#my-awesome-dropzone").dropzone({
	    url: "/file/post"
	  });

	});

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


<form action="" method="POST" class="form-horizontal" role="form">
  <div class="form-group"></div>

  <label for="name">Name :</label>
  <input type="text" name="name" id="input-title" class="form-control">

<br><br>

  <label for="description">Email:</label>
  <input type="text" name="description" id="input-description" class="form-control">
<br><br>
 <label for="File">File: </label>
 <br><br>
  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

<br><br>

  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
  
</form>

Updated Code With Insert into Database using php if you want

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


<form action="save2.php" method="POST" class="form-horizontal" role="form">
  <div class="form-group"></div>

  <label for="name">Name :</label>
  <input type="text" name="name" id="input-title" class="form-control">

<br><br>

  <label for="description">Email:</label>
  <input type="text" name="description" id="input-description" class="form-control">
<br><br>
 <label for="File">File: </label>
 <br><br>
  <div class="dropzone dropzone-previews" name="File" id="my-awesome-dropzone"></div>

<br><br>

  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>

</form>


 <script type="text/javascript">

Dropzone.autoDiscover = false;
  jQuery(document).ready(function() {

    $("div#my-awesome-dropzone").dropzone({
      url: "/file/post"
    });

  });


 </script>


<!-- Save Data using PHP -->

 <?php
if( isset($_POST['submit']) && isset($_POST['name']) && isset($_POST['email']) && !empty($_FILES)){

  $dbHost = 'localhost';
  $dbUsername = 'root';
  $dbPassword = '';
  $dbName = 'yourdbname';
  //connect with the database
  $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
  if($mysqli->connect_errno){

    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
  }


  $name = $_POST['name'];
  $email = $_POST['email'];

  $targetDir = "uploads/";
  $fileName = $_FILES['file']['name'];
  $targetFile = $targetDir.$fileName;
  if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
    //insert file information into db table
    $conn->query("INSERT INTO tbl_name (name,email,file_name, uploaded) VALUES('".$name."','".$email."','".$fileName."','".date("Y-m-d H:i:s")."')");
  }

}
else{

$error = "Fill All Details First !!";

if ( isset($_POST['submit']) && isset($error)) {  echo $error;  }

}
?>

Using Dropzone image uploader as one item in long form

Updated Code With Insert into Database using php if you want

Sign up