templates/partials/_document_upload.html.twig line 1

  1. {% set input_class = input_class|default('w-full px-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition') %}
  3. <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
  4.     {% for field, config in document_labels %}
  5.         {# Récupération du nom du fichier via le getter #}
  6.         {% set fileName = attribute(candidature, field) %}
  7.         {% set fileExists = fileName is not null and fileName != '' %}
  8.         {% set isImage = fileName matches '/\\.(jpg|jpeg|png|gif|webp|svg)$/i' %}
  9.         {# Déterminer l'URL du fichier existant - à adapter selon votre configuration #}
  10.         {% set fileUrl = asset('media/' ~ candidature.numero ~ '/' ~ fileName) %}
  11.         
  12.         <div class="transform transition-all duration-300 hover:-translate-y-1">
  13.             <div class="bg-white rounded-xl p-5 border-2 border-dashed border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 transition-all group cursor-pointer upload-area" data-field="{{ field }}">
  14.                 <div class="flex flex-col items-center text-center">
  15.                     <!-- Cadre d'aperçu (toujours visible) -->
  16.                     <div class="w-full mb-3 bg-slate-50 rounded-lg border border-slate-200 overflow-hidden" style="height: 120px;">
  17.                         <div class="w-full h-full flex items-center justify-center preview-container" id="preview-{{ field }}">
  18.                             {% if fileExists and isImage %}
  19.                                 <img src="{{ fileUrl }}" 
  20.                                      alt="Aperçu {{ config.text }}" 
  21.                                      class="w-full h-full object-contain p-1"
  22.                                      onerror="this.parentElement.innerHTML = '<i class=\'fas fa-exclamation-triangle text-red-500 text-2xl\'></i><span class=\'text-xs text-red-500 ml-1\'>Erreur</span>'">
  23.                             {% elseif fileExists and not isImage %}
  24.                                 {# Pour les PDF, afficher une icône avec lien #}
  25.                                 <div class="flex flex-col items-center justify-center text-slate-400">
  26.                                     <i class="fas fa-file-pdf text-4xl text-red-500 mb-1"></i>
  27.                                     <span class="text-xs">PDF</span>
  28.                                 </div>
  29.                             {% else %}
  30.                                 <div class="flex flex-col items-center justify-center text-slate-400">
  31.                                     <i class="fas fa-{{ config.icon }} text-3xl mb-1"></i>
  32.                                     <span class="text-xs">Aucun fichier</span>
  33.                                 </div>
  34.                             {% endif %}
  35.                         </div>
  36.                     </div>
  37.                     
  38.                 {{ form_widget(attribute(form, field), {'attr': {
  39.                     'class': 'hidden file-input',
  40.                     'data-field': field,
  41.                     'accept': config.accept,
  42.                     'data-max-size': '10485760',
  43.                     'data-current-file': fileName ?? ''
  44.                 }}) }}
  45.                 {# 10 Mo (à ajuster selon votre limite) #}
  46.                     
  47.                     <label class="block text-sm font-semibold text-slate-700 mb-1">
  48.                         {{ config.text }}
  49.                         <span class="text-xs font-normal text-slate-500 ml-1">({{ config.formats }})</span>
  50.                     </label>
  52.                     {# Lien de téléchargement pour le fichier existant (si PDF ou autre) #}
  53.                     {% if fileExists %}
  54.                         <div class="mt-4 w-full">
  55.                             <a href="{{ fileUrl }}" target="_blank" class="inline-flex items-center justify-center w-full sm:w-auto px-4 py-2.5 rounded-lg bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
  56.                                 <i class="fas fa-download mr-2"></i> Télécharger
  57.                             </a>
  58.                         </div>
  59.                     {% endif %}
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     {% endfor %}
  64. </div>
  66. <script>
  67. document.addEventListener('DOMContentLoaded', function() {
  68.     // Gestion du clic sur la zone d'upload
  69.     document.querySelectorAll('.upload-area').forEach(area => {
  70.         area.addEventListener('click', function(e) {
  71.             // Ne pas déclencher si on clique sur un lien (comme le téléchargement)
  72.             if (e.target.tagName === 'A' || e.target.closest('a')) {
  73.                 return;
  74.             }
  75.             
  76.             const field = this.dataset.field;
  77.             const fileInput = document.querySelector(`.file-input[data-field="${field}"]`);
  78.             if (fileInput) {
  79.                 fileInput.click();
  80.             }
  81.         });
  82.     });
  84.     // Gestion du changement de fichier
  85.     document.querySelectorAll('.file-input').forEach(input => {
  86.         input.addEventListener('change', function(e) {
  87.             const field = this.dataset.field;
  88.             const file = e.target.files[0];
  89.             
  90.             // Vérifier la taille du fichier
  91.             if (file && file.size > parseInt(this.dataset.maxSize)) {
  92.                 alert('Le fichier dépasse la limite de ' + (parseInt(this.dataset.maxSize) / 1048576) + ' Mo.');
  93.                 this.value = '';
  94.                 return;
  95.             }
  96.             
  97.             if (file) {
  98.                 // Mettre à jour l'aperçu
  99.                 const previewContainer = document.getElementById(`preview-${field}`);
  100.                 
  101.                 if (file.type.startsWith('image/')) {
  102.                     const reader = new FileReader();
  103.                     reader.onload = function(readerEvent) {
  104.                         previewContainer.innerHTML = `<img src="${readerEvent.target.result}" alt="Aperçu" class="w-full h-full object-contain p-1">`;
  105.                     }
  106.                     reader.readAsDataURL(file);
  107.                 } else {
  108.                     // Pour les PDF, afficher une icône PDF
  109.                     previewContainer.innerHTML = `
  110.                         <div class="flex flex-col items-center justify-center text-slate-400">
  111.                             <i class="fas fa-file-pdf text-4xl text-red-500 mb-1"></i>
  112.                             <span class="text-xs">PDF sélectionné</span>
  113.                         </div>
  114.                     `;
  115.                 }
  116.             }
  117.         });
  118.     });
  119. });
  120. </script>
  122. <style>
  123. .upload-area {
  124.     transition: all 0.3s ease;
  125.     cursor: pointer;
  126. }
  128. .upload-area:hover {
  129.     box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1);
  130. }
  132. .preview-container {
  133.     transition: all 0.2s ease;
  134. }
  136. .upload-area:hover .preview-container {
  137.     background-color: rgba(79, 70, 229, 0.05);
  138. }
  140. /* Style pour le cadre d'aperçu */
  141. .bg-slate-50 {
  142.     background-color: #f8fafc;
  143. }
  145. .object-contain {
  146.     object-fit: contain;
  147. }
  148. </style>