Installation

1npm install react-activestorage

Usage

1import { useActiveStorage } from "react-active-storage";
2
3const Example = () => {
4  const form = useRef<HTMLFormElement>(null);
5  const [file, setFile] = useState<File | undefined>();
6
7  const { uploading, progress } = useActiveStorage(
8    file,
9    async ({ blob, error }) => {
10      if (blob) console.log(blob.signed_id);
11      setError(error);
12      setFile(undefined);
13      form.current?.reset();
14    },
15  );
16
17  return (
18    <form ref={form}>
19      {error && <div>{error.message}</div>}
20
21      <input
22        type="file"
23        disabled={uploading}
24        onChange={(event) => {
25          if (!event.target.files) return;
26          setFile(event.target.files.item(0) ?? undefined);
27        }}
28      />
29
30      {progress && (
31        <div>
32          {progress.loaded} of {progress.total}
33        </div>
34      )}
35    </form>
36  );
37};