676 lines
23 KiB
Plaintext
676 lines
23 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Upload de Fichiers</title>
|
|
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<style>
|
|
body {
|
|
background-image: url('<%= user.wallpaper %>');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
}
|
|
|
|
/* Ajout des styles pour la notification qui s'intègrent au design existant */
|
|
.notification-container {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 1100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.notification {
|
|
display: flex;
|
|
align-items: center;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
padding: 1rem;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
transform: translateX(150%);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
max-width: 350px;
|
|
}
|
|
|
|
.notification.show {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.notification-icon {
|
|
margin-right: 0.75rem;
|
|
font-size: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notification.success .notification-icon {
|
|
color: #10B981;
|
|
}
|
|
|
|
.notification.error .notification-icon {
|
|
color: #EF4444;
|
|
}
|
|
|
|
/* Design original pour toutes les autres classes */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.container {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.form-container {
|
|
background-color: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: hsl(var(--secondary));
|
|
color: hsl(var(--secondary-foreground));
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#themeSwitcher {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
}
|
|
|
|
.animate {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.icon-spacing {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Modal styles gardant le même design */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(5px);
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-content {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
padding: 2rem;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
margin: 2rem auto;
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modal.show .modal-content {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Styles des étapes avec le design original */
|
|
.step {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
opacity: 0.7;
|
|
transition: all 0.3s ease;
|
|
background-color: hsl(var(--card));
|
|
}
|
|
|
|
.step.active {
|
|
opacity: 1;
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 4px;
|
|
background-color: hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background-color: hsl(var(--primary));
|
|
width: 0;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.step.completed .progress-bar-fill {
|
|
background-color: #10B981;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="animate dark">
|
|
<button id="themeSwitcher" class="btn btn-secondary p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Notification Container -->
|
|
<div class="notification-container"></div>
|
|
|
|
<div id="app" class="min-h-screen flex items-center justify-center">
|
|
<div class="container mt-8">
|
|
<h1 class="text-3xl font-semibold mb-6 text-center animate">Upload de Fichiers</h1>
|
|
|
|
<div class="form-container">
|
|
<form id="uploadForm">
|
|
<div class="form-group">
|
|
<label for="file" class="block mb-2">Sélectionnez un fichier :</label>
|
|
<input type="file" name="file" id="fileInput"
|
|
accept=".zip, .pdf, .txt, .jpg, .jpeg, .png, .gif, .iso, .mp4"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="expiryDate" class="block mb-2">Date d'expiration :</label>
|
|
<input type="date" name="expiryDate" id="expiryDate" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password" class="block mb-2">Mot de passe :</label>
|
|
<input type="password" name="password" id="password" class="form-control">
|
|
</div>
|
|
|
|
<button type="submit" id="uploadButton" class="btn btn-primary w-full py-2 mt-4">
|
|
<i class="fas fa-upload icon-spacing"></i>
|
|
Téléverser
|
|
</button>
|
|
</form>
|
|
<div class="text-center">
|
|
<button onclick="window.location.href='/dpanel/dashboard';"
|
|
class="btn btn-secondary w-full py-2 mt-4">
|
|
<i class="fas fa-arrow-left icon-spacing"></i>
|
|
Retour au Dashboard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Progress Modal -->
|
|
<div id="uploadModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 class="text-2xl font-semibold mb-6">Progression détaillée</h2>
|
|
|
|
<!-- Upload step -->
|
|
<div class="step" id="uploadStep">
|
|
<div class="step-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</div>
|
|
<div class="progress-details">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="font-medium">Téléchargement</span>
|
|
<span class="upload-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-fill"></div>
|
|
</div>
|
|
<div class="eta">En attente...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chunks step -->
|
|
<div class="step" id="chunksStep">
|
|
<div class="step-icon">
|
|
<i class="fas fa-puzzle-piece"></i>
|
|
</div>
|
|
<div class="progress-details">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="font-medium">Création des chunks</span>
|
|
<span class="chunks-percentage">En attente</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-fill"></div>
|
|
</div>
|
|
<div class="eta">En attente...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compilation step -->
|
|
<div class="step" id="compilationStep">
|
|
<div class="step-icon">
|
|
<i class="fas fa-cogs"></i>
|
|
</div>
|
|
<div class="progress-details">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="font-medium">Compilation finale</span>
|
|
<span class="compilation-percentage">En attente</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-fill"></div>
|
|
</div>
|
|
<div class="eta">En attente...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Constants and global variables
|
|
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
|
|
const modal = document.getElementById('uploadModal');
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
// Theme management
|
|
const themeSwitcher = document.getElementById('themeSwitcher');
|
|
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
} else {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}
|
|
|
|
// Initialize theme
|
|
const savedTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light');
|
|
setTheme(savedTheme);
|
|
|
|
themeSwitcher.addEventListener('click', () => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
|
});
|
|
|
|
// Utility functions for file handling
|
|
async function generateSecurityCode() {
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
|
let code = '';
|
|
for (let i = 0; i < 6; i++) {
|
|
code += characters.charAt(Math.floor(Math.random() * characters.length));
|
|
}
|
|
return code;
|
|
}
|
|
|
|
async function formatSecureFileName(originalFileName) {
|
|
// Format: YYYYMMDD_SECURITY_originalname.ext
|
|
const now = new Date();
|
|
const date = now.toISOString().slice(0,10).replace(/-/g, '');
|
|
const securityCode = await generateSecurityCode();
|
|
|
|
const lastDot = originalFileName.lastIndexOf('.');
|
|
const fileName = lastDot !== -1 ? originalFileName.substring(0, lastDot) : originalFileName;
|
|
const fileExt = lastDot !== -1 ? originalFileName.substring(lastDot) : '';
|
|
|
|
return `${date}_${securityCode}_${fileName}${fileExt}`;
|
|
}
|
|
|
|
// Notification system
|
|
function showNotification(type, title, message = '') {
|
|
const container = document.querySelector('.notification-container');
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification ${type}`;
|
|
|
|
notification.innerHTML = `
|
|
<div class="notification-icon">
|
|
<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-times-circle'}"></i>
|
|
</div>
|
|
<div class="notification-content">
|
|
<div class="notification-title">${title}</div>
|
|
${message ? `<div class="notification-message">${message}</div>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
// Auto-remove previous notifications if more than 3
|
|
const notifications = container.querySelectorAll('.notification');
|
|
if (notifications.length >= 3) {
|
|
notifications[0].remove();
|
|
}
|
|
|
|
container.appendChild(notification);
|
|
requestAnimationFrame(() => {
|
|
notification.classList.add('show');
|
|
});
|
|
|
|
setTimeout(() => {
|
|
notification.classList.remove('show');
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// Progress handling
|
|
function updateProgress(step, progress, eta = '') {
|
|
const progressBar = step.querySelector('.progress-bar-fill');
|
|
const percentage = step.querySelector('[class$="-percentage"]');
|
|
const etaElement = step.querySelector('.eta');
|
|
|
|
progressBar.style.width = `${progress}%`;
|
|
percentage.textContent = `${Math.round(progress)}%`;
|
|
if (eta) etaElement.textContent = eta;
|
|
}
|
|
|
|
function calculateETA(loaded, total, startTime) {
|
|
const elapsed = (Date.now() - startTime) / 1000;
|
|
const rate = loaded / elapsed;
|
|
const remaining = (total - loaded) / rate;
|
|
const minutes = Math.floor(remaining / 60);
|
|
const seconds = Math.round(remaining % 60);
|
|
return `Temps restant estimé: ${minutes}min ${seconds}s`;
|
|
}
|
|
|
|
// Modal management
|
|
function showModal() {
|
|
modal.style.display = 'block';
|
|
setTimeout(() => {
|
|
modal.classList.add('show');
|
|
modal.querySelector('.modal-content').style.opacity = '1';
|
|
}, 10);
|
|
}
|
|
|
|
function hideModal() {
|
|
modal.classList.remove('show');
|
|
setTimeout(() => {
|
|
modal.style.display = 'none';
|
|
resetSteps();
|
|
}, 300);
|
|
}
|
|
|
|
function resetSteps() {
|
|
document.querySelectorAll('.step').forEach(step => {
|
|
step.classList.remove('active', 'completed');
|
|
const progressBar = step.querySelector('.progress-bar-fill');
|
|
const percentage = step.querySelector('[class$="-percentage"]');
|
|
const eta = step.querySelector('.eta');
|
|
|
|
progressBar.style.width = '0%';
|
|
if (percentage) percentage.textContent = 'En attente';
|
|
if (eta) eta.textContent = 'En attente...';
|
|
});
|
|
}
|
|
|
|
// Main upload function
|
|
async function uploadFile(file) {
|
|
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
|
|
let uploadedChunks = 0;
|
|
let uploadedBytes = 0;
|
|
const startTime = Date.now();
|
|
|
|
// Générer le nom de fichier sécurisé
|
|
const secureFileName = await formatSecureFileName(file.name);
|
|
|
|
showModal();
|
|
|
|
const uploadStep = document.getElementById('uploadStep');
|
|
const chunksStep = document.getElementById('chunksStep');
|
|
const compilationStep = document.getElementById('compilationStep');
|
|
|
|
try {
|
|
uploadStep.classList.add('active');
|
|
|
|
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
|
|
const start = chunkIndex * CHUNK_SIZE;
|
|
const end = Math.min(start + CHUNK_SIZE, file.size);
|
|
const chunk = file.slice(start, end);
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', chunk);
|
|
formData.append('chunkIndex', chunkIndex);
|
|
formData.append('totalChunks', totalChunks);
|
|
formData.append('filename', secureFileName);
|
|
formData.append('originalFilename', file.name);
|
|
|
|
// Ajoute la date d'expiration et le mot de passe seulement s'ils sont renseignés
|
|
const expiryDate = document.getElementById('expiryDate').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (expiryDate) {
|
|
formData.append('expiryDate', expiryDate);
|
|
}
|
|
if (password) {
|
|
formData.append('password', password);
|
|
}
|
|
|
|
uploadedBytes += chunk.size;
|
|
const uploadProgress = (uploadedBytes / file.size) * 100;
|
|
|
|
updateProgress(uploadStep, uploadProgress,
|
|
calculateETA(uploadedBytes, file.size, startTime));
|
|
|
|
try {
|
|
const response = await fetch('/api/dpanel/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Upload failed: ${response.statusText}`);
|
|
}
|
|
|
|
uploadedChunks++;
|
|
|
|
// Mise à jour de la progression des chunks
|
|
const chunksProgress = (uploadedChunks / totalChunks) * 100;
|
|
updateProgress(chunksStep, chunksProgress,
|
|
`Traitement des chunks: ${uploadedChunks}/${totalChunks}`);
|
|
} catch (error) {
|
|
console.error('Chunk upload failed:', error);
|
|
throw new Error(`Échec de l'upload du chunk ${chunkIndex + 1}/${totalChunks}`);
|
|
}
|
|
}
|
|
|
|
// Upload terminé, passer à la compilation
|
|
uploadStep.classList.remove('active');
|
|
uploadStep.classList.add('completed');
|
|
chunksStep.classList.add('completed');
|
|
compilationStep.classList.add('active');
|
|
|
|
// Simulation de la compilation (peut être remplacé par un vrai appel API)
|
|
let compilationProgress = 0;
|
|
const compilationInterval = setInterval(() => {
|
|
compilationProgress += 5;
|
|
updateProgress(compilationStep, compilationProgress,
|
|
'Assemblage du fichier final...');
|
|
|
|
if (compilationProgress >= 100) {
|
|
clearInterval(compilationInterval);
|
|
compilationStep.classList.remove('active');
|
|
compilationStep.classList.add('completed');
|
|
|
|
setTimeout(() => {
|
|
showNotification('success', 'Fichier téléchargé avec succès !',
|
|
`Nom sécurisé : ${secureFileName}`);
|
|
hideModal();
|
|
uploadForm.reset();
|
|
}, 1000);
|
|
}
|
|
}, 100);
|
|
|
|
} catch (error) {
|
|
console.error('Upload failed:', error);
|
|
hideModal();
|
|
showNotification('error', 'Échec du téléchargement', error.message);
|
|
}
|
|
}
|
|
|
|
// Event Listeners
|
|
uploadForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const file = fileInput.files[0];
|
|
if (!file) {
|
|
showNotification('error', 'Aucun fichier sélectionné');
|
|
return;
|
|
}
|
|
|
|
// Vérification du mot de passe uniquement s'il est renseigné
|
|
const password = document.getElementById('password').value;
|
|
if (password && password.length < 6) {
|
|
showNotification('error', 'Le mot de passe doit contenir au moins 6 caractères');
|
|
return;
|
|
}
|
|
|
|
await uploadFile(file);
|
|
});
|
|
|
|
// File Input Change Handler
|
|
fileInput.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
// Vérification de la taille du fichier (1GB = 1024 * 1024 * 1024 bytes)
|
|
const MAX_FILE_SIZE = 1024 * 1024 * 1024; // 1GB en bytes
|
|
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
showNotification('error', 'Fichier trop volumineux',
|
|
'Le support des fichiers de plus de 1GB est actuellement en développement. Veuillez réessayer plus tard.');
|
|
fileInput.value = ''; // Reset l'input file
|
|
return;
|
|
}
|
|
|
|
// Afficher le nom du fichier sélectionné si la taille est acceptable
|
|
const fileName = file.name;
|
|
showNotification('success', 'Fichier sélectionné', fileName);
|
|
}
|
|
});
|
|
|
|
// Prevent form submission on enter key
|
|
uploadForm.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |