import React from "react";
import toast from "react-hot-toast";
import { UploadDropzone } from "@uploadthing/react";
import { OurFileRouter } from "~/server/uploadthing";


const UploadComponent = ({
  setFiles,
  setFileUploadLoading,
}: {
  setFiles: React.Dispatch<React.SetStateAction<string[]>>;
  setFileUploadLoading: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  return (

        <UploadDropzone<OurFileRouter>
          className="relative z-50  w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          endpoint="imageUploader"
          onClientUploadComplete={(res) => {
            // Do something with the response
            if (res) {
              const filesArr: string[] = [];
              res.map((file) => filesArr.push(file.url));
              setFiles((prev) => [...filesArr, ...prev]);
            }
            toast.success("File uploaded!");
            setFileUploadLoading(false);
            console.log("Files: ", res);
          }}
          onUploadBegin={() => setFileUploadLoading(true)}
          onUploadError={(error: Error) => {
            // Do something with the error.
            setFileUploadLoading(false);

            alert(`ERROR! ${error.message}`);
          }}
        />

  );
};

export default UploadComponent;

import React from "react";
import toast from "react-hot-toast";
import { UploadDropzone } from "@uploadthing/react";
import { OurFileRouter } from "~/server/uploadthing";


const UploadComponent = ({
  setFiles,
  setFileUploadLoading,
}: {
  setFiles: React.Dispatch<React.SetStateAction<string[]>>;
  setFileUploadLoading: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  return (

        <UploadDropzone<OurFileRouter>
          className="relative z-50  w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          endpoint="imageUploader"
          onClientUploadComplete={(res) => {
            // Do something with the response
            if (res) {
              const filesArr: string[] = [];
              res.map((file) => filesArr.push(file.url));
              setFiles((prev) => [...filesArr, ...prev]);
            }
            toast.success("File uploaded!");
            setFileUploadLoading(false);
            console.log("Files: ", res);
          }}
          onUploadBegin={() => setFileUploadLoading(true)}
          onUploadError={(error: Error) => {
            // Do something with the error.
            setFileUploadLoading(false);

            alert(`ERROR! ${error.message}`);
          }}
        />

  );
};

export default UploadComponent;