Work Notes: Uploading multiple images via UploadThing


The code I currently have only allows for uploading one image.

This repo shows multiple images being uploaded, it also lint-free.

I am focusing on this block of code from imgmanager which appears to upload multiple files:

  useEffect(() => {
    if (props.upload) {
      uploadFiles({ files: [props.file], endpoint: "imageUploader" }).then(
        () => {
          startTransition(() => {
            props.removeImage();
            refresh();
          });
        }
      );
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.file.name, props.upload]);

That request does multiple calls so if it wants to send two images then it sends two post requests.

This is currently what I have to upload just one image:


    const { startUpload, isUploading } = useUploadThing("imageUploader", {
        onClientUploadComplete: (res) => {
            console.log("Files: ", res);
            if (res) {
                formData.img = res[0]?.fileUrl as string;
            }

            alert("uploaded successfully and formData.img =" + formData.img);
        },
        onUploadError: (e) => {
            console.log(e);
            console.log(isUploading);
            alert("error occurred while uploading");
        },
    });

This is the type definition for multiple files:

    readonly uploadFiles: (opts: { [TEndpoint_1 in keyof TRouter]: {
        endpoint: TEndpoint_1;
        onUploadProgress?: (({ file, progress, }: {
            file: string;
            progress: number;
        }) => void) | undefined;
        input?: inferEndpointInput<TRouter[TEndpoint_1]> | undefined;
        files: File[];
    }; }[keyof TRouter], config?: {
        url?: string | undefined;
    } | undefined) => Promise<{
        fileUrl: string;
        fileKey: string;
    }[]>;

I guess you can upload multiple via the upload button like this.

It’s just this:

    imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 10 } })

Why the param of UploadButton says multiple but can’t be accessed is something I’ve yet to figure out.

Summary:

Just add a second parameter to the imageUploader functions with the maxfilecount and then you should be able to upload multiple images.

Getting Ahead: Your first 2,000 dollars on Upwork

$4.99

Are you a developer dreaming of location independence and a lucrative career? This ebook is your roadmap to success on Upwork, one of the world’s leading freelance platforms. Whether you’re a seasoned coder or just starting out, we’ll guide you through the most effective strategies to reach that crucial $2,000 milestone.

Category:

One response to “Work Notes: Uploading multiple images via UploadThing”

Leave a Reply