import React, { useState, ChangeEvent, FC } from 'react';
interface UploadDialogProps {
isOpen: boolean;
onClose: () => void;
onUpload: (file: File) => void;
}
const UploadDialog: FC<UploadDialogProps> = ({ isOpen, onClose, onUpload }) => {
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [error, setError] = useState<string | null>(null);
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
setError(null);
const files = e.target.files;
if (files && files.length > 0) {
const file = files[0];
// Accept only video files (basic check)
if (!file.type.startsWith('video/')) {
setError('Please select a valid video file.');
setSelectedFile(null);
} else {
setSelectedFile(file);
}
}
};
const handleUpload = () => {
if (selectedFile) {
onUpload(selectedFile);
setSelectedFile(null);
onClose();
} else {
setError('No file selected.');
}
};
if (!isOpen) return null;
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="upload-dialog-title"
className="upload-dialog-backdrop"
style={{
position: 'fixed',
top: 0,
left: 0,
zIndex: 9999,
width: '100vw',
height: '100vh',
backgroundColor: 'rgba(0,0,0,0.5)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
className="upload-dialog-content"
style={{
background: '#fff',
padding: 24,
borderRadius: 8,
width: '400px',
boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
}}
>
<h2 id="upload-dialog-title">Upload Video</h2>
<input
type="file"
accept="video/*"
onChange={handleFileChange}
aria-describedby="upload-dialog-error"
/>
{error && (
<p
id="upload-dialog-error"
style={{ color: 'red', marginTop: 8 }}
role="alert"
>
{error}
</p>
)}
<div style={{ marginTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
<button
type="button"
onClick={onClose}
style={{ marginRight: 8, padding: '8px 16px' }}
>
Cancel
</button>
<button
type="button"
onClick={handleUpload}
disabled={!selectedFile}
style={{ padding: '8px 16px' }}
>
Upload
</button>
</div>
</div>
</div>
);
};
export default UploadDialog;