title: Dropzone in div instead of entire form
body: <p>I am following this guide to integrate dropzone into a form and submit my form with it</p>
  
  <p><a href="https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone" rel="nofollow noreferrer">https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone</a></p>
  
  <p>However, this is what I end up with</p>
  
  <p><a href="https://i.stack.imgur.com/uhRjM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uhRjM.png" alt="enter image description here"></a></p>
  
  <p>My categories input is located inside the dropzone area instead of outside. Same with my buttons. How can I make my dropzone only be located in a div instead of taking up the whole form?</p>
  
  <p>This is my dropzone configuration and form</p>
  
  <pre><code>@section scripts{
      &lt;script&gt;
          $(document).ready(function () {
             $(document).on("submit", "#form", function (e) {
                  e.preventDefault();
                  $.ajax({
                      url: "@Url.Action("Save", @ViewContext.RouteData.Values["controller"].ToString())",
                      method: "POST",
                      processData: false,
                      contentType: false,
                      success: function (result) {
                          console.log(result);
                      }
                  });
                  return false;
              });
          });
      &lt;/script&gt;
  }
  &lt;div class="col-sm-12"&gt;
      &lt;h2&gt;Upload&lt;/h2&gt;
      &lt;hr /&gt;
  &lt;/div&gt;
  @using (Html.BeginForm(null, null, FormMethod.Post,new { @class = "dropzone", enctype = "multipart/form-data", id = "form" }))
  {
      @Html.AntiForgeryToken()
      &lt;div class="col-sm-12"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(m =&gt; m.Categories)
                      @Html.DropDownListFor(m =&gt; m.Categories, (SelectList)Model.Categories, "", new { @class = "form-control col-sm-12" })
                      @Html.ValidationMessageFor(m =&gt; m.Categories)
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;div class="dropzone-previews form-group"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;hr /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="clearfix"&gt;
                          &lt;div class="pull-right"&gt;
                              &lt;input type="submit" id="submit" value="Save" class="btn btn-primary" /&gt;
                              @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;script&gt;
      Dropzone.options.form = {
          autoProcessQueue: false,
          uploadMultiple: true,
          parallelUploads: 100,
          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
              });
          }
      };
  &lt;/script&gt;
  </code></pre>