Dropzone.js inside a Bootstrap modal break flow and styling

Question

I am using the Dropzone.js plugin (which function to send via ajax and drag and drop effect, files to server) the problem is that it's breaking all the form of the stream (which contains other basic fields as input text / password) already tried incapsular tags within divs, add maximum size for file upload area but nothing worked.

I am using only the JS and CSS provided by jquery, bootstrap and dropzone (and the shipping configuration).

I add the full sample project with this problem on Github

Scripts in tag Head

<link rel="stylesheet" href="library/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="library/dropzone/dropzone.css">
<link rel="stylesheet" href="assets/css/main.css">
<script defer src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script defer src="library/Bootstrap/js/bootstrap.min.js"></script>
<script defer src="library/dropzone/dropzone.js"></script>
<script defer src="assets/js/main.js"></script>

Bootstrap modal:

    <div class="modal fade" id="add-product-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title span7 text-center" id="myModalLabel">Add Product</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal dropzone" id="add-product-form" action="#" method="post">
                        <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
                        <div class="form-group">
                            <label for="input_email" class="control-label col-md-3">Your Email (login)</label>
                            <div class="col-md-9">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input_password" class="control-label col-md-3">Password</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
                            </div>
                        </div>
                        <div class="checkbox text-center">
                            <label><input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
                        </div>
                        <div class="form-group text-center">
                            <div class="col-md-6 col-md-offset-3">
                                <button type="reset" class="btn btn-danger">Reset</button>
                                <button type="submit" class="btn btn-info">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

The actual modal:

As it should be:

Answer 1

An easy solution is to use a div element inside the form to use as dropzone, here is how the modal-body would look like.

html:

<div class="modal-body">
  <form class="form-horizontal" id="add-product-form" action="#" method="post">
    <div id="myDropzone" class="dropzone"></div> <!-- This is the dropzone element -->
    <div class="form-group">
      <label for="input_email" class="control-label col-md-3">Your Email (login)</label>
      <div class="col-md-9">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="input_password" class="control-label col-md-3">Password</label>
      <div class="col-md-9">
        <input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
      </div>
    </div>
    <div class="checkbox text-center">
      <label>
        <input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
    </div>
    <div class="form-group text-center">
      <div class="col-md-6 col-md-offset-3">
        <button type="reset" class="btn btn-danger">Reset</button>
        <button type="submit" class="btn btn-info">Login</button>
      </div>
    </div>
  </form>
</div>

Then since you are using a div for your dropzone element you need to specify the url in the dropzone configuration:

js:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDropzone", { url: "#"});