How to show selects field with each selected file in dropzone.js

Question

I am having a problem with my dropzone.js. when I select a file or files in the dropzone I want to show a select field with each file. see the dropzone in the below image. I have no idea about this how to figure out this, I have searched for this problem but I did not get an answer. thank for your help in advance

This is my form.

<form action="{{route('mediamanager.store')}}" class="dropzone dropzone-nk needsclick" id="my-awesome-dropzone" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
  <div>
    <i class="notika-icon notika-cloud"></i>
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
    <h2>Drop files here or click to upload.</h2>
  </div>
  </div>
  <br>
  <div class="text-center">
    <input type="button" class="btn-success submit-merge" id="merge_file" value="Merge and Upload as one file" style="padding:0.8em">

    <input type="button" class="btn-success submit-separate" id="separate_file" value="Save each file separatly">
  </div>
</form>

And this is my dropzone.js script.

<script>



Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,
    addRemoveLinks: true,
    acceptedFiles:'.pdf',

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        var input = 'Null';


        $(".submit-merge").click(function (e) 
        {
            e.preventDefault();
            e.stopPropagation();

            if (myDropzone.getQueuedFiles().length < 2) 
            { 
                $('.alert-danger').show();
                $('#error_msg').html("<i class='fas fa-exclamation-circle'></i> The merge files must be greater than one file");
                return false;
            }
            if($('#merge_name').val() == "")
            {
                $('.alert-danger').hide();
                $('.merge_name').show();
            }
            else
            {
                input = 'merge_file';
                myDropzone.processQueue();
            }
        });

        $(".submit-separate").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            input = 'separate_file';
            myDropzone.processQueue();

        }); 

        this.on('addedfile', function(file){
            var fileBox = $(file.previewElement).hide();

            setTimeout(function(){
                fileBox.fadeIn('fast');
            }, file.delay);
        });

        // $(".submit-separate").click(function (e) {
        this.on("sendingmultiple", function(file, xhr, formData) {
        //Add additional data to the upload
            formData.append(input, $('#'+input).val());
            formData.append("filesize", file.size);
        });

        this.on("success", function(file, responseText) {
            location.reload();
        });

        this.on("error", function(file, response) {
                // do stuff here.
            $('.alert-danger').show();
            $('#error_msg').html("<i class='fas fa-exclamation-circle'></i>"+ response);
        });

    }


}

</script>

Answer 1

Finally, I did it. when a file is added to dropzone they add inline-block div, in this div they add a class dz-preview so append your input to every last child. just add the below code to your dropzone script.

this.on("addedfile", function() 
{ 
  $(".dz-preview:last").append('<br> <select class="form-control" name="type[]"><option>Blueprint</option><option>Specbook</option><option>Proposal</option><option>Large color print</option></select> '); 
});