Интерфейс загрузки файла

by jt3k

HTML

<div class="chat-container">
        <div class="message-area" id="messageArea">
            <!-- Сообщения будут появляться здесь -->
        </div>
        
        <div class="input-container">
            <div class="input-wrapper">
                <textarea 
                    id="messageInput" 
                    placeholder="Введите сообщение..." 
                    rows="1"
                ></textarea>
                <button class="attach-btn" id="attachBtn">📎</button>
            </div>
            
            <div id="filePreview" class="file-preview hidden">
                <div class="file-icon">📄</div>
                <div class="file-info">
                    <div class="file-name" id="fileName"></div>
                    <div class="file-size" id="fileSize"></div>
                </div>
                <button class="remove-btn" id="removeBtn">✕</button>
            </div>
            
            <button class="send-btn" id="sendBtn" disabled>Отправить</button>
        </div>
    </div>

CSS

* {
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
        }
        
        .chat-container {
            max-width: 800px;
            margin: 50px auto;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .message-area {
            height: 400px;
            padding: 20px;
            overflow-y: auto;
            background: #f9f9f9;
            border-bottom: 1px solid #eee;
        }
        
        .input-container {
            position: relative;
            padding: 16px;
            background: #fff;
        }
        
        .input-wrapper {
            display: flex;
            border: 1px solid #d1d5db;
            border-radius: 12px;
            background: #fff;
            align-items: flex-end;
            padding: 8px 12px;
            transition: border-color 0.2s;
        }
        
        .input-wrapper:focus-within {
            border-color: #10a37f;
            box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
        }
        
        textarea {
            flex-grow: 1;
            border: none;
            resize: none;
            outline: none;
            max-height: 200px;
            padding: 8px 0;
            font-size: 16px;
            line-height: 1.5;
            background: transparent;
        }
        
        .file-preview {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f0f7ff;
            border-radius: 8px;
            padding: 12px 15px;
            margin-top: 10px;
            animation: fadeIn 0.3s ease;
        }
        
        .file-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
           ...

JavaScript

// Элементы DOM
        const messageInput = document.getElementById('messageInput');
        const attachBtn = document.getElementById('attachBtn');
        const fileInput = document.createElement('input');
        const filePreview = document.getElementById('filePreview');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const removeBtn = document.getElementById('removeBtn');
        const sendBtn = document.getElementById('sendBtn');
        const messageArea = document.getElementById('messageArea');

        // Настройка input для файлов
        fileInput.type = 'file';
        fileInput.hidden = true;
        document.body.appendChild(fileInput);

        // Текущий выбранный файл
        let selectedFile = null;

        // Автоподстройка высоты textarea
        messageInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
            updateSendButtonState();
        });

        // Обработчик клика по скрепке
        attachBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // Обработчик выбора файла
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                selectedFile = e.target.files[0];
                showFilePreview(selectedFile);
            }
        });

        // Показ превью файла
        function showFilePreview(file) {
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            filePreview.classList.remove('hidden');
            updateSendButtonState();
        }

        // Удаление файла
        removeBtn.addEventListener('click', () => {
            selectedFile = null;
            fileInput.value = '';
            filePreview.classList.add('hidden');
           ...