174 lines
7.7 KiB
Plaintext
174 lines
7.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/public/css/upload.css">
|
|
<link rel="stylesheet" href="/public/css/styles.css">
|
|
<title>Upload</title>
|
|
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
</head>
|
|
|
|
<body class="light-mode">
|
|
<div class="container mt-4 flex-column">
|
|
<h1 class="mb-4">Upload de Fichiers</h1>
|
|
<form id="uploadForm" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label for="file">Sélectionnez un fichier :</label>
|
|
<input class="form-control" type="file" name="file" id="fileInput"
|
|
accept=".zip, .pdf, .txt, .jpg, .jpeg, .png, .gif, .iso, .mp4">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="expiryDate">Date d'expiration :</label>
|
|
<input class="form-control" type="date" name="expiryDate" id="expiryDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Mot de passe :</label>
|
|
<input class="form-control" type="password" name="password" id="password">
|
|
</div>
|
|
</form>
|
|
|
|
<div class="progress mt-4 bg-white shadow-sm form-control">
|
|
<div class="progress-bar" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="mt-2 progress-info">
|
|
<small class="text-muted" id="progressText">0%</small>
|
|
<small class="text-muted ml-3" id="estimatedTime">Temps estimé : Calcul en cours...</small>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button onclick="window.location.href='/dpanel/dashboard';" class="btn btn-primary mt-3 custom-btn">Retourner au Dashboard</button>
|
|
|
|
<div class="mx-auto">
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="darkModeSwitch">
|
|
<button id="themeSwitcher" class="btn btn-warning mt-3 ml-2">Changer de Thème</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" form="uploadForm" class="btn btn-primary mt-3 custom-btn">Envoyer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
const estimatedTime = document.getElementById('estimatedTime');
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const body = document.body;
|
|
|
|
document.getElementById('themeSwitcher').addEventListener('click', function () {
|
|
body.classList.toggle('dark-mode');
|
|
});
|
|
|
|
uploadForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
const file = fileInput.files[0];
|
|
|
|
if (!file) {
|
|
Swal.fire({
|
|
position: 'top',
|
|
icon: 'error',
|
|
title: 'Veuillez sélectionner \nun fichier avant de soumettre.',
|
|
showConfirmButton: false,
|
|
timer: 1800,
|
|
toast: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const expiryDate = document.getElementById('expiryDate').value;
|
|
const password = document.getElementById('password').value;
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('expiryDate', expiryDate);
|
|
formData.append('password', password);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/api/dpanel/upload', true);
|
|
|
|
xhr.upload.onprogress = (event) => {
|
|
if (event.lengthComputable) {
|
|
const percentage = Math.round((event.loaded / event.total) * 100);
|
|
const remainingTime = calculateRemainingTime(event.loaded, event.total, event.timeStamp);
|
|
updateProgress(percentage, remainingTime);
|
|
}
|
|
};
|
|
xhr.onload = () => {
|
|
if (xhr.status === 200) {
|
|
Swal.fire({
|
|
position: 'top',
|
|
icon: 'success',
|
|
title: 'Votre fichier a été téléchargé avec succès.',
|
|
showConfirmButton: false,
|
|
timer: 1800,
|
|
toast: true,
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
position: 'top',
|
|
icon: 'error',
|
|
title: 'Erreur lors du téléchargement du fichier.',
|
|
showConfirmButton: false,
|
|
timer: 1800,
|
|
toast: true,
|
|
});
|
|
console.error('Erreur lors du téléchargement du fichier.', xhr.status, xhr.responseText);
|
|
}
|
|
};
|
|
|
|
xhr.send(formData);
|
|
});
|
|
|
|
function calculateRemainingTime(loaded, total, timeStamp) {
|
|
const bytesPerSecond = loaded / (timeStamp / 1000);
|
|
const remainingBytes = total - loaded;
|
|
const remainingSeconds = Math.round(remainingBytes / bytesPerSecond);
|
|
|
|
if (remainingSeconds < 60) {
|
|
return remainingSeconds + ' seconde' + (remainingSeconds !== 1 ? 's' : '');
|
|
} else if (remainingSeconds < 3600) {
|
|
const remainingMinutes = Math.floor(remainingSeconds / 60);
|
|
const remainingSecondsPart = remainingSeconds % 60;
|
|
return remainingMinutes + ' minute' + (remainingMinutes !== 1 ? 's' : '') + ' et ' + remainingSecondsPart + ' seconde' + (remainingSecondsPart !== 1 ? 's' : '');
|
|
} else {
|
|
const remainingHours = Math.floor(remainingSeconds / 3600);
|
|
const remainingMinutes = Math.floor((remainingSeconds % 3600) / 60);
|
|
const remainingSecondsPart = remainingSeconds % 60;
|
|
return remainingHours + ' heure' + (remainingHours !== 1 ? 's' : '') + ' ' + remainingMinutes + ' minute' + (remainingMinutes !== 1 ? 's' : '') + ' et ' + remainingSecondsPart + ' seconde' + (remainingSecondsPart !== 1 ? 's' : '');
|
|
}
|
|
}
|
|
|
|
function updateProgress(percentage, timeRemaining) {
|
|
progressBar.style.width = percentage + '%';
|
|
progressBar.setAttribute('aria-valuenow', percentage);
|
|
progressText.textContent = percentage + '%';
|
|
estimatedTime.textContent = 'Temps estimé : ' + timeRemaining;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const darkModeSwitch = document.getElementById('darkModeSwitch');
|
|
const body = document.body;
|
|
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
body.classList.toggle('dark-mode', darkModeMediaQuery.matches);
|
|
|
|
darkModeMediaQuery.addListener(function (e) {
|
|
body.classList.toggle('dark-mode', e.matches);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
|
|
</html> |