Reactjs app doesn't show image preview in safari

Question

I am trying to make an app where a user can upload an image and send it off to an email, it's working fine on all browsers except Safari. For both mobile and web browsers, when I choose an image to upload nothing seems to be previewed nor is it even loaded (ready to be sent). Is there anything I can do to fix this? My code as it stands is really simple:

const EnterDetailPage = props => {
  const [imageUrl, setImageUrl] = useState("");
  const [imageFile, setImageFile] = useState();
  const [upload, setUpload] = useState(null);
const handleUploadChange = async e => {
    setLoading(true);
    const file = e.target.files[0];
    if (!file) {
      return;
    }
    setUpload(URL.createObjectURL(file));
    setImageFile(file);
    const ref = firebase
      .storage()
      .ref()
      .child(uuid.v4());

    const snapshot = await ref.put(file);
    let getImageUrl = await snapshot.ref.getDownloadURL();
    setImageUrl(getImageUrl);
    setLoading(false);
    console.log(getImageUrl);
  };
  let imgPreview = null;
    if (upload) {
    imgPreview = (
      <Avatar
        variant="square"
        src={upload}
        alt="Avatar"
        className={classes.bigAvatar}
      />
    );
  }
  return(
<div className="m-auto p-16 sm:px-24 sm:mx-auto max-w-xl">
        <input
          accept="image/jpeg,image/gif,image/png"
          className="hidden"
          id="button-file"
          type="file"
          // onChange={handleUploadChange}
          onInput={handleUploadChange}
          onClick={event => {
            event.target.value = null;
          }}
        />
        <label
          htmlFor="button-file"
          className={`${classes.bigAvatar} mt-8 bg-gray-300 m-auto flex items-center justify-center relative w-128 h-128 rounded-4 a-mr-16 a-mb-16 overflow-hidden cursor-pointer shadow-1 hover:shadow-xl`}
        >
          <div className="absolute flex items-center justify-center w-full h-full z-50">
          {imageUrl ? null :
            <Icon fontSize="large" color="primary" className="cloud-icon">
              cloud_upload
            </Icon>}
          </div>
          {imgPreview}
        </label>
);
}:

I compared my code to this article here: https://w3path.com/react-image-upload-or-file-upload-with-preview/

and it seems like I've done exactly the same thing...how come I'm not getting the same results?

Answer 1

There's quite a bit going on your codesandbox example, but by stripping it down its bare bones, I was able to track down the issue...

Safari doesn't seem to support input elements that try to use the onInput event listener -- the callback is never executed. Instead, you can use the onChange event listener.

---

For the example below, I faked an API call by setting a Promise with a timeout, but this not needed and is only for demonstration purposes. In addition, I like using objects over multiple individual states, especially when the state needs to be synchronous -- it also is cleaner, easier to read, and functions more like a class based component.

Demo: https://jd13t.csb.app/

Source:

---

components/DetailPage.js

import React, { useRef, useState } from "react";
import { CircularProgress, Icon, Fab } from "@material-ui/core";

const initialState = {
  isLoading: false,
  imageName: "",
  imagePreview: null,
  imageSize: 0
};

const EnterDetailPage = () => {
  const [state, setState] = useState(initialState);
  const uploadInputEl = useRef(null);

  const handleUploadChange = async ({ target: { files } }) => {
    setState(prevState => ({ ...prevState, isLoading: true }));

    const file = files[0];
    await new Promise(res => {
      setTimeout(() => {
        res(
          setState(prevState => ({
            ...prevState,
            imageName: file.name,
            imagePreview: URL.createObjectURL(file),
            imageSize: file.size,
            isLoading: false
          }))
        );
      }, 2000);
    });
  };

  const resetUpload = () => {
    setState(initialState);
    uploadInputEl.current.value = null;
  };

  const uploadImage = async () => {
    if (state.imagePreview)
      setState(prevState => ({ ...prevState, isLoading: true }));

    await new Promise(res => {
      setTimeout(() => {
        res(alert(JSON.stringify(state, null, 4)));
        resetUpload();
      }, 2000);
    });
  };

  const { imagePreview, imageName, imageSize, isLoading } = state;

  return (
    <div style={{ padding: 20 }}>
      <div style={{ textAlign: "center" }}>
        <div>
          <input
            accept="image/jpeg,image/gif,image/png"
            className="hidden"
            id="button-file"
            type="file"
            ref={uploadInputEl}
            onChange={handleUploadChange}
          />
          <label htmlFor="button-file">
            <div>
              {imagePreview ? (
                <>
                  <img
                    src={imagePreview}
                    alt="Avatar"
                    style={{ margin: "0 auto", maxHeight: 150 }}
                  />
                  <p style={{ margin: "10px 0" }}>
                    ({imageName} - {(imageSize / 1024000).toFixed(2)}MB)
                  </p>
                </>
              ) : (
                <Icon fontSize="large" color="primary" className="cloud-icon">
                  cloud_upload
                </Icon>
              )}
            </div>
          </label>
          <Fab
            variant="extended"
            size="large"
            color="primary"
            aria-label="add"
            className=""
            type="button"
            onClick={uploadImage}
          >
            {isLoading ? (
              <CircularProgress style={{ color: "white" }} />
            ) : (
              "Submit"
            )}
          </Fab>
          {imagePreview && (
            <Fab
              variant="extended"
              size="large"
              color="default"
              aria-label="add"
              className=""
              type="button"
              onClick={resetUpload}
            >
              Cancel
            </Fab>
          )}
        </div>
      </div>
    </div>
  );
};

export default EnterDetailPage;