fix(frontend): URL-encode file paths in PDF viewer + add page error handling
- Encode filePath with encodeURIComponent to handle spaces/special chars - Add page-level error handling in PdfViewerPage for better diagnostics - Show PDF URL in error message to aid debugging
This commit is contained in:
parent
7a89651512
commit
e34067fe9c
|
|
@ -41,7 +41,7 @@ export const deleteChunk = async (chunkId: string): Promise<DeleteResponse> => {
|
|||
|
||||
export const getChunkPdfUrl = (filePath: string): string => {
|
||||
const baseUrl: string = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000/api/v1'
|
||||
return `${baseUrl}/chunks/${filePath}/pdf`
|
||||
return `${baseUrl}/chunks/${encodeURIComponent(filePath)}/pdf`
|
||||
}
|
||||
|
||||
export const getPdfViewerUrl = (filePath: string, page?: number, title?: string): string => {
|
||||
|
|
|
|||
|
|
@ -20,16 +20,22 @@ export const PdfViewerPage: React.FC = () => {
|
|||
const [pageNumber, setPageNumber] = useState<number>(initialPage)
|
||||
const [zoomIndex, setZoomIndex] = useState<number>(DEFAULT_ZOOM_INDEX)
|
||||
const [loadError, setLoadError] = useState<string | null>(null)
|
||||
const [pageError, setPageError] = useState<string | null>(null)
|
||||
|
||||
const onDocumentLoadSuccess = useCallback(({ numPages: total }: { numPages: number }) => {
|
||||
setNumPages(total)
|
||||
setLoadError(null)
|
||||
setPageError(null)
|
||||
}, [])
|
||||
|
||||
const onDocumentLoadError = useCallback((error: Error) => {
|
||||
setLoadError(error.message)
|
||||
}, [])
|
||||
|
||||
const onPageLoadError = useCallback((error: Error) => {
|
||||
setPageError(error.message)
|
||||
}, [])
|
||||
|
||||
const goToPrevPage = () => setPageNumber((prev) => Math.max(1, prev - 1))
|
||||
const goToNextPage = () => setPageNumber((prev) => Math.min(numPages, prev + 1))
|
||||
const zoomIn = () => setZoomIndex((prev) => Math.min(ZOOM_LEVELS.length - 1, prev + 1))
|
||||
|
|
@ -96,7 +102,10 @@ export const PdfViewerPage: React.FC = () => {
|
|||
<div className="flex-1 overflow-auto flex justify-center p-4">
|
||||
{loadError ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-red-600">Failed to load PDF: {loadError}</p>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-red-600">Failed to load PDF: {loadError}</p>
|
||||
<p className="text-sm text-gray-500">URL: {pdfUrl}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Document
|
||||
|
|
@ -110,6 +119,8 @@ export const PdfViewerPage: React.FC = () => {
|
|||
scale={ZOOM_LEVELS[zoomIndex]}
|
||||
renderTextLayer={true}
|
||||
renderAnnotationLayer={true}
|
||||
onLoadError={onPageLoadError}
|
||||
error={<div className="text-red-600">Failed to load page: {pageError}</div>}
|
||||
/>
|
||||
</Document>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue