convert image to base64 javascript without canvas

<div class="container">
        <h1>Image to Base64 Converter</h1>
        <p class="subtitle">Convert images to Base64 strings without canvas</p>

        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📁</div>
            <div class="upload-text">Click to select an image or drag and drop</div>
            <small style="color: #8fa57e;">Supports: JPG, PNG, GIF, WebP, BMP</small>
            <input type="file" class="file-input" id="fileInput" accept="image/*">
        </div>

        <div class="result-area" id="resultArea">
            <div class="preview" id="preview"></div>
            
            <div class="info">
                <div class="info-row">
                    <span class="label">File Name:</span>
                    <span id="fileName"></span>
                </div>
                <div class="info-row">
                    <span class="label">File Size:</span>
                    <span id="fileSize"></span>
                </div>
                <div class="info-row">
                    <span class="label">MIME Type:</span>
                    <span id="fileType"></span>
                </div>
                <div class="info-row">
                    <span class="label">Base64 Length:</span>
                    <span id="base64Length"></span>
                </div>
            </div>

            <textarea id="base64Output" readonly></textarea>

            <div class="actions">
                <button class="btn" onclick="copyToClipboard()">Copy to Clipboard</button>
                <button class="btn" onclick="downloadBase64()">Download as .txt</button>
                <button class="btn" onclick="reset()">Convert Another</button>
            </div>

            <div class="status" id="status"></div>
        </div>
    </div>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #E9FFDB 0%, #C8F5C8 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }

        h1 {
            color: #2d5016;
            font-size: 28px;
            margin-bottom: 10px;
            text-align: center;
        }

        .subtitle {
            color: #6b8e4e;
            text-align: center;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .upload-area {
            border: 2px dashed #b8e6a0;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f9fff5;
        }

        .upload-area:hover {
            border-color: #8fd66e;
            background: #f0ffe5;
        }

        .upload-area.drag-over {
            border-color: #6eb84a;
            background: #e8ffdb;
        }

        .upload-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .upload-text {
            color: #5a7842;
            margin-bottom: 10px;
        }

        .file-input {
            display: none;
        }

        .btn {
            background: linear-gradient(135deg, #7fbc5d 0%, #6ba84e 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.2s ease;
            margin-top: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
        }

        .result-area {
            display: none;
            margin-top: 30px;
        }

        .result-area.active {
            display: block;
        }

        .preview {
            margin-bottom: 20px;
            text-align: center;
        }

        .preview img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .info {
            background: #f9fff5;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #5a7842;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .info-row:last-child {
            margin-bottom: 0;
        }

        .label {
            font-weight: 600;
        }

        textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid #d0e8c5;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            resize: vertical;
            background: #f9fff5;
        }

        .actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .actions button {
            flex: 1;
        }

        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            display: none;
        }

        .status.success {
            background: #d4f5d4;
            color: #2d5016;
            display: block;
        }
 

    const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const resultArea = document.getElementById('resultArea');
        const preview = document.getElementById('preview');
        const base64Output = document.getElementById('base64Output');
        const status = document.getElementById('status');

        // Click to upload
        uploadArea.addEventListener('click', () => fileInput.click());

        // File input change
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) handleFile(file);
        });

        // Drag and drop
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('drag-over');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('drag-over');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('drag-over');
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                handleFile(file);
            }
        });

        function handleFile(file) {
            if (!file.type.startsWith('image/')) {
                alert('Please select an image file');
                return;
            }

            const reader = new FileReader();

            reader.onload = function(e) {
                const base64String = e.target.result;
                displayResults(file, base64String);
            };

            reader.onerror = function() {
                alert('Error reading file');
            };

            // Read file as Data URL (Base64)
            reader.readAsDataURL(file);
        }

        function displayResults(file, base64String) {
            // Show preview
            preview.innerHTML = `<img src="${base64String}" alt="Preview">`;

            // Display file info
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = formatFileSize(file.size);
            document.getElementById('fileType').textContent = file.type;
            document.getElementById('base64Length').textContent = base64String.length.toLocaleString() + ' characters';

            // Display Base64 string
            base64Output.value = base64String;

            // Show result area
            resultArea.classList.add('active');
            status.style.display = 'none';
        }

        function formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
        }

        function copyToClipboard() {
            base64Output.select();
            document.execCommand('copy');
            showStatus('Base64 string copied to clipboard!');
        }

        function downloadBase64() {
            const blob = new Blob([base64Output.value], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'base64-' + Date.now() + '.txt';
            a.click();
            URL.revokeObjectURL(url);
            showStatus('Base64 string downloaded!');
        }

        function reset() {
            fileInput.value = '';
            resultArea.classList.remove('active');
            uploadArea.classList.remove('drag-over');
        }

        function showStatus(message) {
            status.textContent = message;
            status.classList.add('success');
            status.style.display = 'block';
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
        }