nacim/Anonyme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

glisser

Browse Source
This commit is contained in:
nBiqoz
2025-08-09 15:23:20 +02:00
parent e4c735cdc4
commit 74e56c956c
3 changed files with 209 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/components/FileUploadComponent.tsx
View File

@@ -10,6 +10,7 @@ import { SampleTextComponent } from "./SampleTextComponent";
import { SupportedDataTypes } from "./SupportedDataTypes";
import { AnonymizationInterface } from "./AnonymizationInterface";
import { highlightEntities } from "../utils/highlightEntities";
import { useState } from "react";
interface EntityMapping {
originalValue: string;
@@ -57,6 +58,86 @@ export const FileUploadComponent = ({
setIsExampleLoaded,
entityMappings, // Ajouter cette prop ici
}: FileUploadComponentProps) => {
const [isDragOver, setIsDragOver] = useState(false);
// Fonction pour valider le type de fichier
const isValidFileType = (file: File) => {
const allowedTypes = ["text/plain", "application/pdf"];
const allowedExtensions = [".txt", ".pdf"];
return (
allowedTypes.includes(file.type) ||
allowedExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))
);
};
// Gestionnaires de glisser-déposer
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragEnter = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragOver(true);
};
const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
// Vérifier si on quitte vraiment la zone de drop
if (!e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragOver(false);
}
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragOver(false);
const files = Array.from(e.dataTransfer.files);
if (files.length > 0) {
const file = files[0];
// Vérifier le type de fichier
if (!isValidFileType(file)) {
alert(
"Type de fichier non supporté. Veuillez sélectionner un fichier PDF ou TXT."
);
return;
}
// Vérifier la taille (5MB max)
if (file.size > 5 * 1024 * 1024) {
alert("Le fichier est trop volumineux. Taille maximale : 5MB.");
return;
}
const syntheticEvent = {
target: { files: [file] },
} as unknown as React.ChangeEvent<HTMLInputElement>;
handleFileChange(syntheticEvent);
}
};
// Gestionnaire de changement de fichier modifié pour valider le type
const handleFileChangeWithValidation = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const file = e.target.files?.[0];
if (file && !isValidFileType(file)) {
alert(
"Type de fichier non supporté. Veuillez sélectionner un fichier PDF ou TXT."
);
e.target.value = ""; // Reset l'input
return;
}
handleFileChange(e);
};
// On passe en preview seulement si :
// 1. Un fichier est uploadé OU
// 2. On a un résultat d'anonymisation
@@ -144,7 +225,7 @@ export const FileUploadComponent = ({
<div className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words overflow-wrap-anywhere leading-relaxed">
{highlightEntities(
outputText || "Aucun contenu à afficher",
entityMappings // Ajouter les mappings ici
entityMappings
)}
</div>
</div>
@@ -410,30 +491,59 @@ export const FileUploadComponent = ({
</div>
{/* Colonne droite - Zone upload */}
<div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
<div
className={`border-2 border-dashed rounded-xl transition-all duration-300 ${
isDragOver
? "border-[#f7ab6e] bg-[#f7ab6e]/10 scale-105"
: "border-[#092727] bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030]"
}`}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<label className="flex flex-col items-center justify-center cursor-pointer group p-3 sm:p-4 h-full min-h-[200px]">
{/* Upload Icon */}
<div className="w-10 h-10 bg-[#f7ab6e] rounded-full flex items-center justify-center mb-3 transition-colors duration-300">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center mb-3 transition-colors duration-300 ${
isDragOver ? "bg-[#f7ab6e] scale-110" : "bg-[#f7ab6e]"
}`}
>
<Upload className="h-5 w-5 text-white" />
</div>
{/* Titre */}
<h3 className="text-lg font-semibold text-[#092727] mb-1 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
Déposez votre fichier ici
<h3
className={`text-lg font-semibold mb-1 transition-colors duration-300 text-center ${
isDragOver
? "text-[#f7ab6e]"
: "text-[#092727] group-hover:text-[#0a3030]"
}`}
>
{isDragOver
? "Déposez votre fichier"
: "Déposez votre fichier ici"}
</h3>
<p className="text-sm text-[#092727] opacity-80 mb-3 text-center group-hover:opacity-90 transition-opacity duration-300">
<p
className={`text-sm mb-3 text-center transition-opacity duration-300 ${
isDragOver
? "text-[#f7ab6e] opacity-90"
: "text-[#092727] opacity-80 group-hover:opacity-90"
}`}
>
ou cliquez pour sélectionner
</p>
{/* File Info */}
<div className="flex s items-center gap-1 text-xs text-[#092727] opacity-60">
<span>📄 Fichiers TXT, PDF</span> - <span>Max 5MB</span>
<div className="flex items-center gap-1 text-xs text-[#092727] opacity-60">
<span>📄 Fichiers PDF et TXT uniquement</span> -{" "}
<span>Max 5MB</span>
</div>
{/* Hidden Input */}
<input
type="file"
onChange={handleFileChange}
onChange={handleFileChangeWithValidation}
accept=".txt,.pdf"
className="hidden"
/>