mdjfs / react-profile

React Profile Editor, crop, upload, apply filters and adjust colors for your avatar image. Optimize the image size for your application

Home Page:https://react-image-editor.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem with onDone property

herbertamaro2 opened this issue · comments

Amazing react component awesome, thanks so much, unfortunately the onDone doesn't work in here

`<ReactProfile src={file} modules={["filter", "crop"]} onDone={(editedImage) => handleEditedImage(editedImage)} />

const handleEditedImage = (exportObject) => {
const dataURL = exportObject.getDataURL();
console.log('newImageFromFeature', dataURL);
setNewImage(dataURL);
};`

Hi! How are you?

Do you have the entire component to check how you are using the library? What version are you using?

I tried to reproduce the error but without success. All working for me

Heey @mdjfs i'm good thanks !!
my code looks like this, neither the console.log in handleEditedImage is disparated.

`import React, { useState, useEffect } from 'react';
import ReactProfile, { ALL_FILTERS, EXPORT_OBJECT } from "react-profile";
import "react-profile/themes/default.min.css";

const ImageEditorComponent = ({ file, onChange }) => {
const [newImage, setNewImage] = useState(null);

useEffect(() => {
    console.log('newImage', newImage)
    onChange(newImage);
}, [newImage])

const handleEditedImage = (exportObject) => {
    const dataURL = exportObject.getDataURL();
    console.log('newImageFromFeature', dataURL);
    setNewImage(dataURL);
  };

return (
    <ReactProfile
        src={file}
        modules={["filter", "crop"]}
        onCancel={() => console.log('cancelou')}
        onDone={(editedImage:EXPORT_OBJECT) => handleEditedImage(editedImage)}
        language="es"
    />
);

};

export default ImageEditorComponent`

Hi. Tried to reproduce but all working. Here is my code:

Using react-profile@1.3.2

import ReactProfile from "react-profile";
import "react-profile/themes/default"

function App() {
  const [dataURL, setDataURL] = useState()
  const [file, setFile] = useState()

  const handleEditedImage = (exportObject) => {
    const dataURL = exportObject.getDataURL();
    console.log('newImageFromFeature', dataURL);
    setDataURL(dataURL)
    setFile(null)
  }

  const change = async (e) => {
    setFile(e.target.files[0])
  }

  if(file) {
    return <ReactProfile src={file} modules={["filter", "crop"]} onDone={(editedImage) => handleEditedImage(editedImage)} language="es" />
  }

  return (
    <div className="App">
      <input type="file" accept="image/jpeg;image/png" onChange={change} /> 
      <img src={dataURL} /> 
    </div>
  );
}

export default App;```

Thanks. I copied you code into that it's working now! Thanks !
I guess part of sintaxe code was incorrect.
thanks bro.. all working now!