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.

score 2 · Answer 1 · answered Oct 01 '17 at 10:21

You can use dropzone class to div

 <form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

In js you can

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}

Ref: Integrating dropzone.js into existing html form with other fields

Something has improved. That is a good sign. Now, the only error says 'Dropzone is not defined'. — Kira, Oct 01 '17 at 10:31

RïshïKêsh Kümar · Accepted Answer · 2017-10-01T11:16:25.177

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;  }

}
?>

you can also upload and store in database this using php easily, i updated the wait. — RïshïKêsh Kümar, Oct 01 '17 at 11:12
I have updated my post as well. Do you maybe know why I get [object Object] and server error 419? — Kira, Oct 01 '17 at 11:15
@KiraArik Can You Check this ans , https://stackoverflow.com/questions/44868884/show-errors-when-uploading-photo-with-dropzone — RïshïKêsh Kümar, Oct 01 '17 at 11:24
I have read all thread but this is about error 400, and mine is 419 — Kira, Oct 01 '17 at 11:57
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. — Jay Blanchard, Oct 03 '17 at 12:54

Using Dropzone image uploader as one item in long form

2 Answers2

Updated Code With Insert into Database using php if you want