Upload index.html

templates/index.html

@@ -92,10 +92,10 @@
 
     <div class="bg-white rounded-xl shadow-lg p-8">
       <!-- Zone de téléchargement -->
-      <form id="uploadForm" class="space-y-6">
+      <form id="uploadForm" class="space-y-6" enctype="multipart/form-data">
         <div class="relative">
           <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-3">
-            Sélectionnez votre document
+            Sélectionnez vos documents
           </label>
           <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
             <div class="space-y-2 text-center">
@@ -104,21 +104,20 @@
               </svg>
               <div class="text-sm text-gray-600">
                 <label for="imageInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
-                  <span>Télécharger un fichier</span>
-                  <input id="imageInput" name="image" type="file" class="sr-only" accept="image/*" required>
+                  <span>Télécharger des fichiers</span>
+                  <!-- Ajout de l'attribut "multiple" -->
+                  <input id="imageInput" name="image" type="file" class="sr-only" accept="image/*" multiple required>
                 </label>
               </div>
-              <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB</p>
+              <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB par fichier</p>
             </div>
           </div>
         </div>
 
         <!-- Prévisualisation -->
         <div id="previewContainer" class="hidden">
-          <p class="text-gray-700 font-medium mb-3">Aperçu du document :</p>
-          <div class="relative rounded-lg overflow-hidden bg-gray-100">
-            <img id="previewImage" src="#" alt="Aperçu" class="w-full max-h-80 object-contain">
-          </div>
+          <p class="text-gray-700 font-medium mb-3">Aperçu des documents :</p>
+          <div id="previews" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
         </div>
 
         <button type="submit" class="w-full bg-blue-600 text-white rounded-lg px-4 py-3 font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
@@ -166,7 +165,7 @@
     const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
     const previewContainer = document.getElementById('previewContainer');
-    const previewImage = document.getElementById('previewImage');
+    const previewsDiv = document.getElementById('previews');
     const loadingIndicator = document.getElementById('loading');
     const resultDiv = document.getElementById('result');
     const dissertationTab = document.getElementById('dissertationTab');
@@ -182,16 +181,23 @@
       langPrefix: 'language-',
     });
 
-    // Prévisualisation
+    // Prévisualisation pour plusieurs images
     imageInput.addEventListener('change', function() {
-      const file = this.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          previewImage.src = e.target.result;
-          previewContainer.classList.remove('hidden');
-        }
-        reader.readAsDataURL(file);
+      previewsDiv.innerHTML = ''; // Réinitialiser les prévisualisations
+      const files = this.files;
+      if (files && files.length > 0) {
+        previewContainer.classList.remove('hidden');
+        Array.from(files).forEach(file => {
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            img.alt = "Aperçu";
+            img.className = "w-full h-48 object-contain rounded-md border";
+            previewsDiv.appendChild(img);
+          }
+          reader.readAsDataURL(file);
+        });
       } else {
         previewContainer.classList.add('hidden');
       }