Перетаскивание файла на тело документа запускает модально с Dropzone.js

Question

Я хочу продублировать поведение при загрузке изображений в Slack в моем приложении чата.

В настоящее время вы можете нажать кнопку в области, где вы вводите сообщение, и это вызывает модальный режим, где вы можете перетаскивать файлы с помощью Dropzone.js. Замечательно.

Тем не менее, я также хочу, чтобы вся страница (тело документа) также была зоной отбрасывания. Поэтому, когда вы перетаскиваете файл на экран, я хочу, чтобы ранее упомянутый модал всплывал с загруженным перетаскиваемым файлом.

Я попытался добавить это в нижней части страницы, но без игры в кости:

<script>
    //    Make whole page a dropzone for image uploads
    new Dropzone("#body", { // Make the whole body a dropzone
        url: "/upload/url", // Set the url
        previewsContainer: "#modal-image-uploads .modal-body #previews" // Define the container to display the previews
    });

    Dropzone.options.filedrop = {
        init: function () {
            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    $('body').append("<%= escape_javascript(render :partial => 'rooms/modals/image_uploads') %>");
                }
            });
        }
    };
</script>

Ошибка в консоли: Uncaught Error: Invalid previewsContainer опция предоставляется. Пожалуйста, предоставьте селектор CSS или простой HTML-элемент.

Вот как выглядит модал:

<div class="modal fade" id="modal-image-uploads" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Upload Image</h4>
            </div>

            <div class="modal-body">
                <div id="previews" class="dropzone-previews"></div>
                <form action="/file-upload"
                      class="dropzone"
                      id="my-awesome-dropzone"></form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>

        </div>
    </div>
</div>