/
F1lya
/
Modal_Window
Обзор
Документация
Войти
/
F1lya
/
Modal_Window
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
FileUpload.tsx
65 строк
2 KB
F1lya
upload files
20 окт 2025, 14:17
20 окт 2025, 14:17
f9aac0b
Код
Авторство
О чём код?
import React, { useRef } from 'react'; import './FileUpload.css'; interface FileUploadProps { onFileSelect: (file: File) => void; accept?: string; disabled?: boolean; maxSize?: number; } export const FileUpload: React.FC<FileUploadProps> = ({ onFileSelect, accept = '.png,.jpg,.jpeg,.gif,.webp', disabled = false, maxSize = 50 * 1024 * 1024 // 50MB }) => { const fileInputRef = useRef<HTMLInputElement>(null); const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0]; if (file) { onFileSelect(file); } // Reset input to allow selecting the same file again event.target.value = ''; }; const handleClick = () => { fileInputRef.current?.click(); }; return ( <div className="file-upload"> <input type="file" ref={fileInputRef} accept={accept} onChange={handleFileChange} disabled={disabled} className="file-upload__input" aria-label="Upload image file" /> <button type="button" onClick={handleClick} disabled={disabled} className="file-upload__button" > <svg className="file-upload__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" > <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> <polyline points="17 8 12 3 7 8" /> <line x1="12" y1="3" x2="12" y2="15" /> </svg> <span className="file-upload__text">Choose Image</span> <span className="file-upload__formats">PNG, JPEG, GIF, WebP</span> </button> </div> ); };