Using Dropzone.js inside Bootstrap modal

Question

I'm using dropzone.js to upload files to the server. I included all the necessary js and css files and have put the file upload form inside a bootstrap modal.

The problem I'm facing is that, inside the modal the file select window does not get triggered once I click on the dropzone. Nor am I able to drag and drop the required files.

I'm using Laravel 4. Any direction on this issue would be great! Thanks in advance.

This is my code:

<script type="text/javascript" src="{{ URL::asset('js/dropzone/dropzone-      3.8.4/downloads/dropzone.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('js/dropzone/dropzone-3.8.4/downloads/css/dropzone.css') }}">
<div id="fileToBeAdded">
    <div class="toBeAdded" data-type="file" style="">
        <button id="submit-all">Submit all files</button>
        <form action="{{ url('files/upload') }}" id="myDropzone" class="dropzone">
             <div class="fallback">
                 <input name="files[]" type="file" multiple />
             </div>
        </form>
    </div>
</div>

Answer 1

I hope the there might be some problem with initialization of Dropzone

try to trigger Dropzone on click event of some other element.

like --

$(document).on('click','#someelement',function(){
 var myDropzone = new Dropzone("form#formIdWhichULikeToTriggerWithDropzone", { url: 'file_upload_route'});
});