use upload stuff hook -- s3

use-upload-stuff.ts

import { useState } from "react";
import axios from "axios";
import { toast } from "sonner";
import { api } from "@/utils/api";

const useUploadStuff = () => {
  const [isUploadLoading, setIsUploadLoading] = useState(false);

  const [uploadProgress, setUploadProgress] = useState(0);
  const getUploadSignedUrl = api.storageRouter.getUploadSignedUrl.useMutation();

  const uploadStuff = async ({
    stuffFile,
    saveUrlIntoDBFun,
  }: {
    stuffFile: File | undefined;
    saveUrlIntoDBFun: (url: string) => Promise<void>;
  }) => {
    if (!stuffFile) return;
    try {
      setIsUploadLoading(true);
      const { assetUrl, signedUrl } = await getUploadSignedUrl.mutateAsync({
        fileMimetype: stuffFile.type,
        fileName: stuffFile.name,
      });
      await axios
        .put(signedUrl, stuffFile, {
          headers: {
            "Content-Type": stuffFile.type,
          },
          onUploadProgress(progressEvent) {
            if (progressEvent.progress) {
              setUploadProgress(Math.floor(progressEvent.progress * 100));
            }
          },
        })
        .catch((err) => {
          console.error(err);
          toast.error("upload failed!");
          setIsUploadLoading(false);
        });
      await saveUrlIntoDBFun(assetUrl);
      setIsUploadLoading(false);
    } catch (error) {
      toast.error("uploading failed due to some reason");
      setIsUploadLoading(false);
    }
  };

  return {
    isUploadLoading,
    uploadStuff,
    uploadProgress,
  };
};

export { useUploadStuff };

getUploadSignedUrl: protectedProcedure
    .input(
      z.object({
        fileName: z.string(),
        fileMimetype: z.string(),
      })
    )
    .mutation(async ({ input: { fileName, fileMimetype } }) => {
      const fileExtensionArr = /[.]/.exec(fileName)
        ? /[^.]+$/.exec(fileName)
        : undefined;
      const fileExtension = fileExtensionArr ? fileExtensionArr[0] : undefined;

      if (!fileExtension) {
        throw new TRPCError({
          code: "BAD_REQUEST",
          message: "wrong type of file!",
        });
      }

      const randomKey = `lesson-thumbnails/${nanoid()}.${fileExtension}`;
      const assetUrl = `${env.NEXT_PUBLIC_R2_URL}/${randomKey}`;

      const signedUrl = await getSignedUrl(
        s3,
        new PutObjectCommand({
          Bucket: env.CLOUDFLARE_R2_BUCKET_NAME,
          Key: randomKey,
          ContentType: fileMimetype,
        }),
        {
          expiresIn: 60 * 2,
        }
      );

      return { signedUrl, assetUrl };
    }),
    ```