Function ImageUploadButton

example/withSuspense/Storage.tsx:22–48

(props)

};

const ImageUploadButton = (props) => {
  const [uploadTask, setUploadTask] = useState<UploadTask | undefined>(undefined);
  const [imageRef, setRef] = useState<StorageReference | undefined>(undefined);
  const storage = useStorage();
  const onChange = (event) => {
    const fileList = event.target.files;
    const fileToUpload = fileList[0];
    const fileName = fileToUpload.name;
    const newRef = ref(storage, `images/${fileName}`);
    setRef(newRef);

    const uploadTask = uploadBytesResumable(newRef, fileToUpload);

    uploadTask.then(() => {
      console.log('upload complete');
      setUploadTask(undefined);
    });
    setUploadTask(uploadTask);
  };

  return (
    <>
      <input type="file" accept="image/png, image/jpeg" onChange={onChange} />
      {uploadTask ? <UploadProgress uploadTask={uploadTask} storageRef={imageRef} /> : 'Start an upload to view progress'}
    </>
  );
};

const FetchImage = ({ storagePath }) => {
  const storage = useStorage();