File size: 2,153 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React, { useState } from 'react';
import { FileUp } from 'lucide-react';
import { cn } from '~/utils/';
type FileUploadProps = {
onFileSelected: (event: React.ChangeEvent<HTMLInputElement>) => void;
className?: string;
successText?: string;
invalidText?: string;
validator?: ((data: any) => boolean) | null;
text?: string;
id?: string;
};
const FileUpload: React.FC<FileUploadProps> = ({
onFileSelected,
className = '',
successText = null,
invalidText = null,
validator = null,
text = null,
id = '1',
}) => {
const [statusColor, setStatusColor] = useState<string>('text-gray-600');
const [status, setStatus] = useState<null | string>(null);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const file = event.target.files?.[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = (e) => {
const jsonData = JSON.parse(e.target?.result as string);
if (validator && !validator(jsonData)) {
setStatus('invalid');
setStatusColor('text-red-600');
return;
}
if (validator) {
setStatus('success');
setStatusColor('text-green-500 dark:text-green-500');
}
onFileSelected(jsonData);
};
reader.readAsText(file);
};
return (
<label
htmlFor={`file-upload-${id}`}
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
statusColor,
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs ">
{!status ? text || 'Import' : status === 'success' ? successText : invalidText}
</span>
<input
id={`file-upload-${id}`}
value=""
type="file"
className={cn('hidden ', className)}
accept=".json"
onChange={handleFileChange}
/>
</label>
);
};
export default FileUpload;
|