While trying to use croppie on file upload with React, I am seeing the following error on the browser:
Unhandled Rejection (Error): [object Event]
and following error on the console:
Uncaught (in promise)
The expected behaviour is clicking the image should trigger the file input click, which should allow us to browse through the image files and after that, we should open the modal (by show variable of state) and then display the image with croppie bound to it.
Following is the JSX code snippet in which I am trying to invoke the croppie code:
<div>
<img
src={currUser.display_img}
alt="profile_pic"
onClick={(e) => {
var fileInput = e.currentTarget.nextSibling;
fileInput.click(); // Invoke the file input click to open the browser file explorer
fileInput.onchange = () => {
this.setState({ show: true }); // Showing the modal to open the croppie bound image
var reader = new FileReader();
reader.onload = function (e) {
var result = e.target.result;
console.log(result);
try {
var vanilla = new Croppie( // Invoking croppie as per the documentation
document.getElementById("preview_img"),
{
viewport: { width: 100, height: 100 },
boundary: { width: 300, height: 300 },
showZoomer: false,
enableOrientation: true,
}
);
vanilla.bind({
url: result,
});
} catch (e) {
console.log(e);
}
};
reader.readAsDataURL(fileInput.files[0]);
};
}}
/>
<input type="file" className="d-none" accept="image/*" />
</div>
While trying to use croppie on file upload with React, I am seeing the following error on the browser: Unhandled Rejection (Error): [object Event] and following error on the console: Uncaught (in promise)
The expected behaviour is clicking the image should trigger the file input click, which should allow us to browse through the image files and after that, we should open the modal (by show variable of state) and then display the image with croppie bound to it.
Following is the JSX code snippet in which I am trying to invoke the croppie code: