How to display a image selected from input type = file in reactJS

Question

I'm trying to display a image selected from my computer in my web app. I referred the following question which addresses the question i'm trying to fix.

How to display selected image without sending data to server?

I have my html part like this

 <div className="add_grp_image_div margin_bottom">
      <img src={img_upload} className="add_grp_image"/>
      <input type="file" className="filetype" id="group_image"/>
      <span className="small_font to_middle">Add group image</span>
      <img id="target"/>
 </div>

I want to display the selected image in

<img id="target"/>

How can i do this?

I referred FileReader docs as well.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Giang Le · Accepted Answer · 2018-12-13T13:55:47.917

68

Try this

<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>

Add method to class

onImageChange = (event) => {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (e) => {
      this.setState({image: e.target.result});
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

or you can use URL.createObjectURL

onImageChange = (event) => {
 if (event.target.files && event.target.files[0]) {
   this.setState({
     image: URL.createObjectURL(event.target.files[0])
   });
 }
}

And display image

<img id="target" src={this.state.image}/>

edited Dec 13 '18 at 13:55

answered May 16 '17 at 04:44

Giang Le

4,160
1
19
20

1

i get this error. Uncaught TypeError: Cannot read property 'image' of null – CraZyDroiD May 16 '17 at 04:52
Thanks.Your solution helped!! – CraZyDroiD May 16 '17 at 05:45
URL.createObjectURL worked for me! – jefelewis Mar 18 '21 at 23:02

score 1 · Answer 2 · answered Nov 05 '19 at 16:03

hope it works for you

            <form onSubmit={form => submitForm(form)}>
              <input
                accept="image/*"
                onChange={onImageChange}
                className={classes.inputImage}
                id="contained-button-file"
                multiple
                name="image"
                type="file"
              />
              <label htmlFor="contained-button-file">
                <IconButton component="span">
                  <Avatar
                    src={mydata.imagePreview}
                    style={{
                      margin: "10px",
                      width: "200px",
                      height: "200px"
                    }}
                  />
                </IconButton>
              </label>
              <Button
                type="submit"
                variant="outlined"
                className={classes.button}
              >
                Default
              </Button>
            </form>

onImageChange

  const onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let reader = new FileReader();
      let file = event.target.files[0];
      reader.onloadend = () => {
        setData({
          ...mydata,
          imagePreview: reader.result,
          file: file
        });
      };
      reader.readAsDataURL(file);
    }
  };

submitForm

  const submitForm = form => {
    form.preventDefault();
    const formData = new FormData();
    formData.append("image", mydata.file);
    // for (var pair of formData.entries()) {
    //   console.log(pair[1]);
    // }
    const config = {
      headers: {
        "content-type": "multipart/form-data"
      }
    };
    axios
      .post("api/profile/upload", formData, config)
      .then(response => {
        alert("The file is successfully uploaded");
      })
      .catch(error => {});
  };

score 1 · Answer 3 · answered Sep 27 '20 at 14:45

Recently I came across needing a similar feature. Here is my implementation using hooks.

export default function App() {
  const [image, setImage] = React.useState("");
  const imageRef = React.useRef(null);

  function useDisplayImage() {
    const [result, setResult] = React.useState("");

    function uploader(e) {
      const imageFile = e.target.files[0];

      const reader = new FileReader();
      reader.addEventListener("load", (e) => {
        setResult(e.target.result);
      });

      reader.readAsDataURL(imageFile);
    }

    return { result, uploader };
  }

  const { result, uploader } = useDisplayImage();

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {
          setImage(e.target.files[0]);
          uploader(e);
        }}
      />
      {result && <img ref={imageRef} src={result} alt="" />}
    </div>
  );
}

I created a custom hook so that it can be reused anywhere in the app. The hook returns the image src and the uploader function. The image src can then be linked to the <img src={..} /> and then on input change you can just pass in the e to the uploader function.

How to display a image selected from input type = file in reactJS

3 Answers3

Linked