Esperemos que alguien pueda ayudar con esto.

Estamos usando la biblioteca Flow js para cargar archivos: https://www.npmjs.com/package/@flowjs/flow.js . Requisito:

1. Dentro de un Popover, cargue una imagen, la imagen debe cargarse en el servidor solo al hacer clic en el botón.
2. En el segundo escenario, dentro de un Popover, cargue una imagen y recorte la imagen y la imagen recortada debe cargarse en el servidor al hacer clic en el botón.

Hemos tratado

Escenario 1 :

Se agregó una entrada que acepta imágenes.

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

//onUpload: almacena la imagen en una variable de estado.

 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]); } };

¿Cómo es posible cargar este archivo en el servidor con un clic en el botón Enviar? ¿Hay alguna manera de que podamos activar los métodos flow.on al hacer clic en este botón de envío?

Escenario 2: igual que el anterior, se agrega la funcionalidad de recorte adicional. Para eso, use la biblioteca react-image-crop.

Usando esta biblioteca obtenemos la imagen recortada como un blob. Cómo cargar eso en el servidor con un clic en el botón Enviar.

Cualquier respuesta me ayudaría, gracias de antemano