Dropzonejs в Brave Browser - предварительный просмотр данных не работает - PullRequest
Новая
       21

Dropzonejs в Brave Browser - предварительный просмотр данных не работает

0 голосов
/ 13 марта 2019

Недавно я перешел в Brave Browser и заметил проблему с генерацией предварительного просмотра в dropzonejs (когда включена только функция «щит» у Brave).

Когда я проверяю сгенерированный элемент, я вижу src следующим образом: src(unknown), и когда я дважды щелкаю его в инспекторе, src prop пуст.

У меня есть элемент предварительного просмотра, который выглядит следующим образом: 

<div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail/></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div class="file-upload-progress">
        <div class="ui progress active inverted hide file-progress">
            <div class="bar" data-dz-uploadprogress>
                <div class="progress"></div>
            </div>
            <div class="label">some default label</div>
        </div>
    </div>
    <div>
        <p class="size" data-dz-size></p>
    </div>
    <div class="file-actions">
        <button class="ui button green start">
            <i class="ui icon upload"></i>
            <span>start upload</span>
        </button>
        <button data-dz-remove class="ui button orange cancel">
            <i class="ui icon close circle"></i>
            <span>cancel upload</span>
        </button>
    </div>
</div>

Предполагается, что сгенерированный предварительный просмотр будет выполнен на элементе <img data-dz-thumbnail/>.

У меня также есть пользовательское событие addedFile, но оно не влияет на DOM, оно просто обновляет счетчик, чтобы упорядочить несколько изображений, и устанавливает data-order для элемента .file-row. Я пытался прокомментировать весь мой addedFile, и он ничего не изменил

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

// Get the template HTML and remove it from the document
let previewNode = document.querySelector("#template");
previewNode.id = "";
let previewTemplate = previewNode.parentNode.innerHTML;
let loadExistingImages;
previewNode.parentNode.removeChild(previewNode);

let myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: url, // Set the url
    thumbnailWidth: 150,
    thumbnailHeight: 80,
    acceptedFiles: "image/jpeg,image/png",
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    //clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
    if(file.id) {
        $(file.previewTemplate).remove();
        file.previewTemplate = $("[data-old-order="+file.id+"]")[0];
        file.status = Dropzone.SUCCESS;
        myDropzone.files.push(file);
    } else {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        $(file.previewElement).data("order", fileOrder);
        $(file.previewTemplate).find('.file-progress').progress({
            percent: 0,
            text: {
                active: uploadingText,
                success: uploadSuccessText,
                error: uploadFailedText
            }
        });
    }
    fileOrder++;
});

Я не вижу ничего, что могло бы помешать генерации предварительного просмотра, и оно прекрасно работает в других браузерах.

Кто-нибудь из вас сталкивался с такими проблемами с Храбрым?

...