import ReactImageFileToBase64 from "react-file-image-to-base64";

const ExampleWithMultipleFalse = () => {
  const [image, setImage] = useState({});

  const handleOnCompleted = files => {
    //GET THE FIRST AND ONLY FILE IN THE ARRAY WHICH IS AN OBJECT
    setImage(files[0]);
  };
  return (
    <div>
      <ReactImageFileToBase64 onCompleted={handleOnCompleted} />
    </div>
  );
};

const ExampleWithMultipleTrue = () => {
  const [images, setImages] = useState([]);

  const handleOnCompleted = files => {
    setImages(files);
  };
  return (
    <div>
      <ReactImageFileToBase64 multiple={true} onCompleted={handleOnCompleted} />
    </div>
  );
};

const ExampleWithPreferredText = () => {
  const [image, setImage] = useState([]);

  const handleOnCompleted = files => {
    setImage(files[0]);
  };

  return (
    <div>
      <ReactImageFileToBase64
        multiple={false} // MULTIPLE IS SET TO FALSE BY DEFAULT, SO FEEL FREE TO REMOVE THIS  CHUNK IF YOU WANT
        onCompleted={handleOnCompleted}
        preferredButtonText="Click Me !"
      />
    </div>
  );
};

const ExampleWithCustomButton = () => {
  const [images, setImages] = useState([]);

  const handleOnCompleted = files => {
    setImages(files);
  };

  //CREATE A CUSTOMISED BUTTON COMPONENT TO YOUR TASTE
  const CustomisedButton = ({triggerInput}) => {
    //A PROP IS RETURNED TO YOUR CUSTOMISED BUTTON NAMED -triggerInput
    //MAKE SURE YOU GET THE PROP AND ADD IT TO AN ONCLICK EVENT ON YOUR CUSTOMISED BUTTON
    //triggerInput PROP OPENS UP POP OF DEVICE TO SELECT IMAGE
    return (
      <div>
        <button onClick={triggerInput}>Upload an Image</button>
      </div>
    );
  };
  return (
    <div>
      <ReactImageFileToBase64
        onCompleted={handleOnCompleted}
        CustomisedButton={CustomisedButton}
        multiple={true}
      />
    </div>
  );
};

[
  {
    base64_file: "THE_BASE64_FILE"
    default_file: "THE_ORIGINAL_FILE"
    file_name: "NAME_OF_FILE.jpeg"
    file_size: "SIZE_OF_FILE KB"
    file_type: "FILE_TYPE image/jpeg"
    last_modified: "LAST_MODIFIED_DATE_OF_FILE 2022-02-17T21:01:30+01:00"
  }
]