Using Dropzone.js inside Bootstrap modal

Question

I use dropzone.js to upload files to the server. I included all the necessary js and css files and put the file upload form in the boot modal.

The problem that I am facing is that inside the modal window the file selection does not start as soon as I click on dropzone. I also cannot drag and drop the files I need.

I am using Laravel 4 . Any direction on this 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 Dropzone initialization issue may occur

try calling Dropzone on the click event of another element.

like -

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