Hopefully someone can help with this.

We are using Flow js library for file upload - https://www.npmjs.com/package/@flowjs/flow.js. Requirement:

1. Inside a Popover, upload an image, the image should be uploaded to the server only on button click.
2. In second scenario, inside a Popover, upload an image and crop the image and the cropped image should be uploaded to the server on button click.

We have tried

Scenario 1 :

Added an input which accepts images

<input className="inputfile" type="file" accept="image/\*" onChange={onUploadFile} />

//onUpload - storing the image in a state variable.

 const onUploadFile = (event: any) => {
    if (event.target.files && event.target.files.length > 0) {
      fileReader.addEventListener('load', () => setImage(fileReader.result));
      fileReader.readAsDataURL(event.target.files[0]);
    }
  };

How is it possible to upload this file to server on a submit button click. Is there any way we can trigger the flow.on methods on this submit button click.

Scenario 2 : Same as above, additional crop functionality is added. For that using react-image-crop library.

Using this library we get the crop image as a blob. How to upload that to server on a submit button click.

Any response would help me, Thanks in advance