[storage] Add useUploadFile hook

Author: chrisbianca

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-firebase-hooks",
-  "version": "5.0.0-alpha.5",
+  "version": "5.0.0-alpha.7",
   "description": "React Hooks for Firebase",
   "author": "CS Frequency Limited (https://csfrequency.com)",
   "license": "Apache-2.0",

storage/README.md

@@ -15,6 +15,7 @@ import { useDownloadURL } from 'react-firebase-hooks/storage';
 List of Cloud Storage hooks:
 
 - [useDownloadURL](#usedownloadurl)
+- [useUploadFile](#useuploadfile)
 
 ### useDownloadURL
 
@@ -32,20 +33,18 @@ Returns:
 
 - `downloadUrl`: A `string` download URL, or `undefined` if no storage reference is supplied
 - `loading`: A `boolean` to indicate whether the the download URL is still being loaded
-- `error`: Any `storage.StorageError` returned by Firebase when trying to load the user, or `undefined` if there is no error
+- `error`: Any `storage.StorageError` returned by Firebase when trying to load the URL, or `undefined` if there is no error
 
 #### Full example
 
 ```js
-import { ref, getStorage } from 'firebase/storage';
+import { getStorage, storageRef } from 'firebase/storage';
 import { useDownloadURL } from 'react-firebase-hooks/storage';
 
 const storage = getStorage(firebaseApp);
 
 const DownloadURL = () => {
-  const [value, loading, error] = useDownloadURL(
-    ref(storage, 'path/to/file')
-  );
+  const [value, loading, error] = useDownloadURL(ref(storage, 'path/to/file'));
 
   return (
     <div>
@@ -62,3 +61,61 @@ const DownloadURL = () => {
   );
 };
 ```
+
+### useUploadFile
+
+```js
+const [uploadFile, uploading, snapshot, error] = useUploadFile();
+```
+
+Upload a file to Firebase storage.
+
+The `useUploadFile` hook returns the following:
+
+- `uploadFile(ref, file, metadata)`: A function that can be called to upload a file, with attached metadata, to the storage reference supplied
+- `uploading`: A `boolean` to indicate whether the the file is currently being uploaded
+- `snapshot`: A `storage.UploadTaskSnapshot` to provide more detailed information about the upload
+- `error`: Any `storage.StorageError` returned by Firebase when trying to upload the file, or `undefined` if there is no error
+
+#### Full example
+
+```js
+import { getStorage, storageRef } from 'firebase/storage';
+import { useUploadFile } from 'react-firebase-hooks/storage';
+
+const storage = getStorage(firebaseApp);
+
+const UploadFile = () => {
+  const [uploadFile, uploading, snapshot, error] = useUploadFile();
+  const ref = storageRef(storage, 'file.jpg');
+  const [selectedFile, setSelectedFile] = useState<File>();
+
+  const upload = async () => {
+    if (selectedFile) {
+      const result = await uploadFile(ref, selectedFile, {
+        contentType: 'image/jpeg'
+      });
+      alert(`Result: ${JSON.stringify(result)}`);
+    }
+  }
+
+  return (
+    <div>
+      <p>
+        {error && <strong>Error: {error.message}</strong>}
+        {uploading && <span>Uploading file...</span>}
+        {snapshot && <span>Snapshot: {JSON.stringify(snapshot)}</span>}
+        {selectedFile && <span>Selected file: {selectedFile.name}</span>}
+        <input
+          type="file"
+          onChange={(e) => {
+            const file = e.target.files ? e.target.files[0] : undefined;
+            setSelectedFile(file);
+          }}
+        />
+        <button onClick={upload}>Upload file</button>
+      </p>
+    </div>
+  )
+}
+```

storage/index.ts

@@ -1 +1,2 @@
 export { default as useDownloadURL, DownloadURLHook } from './useDownloadURL';
+export { default as useUploadFile, UploadFileHook } from './useUploadFile';

storage/useUploadFile.ts

@@ -0,0 +1,59 @@
+import {
+  StorageError,
+  StorageReference,
+  uploadBytesResumable,
+  UploadMetadata,
+  UploadResult,
+  UploadTaskSnapshot,
+} from 'firebase/storage';
+import { useMemo, useState } from 'react';
+
+export type UploadFileHook = [
+  (
+    storageRef: StorageReference,
+    data: Blob | Uint8Array | ArrayBuffer,
+    metadata?: UploadMetadata | undefined
+  ) => Promise<UploadResult | undefined>,
+  boolean,
+  UploadTaskSnapshot | undefined,
+  StorageError | undefined
+];
+
+export default (): UploadFileHook => {
+  const [error, setError] = useState<StorageError>();
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [snapshot, setSnapshot] = useState<UploadTaskSnapshot>();
+
+  const uploadFile = async (
+    storageRef: StorageReference,
+    data: Blob | Uint8Array | ArrayBuffer,
+    metadata?: UploadMetadata | undefined
+  ): Promise<UploadResult | undefined> => {
+    return new Promise((resolve, reject) => {
+      setUploading(true);
+      const uploadTask = uploadBytesResumable(storageRef, data, metadata);
+      uploadTask.on(
+        'state_changed',
+        (snapshot) => {
+          setSnapshot(snapshot);
+        },
+        (error) => {
+          setUploading(false);
+          setError(error);
+          resolve(undefined);
+        },
+        () => {
+          setUploading(false);
+          setSnapshot(undefined);
+          resolve({
+            metadata: uploadTask.snapshot.metadata,
+            ref: uploadTask.snapshot.ref,
+          });
+        }
+      );
+    });
+  };
+
+  const resArray: UploadFileHook = [uploadFile, uploading, snapshot, error];
+  return useMemo<UploadFileHook>(() => resArray, resArray);
+};