File size: 4,196 Bytes
2d3985c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DocumentUpload = ({ onDocumentUploaded, onDocumentAnalyzed }) => {
const [isUploading, setIsUploading] = useState(false);
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [error, setError] = useState(null);
const uploadDocument = async (file) => {
setIsUploading(true);
setError(null);
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});
if (!response.ok) {
let errorMessage = `Erreur HTTP ${response.status}`;
try {
const errorData = await response.json();
errorMessage = errorData.detail || errorMessage;
} catch (jsonError) {
// Si ce n'est pas du JSON, utiliser le texte brut
const errorText = await response.text();
errorMessage = errorText || errorMessage;
}
throw new Error(errorMessage);
}
const responseText = await response.text();
let result;
try {
result = JSON.parse(responseText);
} catch (jsonError) {
console.error('Réponse non-JSON reçue:', responseText);
throw new Error('Réponse invalide du serveur');
}
onDocumentUploaded(result);
// Démarrer automatiquement l'analyse
await analyzeDocument(result.document_id);
} catch (error) {
console.error('Erreur upload:', error);
setError(error.message);
} finally {
setIsUploading(false);
}
};
const analyzeDocument = async (documentId) => {
setIsAnalyzing(true);
setError(null);
try {
const response = await fetch(`/api/analyze/${documentId}`, {
method: 'POST',
});
if (!response.ok) {
let errorMessage = `Erreur HTTP ${response.status}`;
try {
const errorData = await response.json();
errorMessage = errorData.detail || errorMessage;
} catch (jsonError) {
// Si ce n'est pas du JSON, utiliser le texte brut
const errorText = await response.text();
errorMessage = errorText || errorMessage;
}
throw new Error(errorMessage);
}
const responseText = await response.text();
let result;
try {
result = JSON.parse(responseText);
} catch (jsonError) {
console.error('Réponse non-JSON reçue:', responseText);
throw new Error('Réponse invalide du serveur');
}
onDocumentAnalyzed(documentId);
} catch (error) {
console.error('Erreur analyse:', error);
setError(error.message);
} finally {
setIsAnalyzing(false);
}
};
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop: (acceptedFiles) => {
if (acceptedFiles.length > 0) {
uploadDocument(acceptedFiles[0]);
}
},
accept: {
'application/pdf': ['.pdf'],
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
'image/jpeg': ['.jpg', '.jpeg'],
'image/png': ['.png']
},
maxFiles: 1,
disabled: isUploading || isAnalyzing
});
return (
<div className="card">
<h2>Documents</h2>
{error && (
<div className="alert alert-error">
{error}
</div>
)}
<div
{...getRootProps()}
className={`upload-zone ${isDragActive ? 'drag-active' : ''}`}
>
<input {...getInputProps()} />
<div className="upload-icon">
{isUploading || isAnalyzing ? '⟳' : '+'}
</div>
<p className="upload-text">
{isUploading ? 'Upload...' :
isAnalyzing ? 'Analyse...' :
isDragActive ? 'Déposer ici' :
'Glisser ou cliquer'}
</p>
<p className="upload-hint">
PDF, DOCX, Images
</p>
{(isUploading || isAnalyzing) && (
<div className="loading"></div>
)}
</div>
</div>
);
};
export default DocumentUpload; |