The default error handler in dropzone.js is as follows and contains a default error implementation as below:
https://github.com/dropzone/dropzone/blob/main/src/options.js#L4
// Called whenever an error occurs
// Receives `file` and `message`
error(file, message) {
if (file.previewElement) {
file.previewElement.classList.add("dz-error");
if (typeof message !== "string" && message.error) {
message = message.error;
}
for (let node of file.previewElement.querySelectorAll(
"[data-dz-errormessage]"
)) {
node.textContent = message;
}
}
},
Unfortunately the above code has the undesirable behaviour where if the server returns a non 2xx response, the HTML of that response is displayed as an error, which is incomprehensible to end users and makes them panic.
How do I replace the above callback in such a way that the above code is removed completely at runtime?
The following does not work, most specifically a breakpoint on the code above is still hit, and the HTML error text is still present:
let dropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "/upload/url", // Set the url
previewsContainer: "#previews", // Define the container to display the previews
uploadMultiple: true,
autoProcessQueue: true
});
dropzone.on("error", (file, response, xhr) => {
console.log("An error has occurred: " + file + response + xhr.status + xhr.statusText);
});