📤 useSupaUpload(bucketName)

React hook that simplifies uploading files natively onto Supabase Storage with real-time XHR progress tracking.

The Problem

Supabase JS SDK's standard .upload() promises lack granular file progress events out-of-the-box (meaning you can only know when an upload succeeds or when it fails, but not the smooth progressive jumps 1%, 14%, 99%). This hook bridges the gap by directly bypassing the JS payload chunking using standard browser XMLHttpRequest to fire progress metrics onto the frontend precisely!

Setup

The hook dictates a bucketName directly in its parameter signature!

"use client";
import { useSupaUpload } from "next-supa-utils/client";
import { useState } from "react";

export default function FileUploader() {
  // Bind your bucket name explicitly
  const { upload, isUploading, progress, data, error } = useSupaUpload("avatars_public");
  
  const handleFileSubmit = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      await upload(file, { path: `user_123/${file.name}`, upsert: true });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileSubmit} disabled={isUploading} />
      
      {isUploading && (
        <div className="w-full bg-slate-200 h-2 mt-4 rounded">
          <div className="bg-blue-500 h-2 rounded transition-all" style={{ width: `${progress}%` }} />
        </div>
      )}
      
      {data && <p className="text-green-600">Successfully uploaded to {data.fullPath}!</p>}
      {error && <p className="text-red-500">Failed: {error.message}</p>}
    </div>
  );
}

Hook Structure (UseSupaUploadReturn)