onUploadProgress of useUploadThing going back to previous value

[marclelamy]

Provide environment information

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 10.08 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.8.1 - /opt/homebrew/bin/npm
    pnpm: 9.1.4 - ~/Desktop/Code/blendcopycopy/node_modules/.bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Edge: 114.0.1823.58
    Safari: 17.4.1
  npmPackages:
    @uploadthing/react: ^6.6.0 => 6.6.0 
    typescript: ^5 => 5.4.5 
    uploadthing: ^6.12.0 => 6.12.0

Describe the bug

When uploading multiple files using useUploadThing() hook and displaying the progress to the user, the progress number goes back. I assume it's because the onUploadProgress callback is called whenever the status of a file changes

I'm expecting two possible things:

• Having the progress for all files so if I have 10 files of 10mb for 100mb total, I'd expect to see 50% when 50mb have been uploaded.
• Having the progress mapped to each file. That is if the callback function would return an array of files but shouldn't be the case (however would be great to have the progress of each file in a future version) as when looking at the useUploadThingProps, it's set as:

  onUploadProgress?: ((p: number) => void) | undefined

  My guess is the callback is being called on every file update and because files upload is happening at the same time, a smaller file can be at 80% while other at 20%.

Link to reproduction

couldn't start the localhost due to error ⨯ Failed to load SWC binary for linux/x64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

To reproduce

This is what I use in my app to make it happen

const [uploadStatus, setUploadStatus] = React.useState<string>("Hasn't started");
const { startUpload, isUploading } = useUploadThing(
    "multifilesUploader",
    {
        onUploadProgress: (progress: number) => {
            if (progress !== 100) {
                setUploadStatus("In progress: " + progress + "%")
            } else {
                setUploadStatus("Finilizing upload...")
            }
        },
    },
);

Additional information

👨‍👧‍👦 Contributing

• [ ] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[juliusmarminge]

Can reproduce with the following modifications to the minimal-appdir example:

// app/page.tsx
"use client";
import { useUploadThing } from "~/utils/uploadthing";

export default function Home() {
  const { startUpload } = useUploadThing("videoAndImage", {
    skipPolling: true,
    onBeforeUploadBegin: (files) => {
      console.log("Uploading", files.length, "files");
      return files;
    },
    onUploadBegin: (name) => {
      console.log("Beginning upload of", name);
    },
    onClientUploadComplete: (res) => {
      console.log("Upload Completed.", res.length, "files uploaded");
    },
    onUploadProgress(p) {
      console.log("onUploadProgress", p);
    },
  });

  return (
    <main>
      <input
        type="file"
        multiple
        onChange={async (e) => {
          const files = Array.from(e.target.files ?? []);

          // Do something with files

          // Then start the upload
          await startUpload(files);
        }}
      />
    </main>
  );
}