How do I get the normal photo?

Question

I'm using this library https://github.com/kirill3333/react-avatar

There is a method onBeforeFileLoad() in which the size of the image is checked. Later the selected photo will be saved in preview. My question is, how do I get the normal photo that the user has selected - that is, the photo that he has not yet cropped?

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Avatar from "react-avatar-edit";

const App = () => {
  const [preview, setPreview] = useState(null);
  const [src, setSrc] = useState("./example/einshtein.jpg");

  const onClose = () => {
    setPreview(null);
  };

  const onCrop = (preview) => {
    setPreview(preview);
  };

  const onBeforeFileLoad = (elem) => {
    if (elem.target.files[0].size > 71680) {
      alert("File is too big!");
      elem.target.value = "";
    } 
    else {
       // ToDo
       // get the normale photo
    }
  };
  return (
    <div>
      <Avatar
        width={390}
        height={295}
        onCrop={onCrop}
        onClose={onClose}
        onBeforeFileLoad={onBeforeFileLoad}
        src={src}
      />
      <img src={preview} alt="Preview" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

`elem.target.files[0]` contains the file selected by the user. You basically need this: https://stackoverflow.com/a/27165977/5734311 — Chris G, Apr 14 '21 at 07:43

score 1 · Accepted Answer · answered Apr 14 '21 at 07:51

Its in your "src" state.

According to documentation of the package you are using; onImageLoad(image) will return you the loaded image.

You can also use your onBeforeFileLoad function. And set it to a <img src={original}> element for example.

  const onBeforeFileLoad = (elem) => {
    ....
    else {
       setOriginal(elem.target.files[0])
    }

How do I get the normal photo?

1 Answers1