If I upload a large image with e.g. 20 MB, it is not displayed in Firefox, but it works without any problems in other browsers such as Chrome, Brave, Edge or Opera. For smaller images with e.g. 5 MB, the image is displayed on Firefox.
Is there any way to fix this, or is this a general bug in Firefox?
One solution would be to use URL.createObjectURL(file), but I need the image content because I also send the image to my backend.
Is there a solution to use FileReader() with Firefox?
Alternatively, I would have to display the image via URL.createObjectURL(file) and get the content via FileReader().
Code:
window.addEventListener("load", () => { document.getElementById("error").addEventListener("change", e => { const reader = new FileReader() reader.addEventListener("load", () => { document.getElementById("error_img").src = reader.result }) reader.readAsDataURL(e.target.files[0]) }) document.getElementById("success").addEventListener("change", e => { document.getElementById("success_img").src = URL.createObjectURL(e.target.files[0]) })})div { display: grid; grid-template:"a b""c d";}img { display: block; object-fit: contain; width: 90%; height: 90%;}<div><label> Error<input type="file" id="error"></label><label> Works<input type="file" id="success"></label><img src="" alt="" id="error_img"><img src="" alt="" id="success_img"></div>