0

I recently moved to Brave Browser and noticed a problem with the preview generation on dropzonejs (when the Brave's "shield" functionnality is on only).

When I inspect the generated element I see the src like this : src(unknown) and when I double-click it in the inspector, the src prop is empty.

I have a custom preview element that look like this :

<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>

the generated preview is supposed to be on the <img data-dz-thumbnail/> element.

I also have a custom addedFile event, but it doesn't affect the DOM, It just updates a counter to order multiple image and set a data-order to the .file-row element. I tried to comment my whole addedFile and it changed nothing

I made my preview based on the bootstrap example and the preview works great on the example. I also have a very similar configuration and code.

// 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++;
});

I can't see anything that could mess with the preview generation and it works great on others browsers.

Do any of you get this kind of problem with Brave ?

Etshy
  • 870
  • 7
  • 25
  • Do the shields report any issues? For instance, any attempts at _Device Recognition_ or _Ads/Trackers Blocked_? – Sampson Mar 30 '19 at 19:48
  • I don't use Brave anymore, as it's not that "faster" than chrome so i don't have the problem anymore. Do you mean in console or in a "shield specific console" (if there is one) ? I didn't see anything in console when i had the preview issue. – Etshy Apr 01 '19 at 08:07

0 Answers0