storage

React Firebase Hooks - Cloud Storage

React Firebase Hooks provides convenience listeners for files stored within Firebase Cloud Storage. The hooks wrap around the getDownloadURL(...) method.

In addition to returning the download URL, the hooks provide an error and loading property to give a complete lifecycle for loading from Cloud Storage.

All hooks can be imported from hooked-on-firebase/storage, e.g.

import { useDownloadURL } from 'hooked-on-firebase/storage';

List of Cloud Storage hooks:

• useDownloadURL
• useUploadFile

useDownloadURL

const [downloadUrl, loading, error] = useDownloadURL(reference);

Retrieve the download URL for a storage reference.

The useDownloadURL hook takes the following parameters:

• reference: (optional) storage.Reference that you would like the download URL for

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 URL, or undefined if there is no error

Full example

import { getStorage, ref as storageRef } from 'firebase/storage';
import { useDownloadURL } from 'hooked-on-firebase/storage';

const storage = getStorage(firebaseApp);

const DownloadURL = () => {
  const [value, loading, error] = useDownloadURL(storageRef(storage, 'path/to/file'));

  return (
    <div>
      <p>
        {error && <strong>Error: {error}</strong>}
        {loading && <span>Download URL: Loading...</span>}
        {!loading && value && (
          <React.Fragment>
            <span>Download URL: {value}</span>
          </React.Fragment>
        )}
      </p>
    </div>
  );
};

useUploadFile

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

import { getStorage, storageRef } from 'firebase/storage';
import { useUploadFile } from 'hooked-on-firebase/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>
  )
}