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 ?