Dinawo
aaff0ed4ea
All checks were successful
continuous-integration/drone/push Build is passing
We would like to apologize for the inconvenience caused and we would like to thank you for the quick report.
176 lines
7.8 KiB
Plaintext
176 lines
7.8 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 originalFileName = file.name;
|
|
|
|
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 ${originalFileName} 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> |