HTML File input to Dropzone - development

HTML File input to Dropzone

I want to use dropzone as a file input of another form

Following is the code with <input type="file"> with some help from Dropzone.js and Stackoverflow:

<form class="form-horizontal" action="/details/store" method="post" enctype="multipart/form-data">
    
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="title" class="control-label col-lg-3 text-semibold">Title</label>
            <div class="col-lg-9 ">
                <input name="title" type="text" class="form-control" value="" required>

                @if ($errors->has('title'))
                  <span class="help-block"></span>
                @endif
            </div>
        </div>

        <div class="form-group col-lg-6">
            <label for="subtitle" class="control-label col-lg-3 text-semibold">Sub Title</label>
            <div class="col-lg-9">
                <input name="subtitle" type="text" class="form-control" value="">
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="description" class="control-label col-lg-1 text-semibold">Description</label>
            <div class="col-lg-11">
                <textarea name="description" class="form-control"></textarea>
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="images" class="control-label col-lg-1 text-semibold">Images</label>
            <div class="col-lg-9" style="margin-left:4em;">
                <span class="help-block text-semibold" style="color:blue">Accepted Formats: .jpg, .jpeg, .png, .gif</span>

<!-- Here is the file input I want to convert to dropzone -->
                <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>

                <span class="help-block">Accepted formats: png, jpg, gif</span>
                @if ($errors->has('images'))
                  <span class="help-block"></span>
                @endif
            </div>
        </div>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

I have tried different methods to use dropzone with div like:

<div action="#" id="dropzone" class="dropzone">
    <div class="fallback">
        <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>
    </div>
</div>

and JS

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

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 images. With normal input type="file" data was being recieved as needed…

I can’t understand the use of separate action="" in div and url:"" 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.

BTW, I am using PHP-Laravel for server side handling.

from Laravel Questions and Answers https://laravelquestions.com/html/html-file-input-to-dropzone/
via Lzo Media