Spaces:

Ultronprime
/

extension-changer

Running

File size: 20,061 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulk File Extension Changer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .dropzone {
            border: 2px dashed #94a3b8;
            transition: all 0.3s ease;
        }
        .dropzone.active {
            border-color: #4f46e5;
            background-color: #eef2ff;
        }
        .file-item:hover .remove-btn {
            opacity: 1;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.3s ease forwards;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        #zipLoading {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-indigo-600 mb-3">Bulk File Extension Changer</h1>
            <p class="text-lg text-gray-600">Select multiple files and change their extensions in one click</p>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- File Drop Zone -->
            <div id="dropzone" class="dropzone p-10 text-center cursor-pointer rounded-t-xl">
                <div class="mx-auto max-w-md">
                    <div class="flex justify-center mb-4">
                        <i class="fas fa-cloud-upload-alt text-5xl text-indigo-400"></i>
                    </div>
                    <h3 class="text-xl font-medium text-gray-700 mb-2">Drag & drop files here</h3>
                    <p class="text-gray-500 mb-4">or</p>
                    <label for="fileInput" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg shadow-sm cursor-pointer transition">
                        <i class="fas fa-folder-open mr-3"></i>
                        Browse Files
                        <input id="fileInput" type="file" multiple class="hidden">
                    </label>
                    <p class="text-sm text-gray-400 mt-4">Supports all file types</p>
                </div>
            </div>

            <!-- Control Panel -->
            <div class="bg-gray-50 p-6 border-t border-b border-gray-200">
                <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                    <div class="flex-1">
                        <label for="newExtension" class="block text-sm font-medium text-gray-700 mb-1">New Extension</label>
                        <div class="flex rounded-md shadow-sm">
                            <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">.</span>
                            <input type="text" id="newExtension" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300 border" placeholder="jpg, png, txt..." value="">
                        </div>
                    </div>
                    <div class="mt-4 sm:mt-0">
                        <button id="renameBtn" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg shadow-sm cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-exchange-alt mr-3"></i>
                            Change Extensions
                        </button>
                    </div>
                </div>
            </div>

            <!-- Selected Files List -->
            <div id="filesList" class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
                <!-- Files will be listed here -->
                <div class="py-4 px-6 text-center text-gray-500" id="emptyState">
                    <i class="fas fa-files-empty text-3xl mb-3 text-gray-300"></i>
                    <p>No files selected</p>
                </div>
            </div>

            <!-- Download Buttons -->
            <div id="downloadSection" class="bg-emerald-50 p-6 text-center hidden">
                <h3 class="text-lg font-medium text-emerald-800 mb-3">Files processed successfully!</h3>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button id="mergeFilesBtn" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm cursor-pointer transition">
                        <i class="fas fa-file-alt mr-3"></i>
                        Merge to TXT
                    </button>
                    <button id="downloadAllBtn" class="inline-flex items-center px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg shadow-sm cursor-pointer transition">
                        <i class="fas fa-download mr-3"></i>
                        Download All Files
                    </button>
                    <button id="downloadZipBtn" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg shadow-sm cursor-pointer transition">
                        <i class="fas fa-file-archive mr-3"></i>
                        Download as ZIP
                        <div id="zipLoading" class="ml-3">
                            <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        </div>
                    </button>
                </div>
                <div id="zipProgress" class="mt-4 hidden">
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-emerald-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
                    </div>
                    <p class="text-sm text-gray-600 mt-1" id="zipStatus">Preparing ZIP archive...</p>
                </div>
            </div>
        </div>

        <div class="mt-6 text-center text-sm text-gray-500">
            <p>Your files are processed locally in the browser — no data is uploaded anywhere.</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fileInput = document.getElementById('fileInput');
            const dropzone = document.getElementById('dropzone');
            const filesList = document.getElementById('filesList');
            const emptyState = document.getElementById('emptyState');
            const renameBtn = document.getElementById('renameBtn');
            const newExtension = document.getElementById('newExtension');
            const downloadSection = document.getElementById('downloadSection');
            const downloadAllBtn = document.getElementById('downloadAllBtn');
            const downloadZipBtn = document.getElementById('downloadZipBtn');
            const zipLoading = document.getElementById('zipLoading');
            const zipProgress = document.getElementById('zipProgress');
            const zipStatus = document.getElementById('zipStatus');
            const progressBar = zipProgress.querySelector('.progress-bar');
            const mergeFilesBtn = document.getElementById('mergeFilesBtn');

            let files = [];
            let processedFiles = [];

            // Drag and drop functionality
            dropzone.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropzone.classList.add('active');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('active');
            });

            dropzone.addEventListener('drop', (e) => {
                e.preventDefault();
                dropzone.classList.remove('active');
                handleFiles(e.dataTransfer.files);
            });

            fileInput.addEventListener('change', (e) => {
                handleFiles(e.target.files);
            });

            renameBtn.addEventListener('click', renameExtensions);
            downloadAllBtn.addEventListener('click', downloadFiles);
            downloadZipBtn.addEventListener('click', createZip);
            mergeFilesBtn.addEventListener('click', mergeToTxt);

            function handleFiles(newFiles) {
                if (newFiles.length === 0) return;

                // Convert FileList to array and add to existing files
                files = files.concat(Array.from(newFiles));
                
                // Update UI
                updateFilesList();
                renameBtn.disabled = files.length === 0 || !newExtension.value.trim();
                
                // Clear file input to allow selecting same files again
                fileInput.value = '';
            }

            function updateFilesList() {
                if (files.length === 0) {
                    emptyState.classList.remove('hidden');
                    filesList.innerHTML = '';
                    filesList.appendChild(emptyState);
                    return;
                }

                emptyState.classList.add('hidden');
                filesList.innerHTML = '';

                files.forEach((file, index) => {
                    const fileNameParts = file.name.split('.');
                    const ext = fileNameParts.length > 1 ? fileNameParts.pop() : '';
                    const nameWithoutExt = fileNameParts.join('.');

                    const fileItem = document.createElement('div');
                    fileItem.className = 'file-item flex items-center justify-between p-4 hover:bg-gray-50 transition fade-in';
                    
                    fileItem.innerHTML = `
                        <div class="flex items-center min-w-0">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-600 mr-4">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-900 truncate">${nameWithoutExt || file.name}</p>
                                <p class="text-sm text-gray-500">${ext || 'no extension'}</p>
                            </div>
                        </div>
                        <div class="flex items-center ml-4">
                            <span class="text-xs font-mono bg-gray-100 px-2 py-1 rounded text-gray-700 mr-3">${formatFileSize(file.size)}</span>
                            <button class="remove-btn opacity-0 group focus:opacity-100 hover:opacity-100 transition" data-index="${index}">
                                <i class="fas fa-times text-gray-400 group-hover:text-red-500"></i>
                            </button>
                        </div>
                    `;
                    
                    filesList.appendChild(fileItem);
                });

                // Add event listeners to remove buttons
                document.querySelectorAll('.remove-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        e.stopPropagation();
                        const index = parseInt(btn.getAttribute('data-index'));
                        files.splice(index, 1);
                        updateFilesList();
                        renameBtn.disabled = files.length === 0 || !newExtension.value.trim();
                    });
                });
            }

            function renameExtensions() {
                const ext = newExtension.value.trim();
                if (!ext) return;
                
                processedFiles = files.map(file => {
                    const fileNameParts = file.name.split('.');
                    const nameWithoutExt = fileNameParts.length > 1 
                        ? fileNameParts.slice(0, -1).join('.') 
                        : fileNameParts.join('.');
                    
                    const newName = `${nameWithoutExt}.${ext}`;
                    
                    // Create a new File object with the new name
                    return new File([file], newName, {
                        type: file.type,
                        lastModified: file.lastModified
                    });
                });
                
                // Show download section
                downloadSection.classList.remove('hidden');
                
                // Scroll to download button
                downloadSection.scrollIntoView({ behavior: 'smooth' });
            }

            function downloadFiles() {
                processedFiles.forEach(file => {
                    const url = URL.createObjectURL(file);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = file.name;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                });
            }

            async function createZip() {
                if (processedFiles.length === 0) return;
                
                // Show loading state
                downloadZipBtn.disabled = true;
                zipLoading.style.display = 'block';
                zipProgress.classList.remove('hidden');
                
                const zip = new JSZip();
                let processedCount = 0;
                
                // Add files to ZIP with progress tracking
                for (const file of processedFiles) {
                    try {
                        await new Promise((resolve) => {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                zip.file(file.name, e.target.result);
                                processedCount++;
                                updateProgress(processedCount);
                                resolve();
                            };
                            reader.readAsArrayBuffer(file);
                        });
                    } catch (error) {
                        console.error('Error adding file to ZIP:', error);
                    }
                }
                
                // Generate the ZIP file
                try {
                    zipStatus.textContent = 'Compressing files...';
                    
                    const content = await zip.generateAsync({
                        type: 'blob',
                        compression: 'DEFLATE',
                        compressionOptions: { level: 6 }
                    }, (metadata) => {
                        const progress = Math.round(metadata.percent);
                        progressBar.style.width = `${progress}%`;
                        zipStatus.textContent = `Compressing files... ${progress}%`;
                    });
                    
                    // Download the ZIP
                    saveAs(content, 'renamed_files.zip');
                    
                    // Reset UI
                    zipStatus.textContent = 'ZIP archive created successfully!';
                    progressBar.style.width = '100%';
                    progressBar.classList.add('bg-emerald-700');
                } catch (error) {
                    console.error('Error generating ZIP:', error);
                    zipStatus.textContent = 'Error creating ZIP file';
                    progressBar.classList.add('bg-red-500');
                } finally {
                    downloadZipBtn.disabled = false;
                    zipLoading.style.display = 'none';
                }
            }
            
            function updateProgress(processedCount) {
                const progress = Math.round((processedCount / processedFiles.length) * 100);
                progressBar.style.width = `${progress}%`;
                zipStatus.textContent = `Adding files to ZIP... ${processedCount}/${processedFiles.length}`;
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // Enable/disable rename button based on extension input
            newExtension.addEventListener('input', () => {
                renameBtn.disabled = files.length === 0 || !newExtension.value.trim();
            });

            async function mergeToTxt() {
                if (processedFiles.length === 0) return;
                
                try {
                    // Read all files as text
                    const fileContents = await Promise.all(
                        processedFiles.map(file => {
                            return new Promise((resolve) => {
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    resolve({
                                        name: file.name,
                                        content: e.target.result
                                    });
                                };
                                reader.readAsText(file);
                            });
                        })
                    );
                    
                    // Combine all contents with separators
                    let mergedContent = '';
                    fileContents.forEach((file, index) => {
                        mergedContent += `=== ${file.name} ===\n\n${file.content}\n\n`;
                        if (index < fileContents.length - 1) {
                            mergedContent += '\n\n';
                        }
                    });
                    
                    // Create and download the merged file
                    const blob = new Blob([mergedContent], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'merged_files.txt';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    
                } catch (error) {
                    console.error('Error merging files:', error);
                    alert('Error merging files. Please try again.');
                }
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ultronprime/extension-changer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>