file-input

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { AnimatePresence, motion } from 'framer-motion';
5import {
6  CloudUpload,
7  File,
8  Globe,
9  MapPin,
10  FileText,
11  Image as ImageIcon,
12  Trash
13} from 'lucide-react';
14import Image from 'next/image';
15import React, { useEffect, useRef, useState } from 'react';
16 
17const validateFile = (
18  file: File,
19  accept?: string,
20  maxSizeInMB?: number
21): { success: boolean; message: string | null } => {
22  // Validate file type if accept is specified
23  if (accept) {
24    const acceptedTypes = accept.split(',').map((type) => type.trim());
25    const fileType = file.type;
26    const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
27 
28    const isValidType = acceptedTypes.some((acceptedType) => {
29      if (acceptedType.startsWith('.')) {
30        return acceptedType === fileExtension;
31      }
32      return acceptedType === fileType;
33    });
34 
35    if (!isValidType) {
36      return { success: false, message: 'File type not accepted.' };
37    }
38  }
39 
40  // Validate file size
41  if (maxSizeInMB) {
42    const fileSizeInMB = file.size / (1024 * 1024);
43    if (fileSizeInMB > maxSizeInMB) {
44      return { success: false, message: `File size exceeds ${maxSizeInMB}MB limit.` };
45    }
46  }
47 
48  return { success: true, message: null };
49};
50 
51const formatFileSize = (bytes: number): string => {
52  if (bytes === 0) return '0 Bytes';
53  const k = 1024;
54  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
55  const i = Math.floor(Math.log(bytes) / Math.log(k));
56  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
57};
58 
59const getFileType = (file: File): 'image' | 'pdf' | 'text' | 'other' => {
60  if (file.type.startsWith('image/')) return 'image';
61  if (file.type === 'application/pdf') return 'pdf';
62  if (file.type.startsWith('text/')) return 'text';
63  return 'other';
64};
65 
66const getFileIcon = (fileType: 'image' | 'pdf' | 'text' | 'other') => {
67  switch (fileType) {
68    case 'image':
69      return <ImageIcon size={24} className="text-white" />;
70    case 'pdf':
71      return <FileText size={24} className="text-white" />;
72    case 'text':
73      return <FileText size={24} className="text-white" />;
74    default:
75      return <File size={24} className="text-white" />;
76  }
77};
78 
79interface IdleProps {
80  accept?: string;
81  maxSizeInMB?: number;
82  onClick: () => void;
83  onDrop: (e: React.DragEvent) => void;
84  error: string | null;
85}
86 
87const Idle = ({ accept, maxSizeInMB, onClick, onDrop, error }: IdleProps) => {
88// … truncated