Spaces:
Running
Running
I WANT AN OPTION IN THIS WHICH WILL MERGE ALL FILES INTO SINGLE FILE AND CHANGE THE EXTENSION TO TXT TO GET RAW TXT MERGED ALL FILE INTO SINGLE FILE AND DOWNLOAD IT - Follow Up Deployment
8039ec2
verified
| <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> |