title: from file upload to dropzone
body: <p>I'm using multi file upload with other fields in my project and I want to overhide the basic html file upload by dropzone, so I don't want to send files trough ajax, I just want to drop files, then fill the form and send files to server at the same time that ther fields (when user press "Send").</p>
  
  <p>Here is the working current form without dropzone that works perfectly:</p>
  
  <pre><code>&lt;form action="/Document/Document/Create" enctype="multipart/form-data" method="post"&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;hr&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div&gt;
                  &lt;input name="files" type="file" id="files" multiple&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="sourcePath"&gt;Source&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Source est requis." id="sourcePath" name="sourcePath" type="text" value=""&gt;
                  &lt;span class="field-validation-valid text-danger" data-valmsg-for="sourcePath" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="name"&gt;Nom&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Nom est requis." id="name" name="name" type="text" value=""&gt;
                  &lt;span class="field-validation-valid text-danger" data-valmsg-for="name" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="control-label col-md-2" for="reference"&gt;Référence&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Référence est requis." id="reference" name="reference" type="text" value=""&gt;
                  &lt;span class="field-validation-valid text-danger" data-valmsg-for="reference" data-valmsg-replace="true"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is what I've tried but it looks it doesn't work (no droppable zone, upload button still there)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dropzone" class="dropzone"&gt;
      &lt;div class="fallback"&gt;
          &lt;input name="files" type="file" id="files" multiple /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// DropZone
  Dropzone.options.dropzone = {
      paramName: "files", // The name that will be used to transfer the file
      maxFilesize: 10, // MB
      //uploadMultiple: true,
      autoProcessQueue: false,
      accept: function (file, done) {
          if (file.name == "justinbieber.jpg") {
              done("Naha, you don't.");
          }
          else { done(); }
      }
  };
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>thanks to melc, it looks great but no "files" are posted. here is the post content. There are more fields that in the example because example I gave is simpler</p>
  
  <pre><code>Request URL:http://localhost:28790/Document/Document/Create
  Request Headers
  Provisional headers are shown
  Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
  Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryA5AptmHYANCvKIsO
  Origin:http://localhost:28790
  Referer:http://localhost:28790/Document/Document/Create
  Upgrade-Insecure-Requests:1
  User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
  Request Payload
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="__RequestVerificationToken"
  
  W9DAH4P8rACAn6FeB2lh6uhrS1-h25xvhxp0C3q78tqnKzQuzvphoZEyTu46VniBpTzcQ89JxqKjxy9eoTayMjzSJMIjH-u0Fs0toxe4oy39K6-s6uOcM7dicZm8LefBpZMfUqOQwON8Z6rtmAt-8w2
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="sourcePath"
  
  fdgh
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="name"
  
  gfdhfd
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="reference"
  
  fdghdfrg
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="isActive"
  
  true
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="isActive"
  
  false
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="recyclingSpan"
  
  2
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="documentType.id"
  
  
  ------WebKitFormBoundaryA5AptmHYANCvKIsO
  Content-Disposition: form-data; name="trainer.id"
  
  
  ------WebKitFormBoundaryA5AptmHYANCvKIsO--
  </code></pre>
  
  <p>and here's the HTML generated:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;h2&gt;Create&lt;/h2&gt;
      &lt;form action="/Document/Document/Create" enctype="multipart/form-data" method="post" novalidate="novalidate"&gt;
          &lt;div class="form-horizontal"&gt;
              &lt;hr&gt;
              &lt;input name="__RequestVerificationToken" type="hidden" value="qvsqgYhMtW6Tc_Cn5st61PPI1jULgz6pMB9iGZS2FPTAyR8HPSDJII0x_Oj0nuTFHrlvwl2HDA3s4sllfOSVDMXFyUnsCeVjxruyGN5goirG73BmfqV6K868Ucj9DN5Tsbssisp-7iiHzSoYCmVQGw2"&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="sourcePath"&gt;Source&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Source est requis." id="sourcePath" name="sourcePath" type="text" value=""&gt;
                      &lt;span class="field-validation-valid text-danger" data-valmsg-for="sourcePath" data-valmsg-replace="true"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="name"&gt;Nom&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Nom est requis." id="name" name="name" type="text" value=""&gt;
                      &lt;span class="field-validation-valid text-danger" data-valmsg-for="name" data-valmsg-replace="true"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="reference"&gt;Référence&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Référence est requis." id="reference" name="reference" type="text" value=""&gt;
                      &lt;span class="field-validation-valid text-danger" data-valmsg-for="reference" data-valmsg-replace="true"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="isActive"&gt;Document actif?&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;div class="checkbox"&gt;
                          &lt;input class="check-box" data-val="true" data-val-required="Le champ Document actif? est requis." id="isActive" name="isActive" type="checkbox" value="true"&gt;
                          &lt;input name="isActive" type="hidden" value="false"&gt;
                          &lt;span class="field-validation-valid text-danger" data-valmsg-for="isActive" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="recyclingSpan"&gt;Délai de recyclage&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;input class="form-control text-box single-line" data-val="true" data-val-number="Le champ Délai de recyclage doit être un nombre." data-val-range="Le champ Délai de recyclage doit être compris entre 1 et 999." data-val-range-max="999" data-val-range-min="1" data-val-required="Le champ Délai de recyclage est requis." id="recyclingSpan" name="recyclingSpan" type="number" value="0"&gt;
                      &lt;span class="field-validation-valid text-danger" data-valmsg-for="recyclingSpan" data-valmsg-replace="true"&gt;&lt;/span&gt; Mois
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-md-2" for="documentType"&gt;Type de document&lt;/label&gt;
                  &lt;div class="col-md-10"&gt;
                      &lt;select class="form-control" data-val="true" data-val-number="Le champ id doit être un nombre." data-val-required="Le champ id est requis." id="documentType_id" name="documentType.id" style="display: none;"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="2"&gt;ypê de doc a supprimer&lt;/option&gt;
                          &lt;option value="3"&gt;Audit du TMB&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;div class="chosen-container chosen-container-single" style="width: 550px;" title="" id="documentType_id_chosen"&gt;&lt;a class="chosen-single chosen-default" tabindex="-1"&gt;&lt;span&gt;Select an Option&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;
                          &lt;div class="chosen-drop"&gt;
                              &lt;div class="chosen-search"&gt;
                                  &lt;input type="text" autocomplete="off"&gt;
                              &lt;/div&gt;
                              &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;span class="field-validation-valid text-danger" data-valmsg-for="documentType.id" data-valmsg-replace="true"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-offset-2 col-md-10"&gt;
                      &lt;input type="submit" value="Create" class="btn btn-default"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;div id="dropzone" class="dropzone dz-clickable" style="height:100px;margin-bottom: 30px"&gt;
  
          &lt;div class="dz-default dz-message"&gt;&lt;span&gt;Drop files here to upload&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;a href="/Document/Document"&gt;Retourner à la liste des éléments&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with js</p>
  
  <pre><code>// DropZone
  Dropzone.options.dropzone = {
      paramName: "files", // The name that will be used to transfer the file
      maxFilesize: 10, // MB
      //uploadMultiple: true,
      autoProcessQueue: false,
      url: "/file/post",
      accept: function (file, done) {
          if (file.name == "justinbieber.jpg") {
              done("Naha, you don't.");
          }
          else { done(); }
      }
  };
  
  $(document).ready(function () {
      // stuff
  });
  </code></pre>