src/added-tools/Uploader/FileUploader.jsx - master - DevDenzo/ERP

src/added-tools/Uploader/FileUploader.jsx
63 строки3 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React и хук состояния
import React, { useState } from 'react';
// Подключаем функционал работы с шаблонными строками
import classNames from 'classnames';

// Подключаем основные стили менеджера загрузки файлов
import '../../cores/styles/services/components/_file-uploader.less';
import '../../cores/styles/services/typography/_file-upload-text.less';
import '../../cores/styles/services/generated/_file-uploader-reset.less';


// Компонент загрузки файла
const FileUploader = () => {
    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileChange = (e) => {
        const file = e.target.files[0];
        setSelectedFile(file);
    };

    const getFileProperty = (file, property) => {
        return file && Object.prototype.hasOwnProperty.call(file, property) ? file[property] : "Неизвестно";
    };

    // рендер формы загрузки файла
    return (
        <form
            className={classNames('file-upload')}
            encType="multipart/form-data"
        >
            <div className={classNames('file-upload-container')}>
                <input
                    type="file"
                    className={classNames('file-upload-input')}
                    id="fileUpload"
                    name="fileUpload"
                    accept="image/*" // Позже укажем и другие типы файлов
                    onChange={handleFileChange}
                />
                <label htmlFor="fileUpload" className="file-upload-label">
                    <span className={classNames('file-upload-text')}>
                        {selectedFile ? `Файл выбран: ${getFileProperty(selectedFile, name)}` : 'Выберите файл или перетащите его сюда'}
                    </span>
                </label>
            </div>
            {selectedFile && (
                <div className={classNames('file-info')}>
                    <div className={classNames('file-info-item')}>
                        Имя файла: {getFileProperty(selectedFile, 'name')}
                    </div>
                    <div className={classNames('file-info-item')}>
                        Тип файла: {getFileProperty(selectedFile, 'type')}
                    </div>
                    <div className={classNames('file-info-item')}>
                        Размер: {getFileProperty(selectedFile, 'size') ? Math.round(selectedFile.size / 1024) : 'Неизвестно'} КБ
                    </div>
                </div>
            )}
        </form>
    );
};

export default FileUploader;