6ae698de76
- Ajout du composant FilePreview avec iframe et viewer PDF intégré - Correction du mapping des données API (document_id -> id) - Ajout de previewUrl avec URL.createObjectURL pour l'aperçu - Interface modale avec navigation et zoom - Support des fichiers PDF avec affichage réel du contenu - Correction de l'affichage de la taille des fichiers - Ajout des dépendances react-pdf-js pour l'aperçu PDF - Scripts de démarrage et fichiers de test - Documentation complète de la fonctionnalité d'aperçu
111 lines
4.0 KiB
HTML
111 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Upload 4NK_IA_front</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.file-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.file-list li {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
.instructions {
|
|
background: #e3f2fd;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Test de la fonctionnalité d'aperçu - 4NK_IA_front</h1>
|
|
|
|
<div class="instructions">
|
|
<h3>📋 Instructions de test :</h3>
|
|
<ol>
|
|
<li>Ouvrez l'application frontend : <a href="http://localhost:5173" target="_blank">http://localhost:5173</a></li>
|
|
<li>Allez dans l'onglet "Upload"</li>
|
|
<li>Testez l'upload avec les fichiers de test ci-dessous</li>
|
|
<li>Cliquez sur "Aperçu" pour voir le contenu du document</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📁 Fichiers de test disponibles</h2>
|
|
<ul class="file-list">
|
|
<li>
|
|
<strong>sample.txt</strong> - Document texte avec acte de vente
|
|
<br><small>Chemin : test-files/sample.txt</small>
|
|
</li>
|
|
<li>
|
|
<strong>sample.md</strong> - Document Markdown avec acte de vente
|
|
<br><small>Chemin : test-files/sample.md</small>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Types de fichiers supportés</h2>
|
|
<ul>
|
|
<li><strong>PDF</strong> (.pdf) - Aperçu avec contenu simulé</li>
|
|
<li><strong>Images</strong> (.png, .jpg, .jpeg, .tiff) - Aperçu d'image</li>
|
|
<li><strong>Texte</strong> (.txt) - Contenu textuel affiché</li>
|
|
<li><strong>Markdown</strong> (.md) - Contenu Markdown formaté</li>
|
|
<li><strong>Word</strong> (.docx) - Aperçu de document Word</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✨ Fonctionnalités d'aperçu</h2>
|
|
<ul>
|
|
<li><strong>Affichage du contenu</strong> - Aperçu du contenu du document</li>
|
|
<li><strong>Informations du fichier</strong> - Type, taille, statut</li>
|
|
<li><strong>Bouton de téléchargement</strong> - Télécharger le document</li>
|
|
<li><strong>Interface responsive</strong> - Adaptation mobile/desktop</li>
|
|
<li><strong>Gestion d'erreurs</strong> - Messages d'erreur appropriés</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 Améliorations apportées</h2>
|
|
<ul>
|
|
<li>✅ Support des formats TXT, MD, DOCX en plus de PDF et images</li>
|
|
<li>✅ Composant FilePreview dédié pour l'aperçu</li>
|
|
<li>✅ Interface utilisateur améliorée avec grille responsive</li>
|
|
<li>✅ Bouton "Aperçu" pour chaque document uploadé</li>
|
|
<li>✅ Affichage du contenu simulé selon le type de fichier</li>
|
|
<li>✅ Gestion des états de chargement et d'erreur</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h3>🚀 Prochaines étapes :</h3>
|
|
<p>Pour une implémentation complète, il faudrait :</p>
|
|
<ul>
|
|
<li>Intégrer avec l'API backend pour récupérer le vrai contenu</li>
|
|
<li>Ajouter un viewer PDF intégré</li>
|
|
<li>Implémenter l'extraction de texte pour les images</li>
|
|
<li>Ajouter la conversion de documents Word</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|