image.beforeUpload has no access to context state when used with React?

[kirasiris]

Expected behavior.

I'm trying to append some parameters(coming from the auth object) to the image.beforeUpload event, whatsoever it reads them as undefined or null even tho the object is not empty at all.

Actual behavior.

The values are returned undefined or null

Steps to reproduce the problem.

events: {
  "image.beforeUpload": async function (images) {
    console.log("Auth from beforeUpload event", auth);
    const data = new FormData();
    data.append("userId", auth?.user?._id);
    data.append("username", auth?.user?.username);
    data.append("userEmail", auth?.user?.email);
    data.append("onModel", onModel);
    data.append("file", images[0]);
    await axios.put(
        `http://localhost:5000/api/v1/uploads/uploadObject`,
        data,
        {
            headers: {
                accept: "application/json",
                Authorization: `Bearer ${auth.token}`,
                "Content-Type": `multipart/form-data; boundary=${data._boundary}`,
            },
        }
    );
},

Editor version.

Froala editor: 4.1.2 react-froala-wysiwyg: 4.1.2

OS.

Windows 10 Home, 10.0.19045

Browser.

Chrome, 116.0.5845.188