как отображать файлы с сервера на несколько Dropzone - PullRequest
Новая
       25

как отображать файлы с сервера на несколько Dropzone

0 голосов
/ 11 июля 2019

У меня две дропзоны на одной странице. Одна зона перетаскивания предназначена для показа изображений, а вторая зона перетаскивания - для показа видео. Изображения и видео загружаются. Но я хочу получить изображения и видео с сервера и показать их в Dropzone. Проблема заключается в том, что изображения и видео отображаются в одной зоне, т.е. в зоне изображения. Я хочу отображать изображения, проходящие через сервер в зоне сброса изображений, и видео, проходящие через сервер в зоне сброса видео. Вот HTML-код: 

<form action="{{route('test.store')}}" method="post" class="dropzone" id="dropzoneImages" type="multipart/form-data">                                                           @csrf                                                       </form> 

<form action="{{route('test.store')}}" method="post" class="dropzone" id="dropzoneVideos" type="multipart/form-data">                                                           @csrf                                                       </form>

Вот мой JS: 

var myDropzoneTheFirst = new Dropzone(

            '#dropzoneImages',{
            success: function (file, response) {
                console.log(response)
            },
            error: function (file, response) {
                return false;
            },
            init: function () {
                dropzone = this;
                Dropzone.autoDiscover = false;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/getImages',
                    type: 'post',
                    data: { request: 'fetch' },
                    dataType: 'json',
                    success: function (response) {

                        $.each(response, function (key, value) {
                            var mockFile = { name: value.name, size: value.size };
                            dropzone.emit("addedfile", mockFile);
                            dropzone.emit("thumbnail", mockFile, value.full_path);
                            dropzone.emit("complete", mockFile);

                        });

                    }
                });
            }
        });

    /* drop zone of Videos */
        var myDropzoneTheSecond = new Dropzone(

            '#dropzoneVideos',{
            success: function (file, response) {
                console.log(response)
            },
            error: function (file, response) {
                return false;
            },
            init: function () {
                dropzone = this;
                Dropzone.autoDiscover = false;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/getVideos',
                    type: 'post',
                    data: { request: 'fetch' },
                    dataType: 'json',
                    success: function (response) {

                        $.each(response, function (key, value) {
                            var mockFile = { name: value.name, size: value.size };
                            dropzone.emit("addedfile", mockFile);
                            dropzone.emit("thumbnail", mockFile, value.full_path);
                            dropzone.emit("complete", mockFile);

                        });

                    }
                });
            }
        });

Любая помощь будет весьма заметна

1 Ответ

0 голосов
/ 12 июля 2019

Попробуйте это?В основном переместите ajax request из init.Сделайте то же самое для 2-й Дропзоны. 

var myDropzoneTheFirst = new Dropzone(
    '#dropzoneImages',{
    success: function (file, response) {
        console.log(response)
    },
    error: function (file, response) {
        return false;
    },
    init: function () {
        Dropzone.autoDiscover = false;
    }
});

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: '/getImages',
    type: 'post',
    data: { request: 'fetch' },
    dataType: 'json',
    success: function (response) {

        $.each(response, function (key, value) {
            var mockFile = { name: value.name, size: value.size };
            myDropzoneTheFirst.emit("addedfile", mockFile);
            myDropzoneTheFirst.emit("thumbnail", mockFile, value.full_path);
            myDropzoneTheFirst.emit("complete", mockFile);

        });

    }
});
...