88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { UploadButtonProps } from '../Button/ButtonTypes';
|
|
import Button from '../Button/Button';
|
|
|
|
const UploadButton: React.FC<UploadButtonProps> = ({
|
|
onUpload,
|
|
accept = '*/*',
|
|
multiple = false,
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
children,
|
|
icon,
|
|
iconPosition = 'left',
|
|
variant = 'primary',
|
|
size = 'md',
|
|
...props
|
|
}) => {
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = event.target.files;
|
|
if (!files || files.length === 0) return;
|
|
|
|
setIsUploading(true);
|
|
|
|
try {
|
|
if (multiple) {
|
|
// Handle multiple files
|
|
for (let i = 0; i < files.length; i++) {
|
|
await onUpload(files[i]);
|
|
}
|
|
} else {
|
|
// Handle single file
|
|
await onUpload(files[0]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Upload failed:', error);
|
|
// Error handling is done by the parent component
|
|
} finally {
|
|
setIsUploading(false);
|
|
// Reset the input so the same file can be selected again
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (!disabled && !loading && !isUploading) {
|
|
fileInputRef.current?.click();
|
|
}
|
|
};
|
|
|
|
const isDisabled = disabled || loading || isUploading;
|
|
const isButtonLoading = loading || isUploading;
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
{...props}
|
|
variant={variant}
|
|
size={size}
|
|
disabled={isDisabled}
|
|
loading={isButtonLoading}
|
|
className={`uploadButton ${className}`}
|
|
onClick={handleClick}
|
|
icon={icon}
|
|
iconPosition={iconPosition}
|
|
>
|
|
{children || (isUploading ? 'Uploading...' : 'Upload File')}
|
|
</Button>
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept={accept}
|
|
multiple={multiple}
|
|
onChange={handleFileSelect}
|
|
className="hiddenInput"
|
|
disabled={isDisabled}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UploadButton;
|