a
This commit is contained in:
parent
ebebbeb2a5
commit
b93ffcc928
|
|
@ -232,142 +232,132 @@
|
|||
</form>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const ALLOWED_EXTENSIONS = ['bmp', 'gif', 'jpeg', 'jpg', 'pdf', 'png'];
|
||||
const MAX_SIZE_MB = 10;
|
||||
const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
|
||||
(function () {
|
||||
const ALLOWED_EXTENSIONS = ['bmp', 'gif', 'jpeg', 'jpg', 'pdf', 'png'];
|
||||
const MAX_SIZE_MB = 10;
|
||||
const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
|
||||
|
||||
const form = document.getElementById('form-upload');
|
||||
const fileInput = document.getElementById('fichier_upload');
|
||||
const btnUpload = document.getElementById('btn-upload');
|
||||
const feedback = document.getElementById('upload-feedback');
|
||||
const progressBar = document.getElementById('upload-progress-bar');
|
||||
const progressCtn = document.getElementById('upload-progress-container');
|
||||
const form = document.getElementById('form-upload');
|
||||
const fileInput = document.getElementById('fichier_upload');
|
||||
const btnUpload = document.getElementById('btn-upload');
|
||||
const feedback = document.getElementById('upload-feedback');
|
||||
const progressBar = document.getElementById('upload-progress-bar');
|
||||
const progressCtn = document.getElementById('upload-progress-container');
|
||||
|
||||
/* ---------- Validation côté client ---------- */
|
||||
function validateFile(file) {
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (!ALLOWED_EXTENSIONS.includes(ext)) {
|
||||
return `Format non accepté. Formats autorisés : ${ALLOWED_EXTENSIONS.join(', ')}.`;
|
||||
}
|
||||
if (file.size > MAX_SIZE_BYTES) {
|
||||
return `Fichier trop volumineux (max ${MAX_SIZE_MB} Mo).`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
fileInput.classList.add('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = msg;
|
||||
feedback.innerHTML = '';
|
||||
}
|
||||
|
||||
function clearError() {
|
||||
fileInput.classList.remove('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = '';
|
||||
}
|
||||
|
||||
function setFeedback(type, msg) {
|
||||
alert(msg);
|
||||
feedback.innerHTML = `
|
||||
<div class="alert alert-${type} py-2">
|
||||
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
|
||||
${msg}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function setButtonLoading(loading) {
|
||||
btnUpload.disabled = loading;
|
||||
btnUpload.innerHTML = loading
|
||||
? '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span><?= _("Envoi en cours...") ?>'
|
||||
: '<i class="fas fa-upload me-2"></i><?= _("Envoyer") ?>';
|
||||
}
|
||||
|
||||
function setProgress(pct) {
|
||||
progressBar.style.width = pct + '%';
|
||||
progressBar.textContent = pct + '%';
|
||||
progressBar.setAttribute('aria-valuenow', pct);
|
||||
}
|
||||
|
||||
/* ---------- Soumission AJAX ---------- */
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
feedback.innerHTML = '';
|
||||
|
||||
const file = fileInput.files[0];
|
||||
if (!file) {
|
||||
showError('Veuillez sélectionner un fichier.');
|
||||
return;
|
||||
/* ---------- Validation côté client ---------- */
|
||||
function validateFile(file) {
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (!ALLOWED_EXTENSIONS.includes(ext)) {
|
||||
return `Format non accepté. Formats autorisés : ${ALLOWED_EXTENSIONS.join(', ')}.`;
|
||||
}
|
||||
if (file.size > MAX_SIZE_BYTES) {
|
||||
return `Fichier trop volumineux (max ${MAX_SIZE_MB} Mo).`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const validationError = validateFile(file);
|
||||
if (validationError) {
|
||||
showError(validationError);
|
||||
return;
|
||||
function showError(msg) {
|
||||
fileInput.classList.add('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = msg;
|
||||
feedback.innerHTML = '';
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const xhr = new XMLHttpRequest();
|
||||
function clearError() {
|
||||
fileInput.classList.remove('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = '';
|
||||
}
|
||||
|
||||
/* Progression */
|
||||
xhr.upload.addEventListener('progress', function (e) {
|
||||
if (e.lengthComputable) {
|
||||
progressCtn.classList.remove('d-none');
|
||||
setProgress(Math.round((e.loaded / e.total) * 100));
|
||||
function setFeedback(type, msg) {
|
||||
alert(msg);
|
||||
feedback.innerHTML = `
|
||||
<div class="alert alert-${type} py-2">
|
||||
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
|
||||
${msg}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function setButtonLoading(loading) {
|
||||
btnUpload.disabled = loading;
|
||||
btnUpload.innerHTML = loading
|
||||
? '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span><?= _("Envoi en cours...") ?>'
|
||||
: '<i class="fas fa-upload me-2"></i><?= _("Envoyer") ?>';
|
||||
}
|
||||
|
||||
function setProgress(pct) {
|
||||
progressBar.style.width = pct + '%';
|
||||
progressBar.textContent = pct + '%';
|
||||
progressBar.setAttribute('aria-valuenow', pct);
|
||||
}
|
||||
|
||||
/* ---------- Soumission AJAX ---------- */
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
feedback.innerHTML = '';
|
||||
|
||||
const file = fileInput.files[0];
|
||||
if (!file) {
|
||||
showError('Veuillez sélectionner un fichier.');
|
||||
return;
|
||||
}
|
||||
|
||||
const validationError = validateFile(file);
|
||||
if (validationError) {
|
||||
showError(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
/* Progression */
|
||||
xhr.upload.addEventListener('progress', function (e) {
|
||||
if (e.lengthComputable) {
|
||||
progressCtn.classList.remove('d-none');
|
||||
setProgress(Math.round((e.loaded / e.total) * 100));
|
||||
}
|
||||
});
|
||||
|
||||
/* Succès */
|
||||
xhr.addEventListener('load', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setProgress(0);
|
||||
|
||||
alert(xhr.status);
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
setFeedback('success', '<?= _("Fichier envoyé avec succès.") ?>');
|
||||
form.reset();
|
||||
clearError();
|
||||
// actualiser_remboursement();
|
||||
} else {
|
||||
setFeedback('danger', `<?= _("Erreur lors de l'envoi.") ?> (HTTP ${xhr.status})`);
|
||||
}
|
||||
});
|
||||
|
||||
/* Erreur réseau */
|
||||
xhr.addEventListener('error', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setFeedback('danger', '<?= _("Erreur réseau. Veuillez réessayer.") ?>');
|
||||
});
|
||||
|
||||
xhr.open('POST', 'Remboursement/uploadged');
|
||||
setButtonLoading(true);
|
||||
xhr.send(formData);
|
||||
});
|
||||
|
||||
/* Validation à la sélection du fichier */
|
||||
fileInput.addEventListener('change', function () {
|
||||
clearError();
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const err = validateFile(file);
|
||||
if (err) showError(err);
|
||||
}
|
||||
});
|
||||
|
||||
/* Succès */
|
||||
xhr.addEventListener('load', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setProgress(0);
|
||||
|
||||
alert(xhr.status);
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
setFeedback('success', '<?= _("Fichier envoyé avec succès.") ?>');
|
||||
form.reset();
|
||||
clearError();
|
||||
// actualiser_remboursement();
|
||||
} else {
|
||||
setFeedback('danger', `<?= _("Erreur lors de l'envoi.") ?> (HTTP ${xhr.status})`);
|
||||
}
|
||||
});
|
||||
|
||||
/* Erreur réseau */
|
||||
xhr.addEventListener('error', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setFeedback('danger', '<?= _("Erreur réseau. Veuillez réessayer.") ?>');
|
||||
});
|
||||
|
||||
xhr.open('POST', 'AAARemboursement/uploadged');
|
||||
setButtonLoading(true);
|
||||
xhr.send(formData);
|
||||
|
||||
/*
|
||||
const v_url = 'AAARemboursement/uploadged';
|
||||
const response = await fetch(v_url, { method: "POST", body: formData });
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log("✅ Succès :", data);
|
||||
}
|
||||
*/
|
||||
alert("Après send");
|
||||
});
|
||||
|
||||
/* Validation à la sélection du fichier */
|
||||
fileInput.addEventListener('change', function () {
|
||||
clearError();
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const err = validateFile(file);
|
||||
if (err) showError(err);
|
||||
}
|
||||
});
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
<!-- FIN CLAUDE -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user