title: HTML File input to Dropzone
body: <p>I want to use dropzone <strong>as a file input</strong> of another form</p>
  
  <p>Following is the code with <code>&lt;input type="file"&gt;</code> with some help from <a href="http://www.dropzonejs.com/" rel="nofollow noreferrer">Dropzone.js</a> and <a href="https://stackoverflow.com/questions/tagged/dropzone.js">Stackoverflow</a>:</p>
  
  <pre><code>&lt;form class="form-horizontal" action="/details/store" method="post" enctype="multipart/form-data"&gt;
      {{ csrf_field() }}
      &lt;div class="row"&gt;
          &lt;div class="form-group col-lg-6"&gt;
              &lt;label for="title" class="control-label col-lg-3 text-semibold"&gt;Title&lt;/label&gt;
              &lt;div class="col-lg-9 {{ $errors-&gt;has('title') ? 'has-error' : '' }}"&gt;
                  &lt;input name="title" type="text" class="form-control" value="{{ old('title') }}" required&gt;
  
                  @if ($errors-&gt;has('title'))
                    &lt;span class="help-block"&gt;{{ $errors-&gt;first('title') }}&lt;/span&gt;
                  @endif
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group col-lg-6"&gt;
              &lt;label for="subtitle" class="control-label col-lg-3 text-semibold"&gt;Sub Title&lt;/label&gt;
              &lt;div class="col-lg-9"&gt;
                  &lt;input name="subtitle" type="text" class="form-control" value="{{ old('subtitle') }}"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group col-lg-12"&gt;
              &lt;label for="description" class="control-label col-lg-1 text-semibold"&gt;Description&lt;/label&gt;
              &lt;div class="col-lg-11"&gt;
                  &lt;textarea name="description" class="form-control"&gt;{{ old('description') }}&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group col-lg-12"&gt;
              &lt;label for="images" class="control-label col-lg-1 text-semibold"&gt;Images&lt;/label&gt;
              &lt;div class="col-lg-9" style="margin-left:4em;"&gt;
                  &lt;span class="help-block text-semibold" style="color:blue"&gt;Accepted Formats: .jpg, .jpeg, .png, .gif&lt;/span&gt;
  
  &lt;!-- Here is the file input I want to convert to dropzone --&gt;
                  &lt;input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple&gt;
  
                  &lt;span class="help-block"&gt;Accepted formats: png, jpg, gif&lt;/span&gt;
                  @if ($errors-&gt;has('images'))
                    &lt;span class="help-block"&gt;{{ $errors-&gt;first('images') }}&lt;/span&gt;
                  @endif
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="text-center"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Create&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have tried different methods to use dropzone with div like:</p>
  
  <pre><code>&lt;div action="#" id="dropzone" class="dropzone"&gt;
      &lt;div class="fallback"&gt;
          &lt;input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <strong>JS</strong></p>
  
  <pre><code>Dropzone.options.dropzone = {
    url: "/properties/store",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    autoProcessQueue:false,
    uploadMultiple:true,
    paramName:"images",
    maxFilesize:1,
    maxFiles:10,
    addRemoveLinks:true,
    acceptedFiles: ".jpeg,.jpg,.png,.gif",
  };
  </code></pre>
  
  <p>Dropzone is being shown inside the form and it is even loading (and removing) images as well, but when I submit the form, nothing recieved on the server side as <strong>images</strong>. With normal <code>input type="file"</code> data was being recieved as needed...</p>
  
  <p>I can't understand the use of separate <code>action=""</code> in div and <code>url:""</code> in JS, as I don't need separate URL for files. I want to submit it along with the form using form's action route. </p>
  
  <p>BTW, I am using PHP-Laravel for server side handling.</p>