Uploads improve

static/js/main.js

@@ -95,13 +95,13 @@ function getTimeRemaining(expirationDate) {
     const now = new Date();
     const expiry = new Date(expirationDate);
     const diff = expiry - now;
-    if (diff <= 0) return 'Expirado';
+    if (diff <= 0) return 'Expired';
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
     if (hours > 0) {
-        return `${hours}h ${minutes}m restantes`;
+        return `${hours}h ${minutes}m remaining`;
     } else {
-        return `${minutes}m restantes`;
+        return `${minutes}m remaining`;
     }
 }
 
@@ -124,7 +124,7 @@ function updateProgress(loaded, total) {
         const remaining = (total - loaded) / speed;
         const minutes = Math.floor(remaining / 60);
         const seconds = Math.floor(remaining % 60);
-        timeRemaining.textContent = `${minutes}:${seconds.toString().padStart(2, '0')} restantes`;
+        timeRemaining.textContent = `${minutes}:${seconds.toString().padStart(2, '0')} remaining`;
     }
 }
 
@@ -133,7 +133,13 @@ function handleFileSelection(file) {
     const fileInfo = document.getElementById('file-info');
     const fileName = document.getElementById('file-name');
     const fileSize = document.getElementById('file-size');
+    const maxFileSizeMB = window.maxFileSizeMB || 16;
     if (file) {
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            showToast(`File size exceeds the allowed limit (${maxFileSizeMB} MB)`, 'error');
+            clearFileSelection();
+            return;
+        }
         fileName.textContent = file.name;
         fileName.classList.add('truncate');
         fileName.setAttribute('data-tooltip', file.name);
@@ -176,34 +182,34 @@ async function loadUserFiles() {
                                 </div>
                                 <div class="flex-1 min-w-0">
                                     <p class="text-sm font-medium text-gray-900 dark:text-white truncate file-tooltip" data-tooltip="${file.original_filename}">${file.original_filename}</p>
-                                    <p class="text-xs text-gray-500 dark:text-gray-400">${formatFileSize(file.file_size)} • Subido ${formatDate(file.upload_date)}</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">${formatFileSize(file.file_size)} • Uploaded ${formatDate(file.upload_date)}</p>
                                 </div>
                             </div>
                         </div>
                         <div class="flex items-center space-x-2">
                             <div class="text-right">
-                                <p class="text-xs text-gray-500 dark:text-gray-400">${getTimeRemaining(file.expiration_date)}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 file-remaining-time" data-expiration="${file.expiration_date}">${getTimeRemaining(file.expiration_date)}</p>
                             </div>
                             <a href="${file.download_url}" class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 rounded-full transition-colors">
-                                Descargar
+                                Download
                             </a>
                             <button onclick="deleteFile('${file.id}')" class="inline-flex items-center px-3 py-1 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 rounded-full transition-colors">
-                                Eliminar
+                                Delete
                             </button>
                         </div>
                     </div>
                 </div>
             `).join('');
         }
-        // Tooltips personalizados para nombres truncados
         document.querySelectorAll('.file-tooltip').forEach(el => {
             el.addEventListener('mouseenter', function(e) {
                 showCustomTooltip(e.target, e.target.getAttribute('data-tooltip'));
             });
             el.addEventListener('mouseleave', hideCustomTooltip);
         });
+        updateRemainingTimes();
     } catch (error) {
-        showToast('Error al cargar archivos', 'error');
+        showToast('Error loading files', 'error');
     }
 }
 
@@ -232,13 +238,13 @@ async function confirmDeleteFile() {
         });
         const result = await response.json();
         if (result.success) {
-            showToast('Archivo eliminado correctamente');
+            showToast('File deleted successfully');
             loadUserFiles();
         } else {
-            showToast(result.error || 'Error al eliminar', 'error');
+            showToast(result.error || 'Error deleting file', 'error');
         }
     } catch (error) {
-        showToast('Error al eliminar: ' + error.message, 'error');
+        showToast('Error deleting file: ' + error.message, 'error');
     } finally {
         closeDeleteModal();
     }
@@ -277,12 +283,18 @@ function setupEventListeners() {
         const uploadBtn = document.getElementById('uploadBtn');
         const uploadBtnText = document.getElementById('uploadBtnText');
         const uploadProgress = document.getElementById('uploadProgress');
+        const maxFileSizeMB = window.maxFileSizeMB || 16;
         if (!file) {
-            showToast('Por favor selecciona un archivo', 'error');
+            showToast('Please select a file', 'error');
+            return;
+        }
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            showToast(`File size exceeds the allowed limit (${maxFileSizeMB} MB)`, 'error');
+            clearFileSelection();
             return;
         }
         uploadBtn.disabled = true;
-        uploadBtnText.textContent = 'Subiendo...';
+        uploadBtnText.textContent = 'Uploading...';
         uploadProgress.classList.remove('hidden');
         uploadStartTime = Date.now();
         uploadedBytes = 0;
@@ -301,27 +313,27 @@ function setupEventListeners() {
                 if (xhr.status === 200) {
                     const result = JSON.parse(xhr.responseText);
                     if (result.success) {
-                        showToast('Archivo subido correctamente!');
+                        showToast('File uploaded successfully!');
                         clearFileSelection();
                         loadUserFiles();
                     } else {
-                        showToast(result.error || 'Error al subir', 'error');
+                        showToast(result.error || 'Error uploading file', 'error');
                     }
                 } else {
-                    showToast('Error al subir', 'error');
+                    showToast('Error uploading file', 'error');
                 }
             });
             xhr.addEventListener('error', function() {
-                showToast('Error de red al subir', 'error');
+                showToast('Network error while uploading', 'error');
             });
             xhr.open('POST', '/upload');
             xhr.send(formData);
         } catch (error) {
-            showToast('Error al subir: ' + error.message, 'error');
+            showToast('Error uploading file: ' + error.message, 'error');
         } finally {
             setTimeout(() => {
                 uploadBtn.disabled = false;
-                uploadBtnText.textContent = 'Subir archivo';
+                uploadBtnText.textContent = 'Upload File';
                 uploadProgress.classList.add('hidden');
             }, 1000);
         }
@@ -335,5 +347,12 @@ document.addEventListener('DOMContentLoaded', function() {
     setupEventListeners();
     setupDeleteModalEvents();
     loadUserFiles();
-    setInterval(loadUserFiles, 30000);
-}); 
+    setInterval(updateRemainingTimes, 60000);
+});
+
+function updateRemainingTimes() {
+    document.querySelectorAll('.file-remaining-time').forEach(el => {
+        const expiration = el.getAttribute('data-expiration');
+        el.textContent = getTimeRemaining(expiration);
+    });
+} 

templates/index.html

@@ -37,7 +37,7 @@
     <div class="flex justify-between items-center mb-8">
         <div class="text-center flex-1">
             <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">HokoriTemp</h1>
-            <p class="text-gray-600 dark:text-gray-400">Sube archivos temporalmente con expiración automática</p>
+            <p class="text-gray-600 dark:text-gray-400">Temporarily upload files with automatic expiration</p>
         </div>
         
         <!-- Theme Toggle Button -->
@@ -169,13 +169,16 @@
 <!-- Modal de confirmación de eliminación -->
 <div id="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 hidden">
   <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm animate-fade-in">
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">¿Eliminar archivo?</h3>
-    <p class="text-gray-600 dark:text-gray-300 mb-6">¿Seguro que deseas eliminar este archivo? Esta acción no se puede deshacer.</p>
+    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete file?</h3>
+    <p class="text-gray-600 dark:text-gray-300 mb-6">Are you sure you want to delete this file? This action cannot be undone.</p>
     <div class="flex justify-end gap-3">
-      <button id="cancelDeleteBtn" class="px-4 py-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Cancelar</button>
-      <button id="confirmDeleteBtn" class="px-4 py-2 rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors">Eliminar</button>
+      <button id="cancelDeleteBtn" class="px-4 py-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Cancel</button>
+      <button id="confirmDeleteBtn" class="px-4 py-2 rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors">Delete</button>
     </div>
   </div>
 </div>
+<script>
+    window.maxFileSizeMB = {{ max_file_size }};
+</script>
 </body>
 </html>