file-upload

1"use client";
2import { cn } from "@/lib/utils";
3import React, { useRef, useState } from "react";
4import { motion } from "motion/react";
5import { IconUpload } from "@tabler/icons-react";
6import { useDropzone } from "react-dropzone";
7 
8const mainVariant = {
9  initial: {
10    x: 0,
11    y: 0,
12  },
13  animate: {
14    x: 20,
15    y: -20,
16    opacity: 0.9,
17  },
18};
19 
20const secondaryVariant = {
21  initial: {
22    opacity: 0,
23  },
24  animate: {
25    opacity: 1,
26  },
27};
28 
29export const FileUpload = ({
30  onChange,
31}: {
32  onChange?: (files: File[]) => void;
33}) => {
34  const [files, setFiles] = useState<File[]>([]);
35  const fileInputRef = useRef<HTMLInputElement>(null);
36 
37  const handleFileChange = (newFiles: File[]) => {
38    setFiles((prevFiles) => [...prevFiles, ...newFiles]);
39    onChange && onChange(newFiles);
40  };
41 
42  const handleClick = () => {
43    fileInputRef.current?.click();
44  };
45 
46  const { getRootProps, isDragActive } = useDropzone({
47    multiple: false,
48    noClick: true,
49    onDrop: handleFileChange,
50    onDropRejected: (error) => {
51      console.log(error);
52    },
53  });
54 
55  return (
56    <div className="w-full" {...getRootProps()}>
57      <motion.div
58        onClick={handleClick}
59        whileHover="animate"
60        className="group/file relative block w-full cursor-pointer overflow-hidden rounded-lg p-10"
61      >
62        <input
63          ref={fileInputRef}
64          id="file-upload-handle"
65          type="file"
66          onChange={(e) => handleFileChange(Array.from(e.target.files || []))}
67          className="hidden"
68        />
69        <div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)]">
70          <GridPattern />
71        </div>
72        <div className="flex flex-col items-center justify-center">
73          <p className="relative z-20 font-sans text-base font-bold text-neutral-700 dark:text-neutral-300">
74            Upload file
75          </p>
76          <p className="relative z-20 mt-2 font-sans text-base font-normal text-neutral-400 dark:text-neutral-400">
77            Drag or drop your files here or click to upload
78          </p>
79          <div className="relative mx-auto mt-10 w-full max-w-xl">
80            {files.length > 0 &&
81              files.map((file, idx) => (
82                <motion.div
83                  key={"file" + idx}
84                  layoutId={idx === 0 ? "file-upload" : "file-upload-" + idx}
85                  className={cn(
86// … truncated