47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import type { PdfFile } from '../pdf/pdfTypes';
|
|
|
|
interface FileLoaderProps {
|
|
pdf: PdfFile | null;
|
|
onFilesLoaded: (files: File[]) => void;
|
|
}
|
|
|
|
const FileLoader: React.FC<FileLoaderProps> = ({ pdf, onFilesLoaded }) => {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = Array.from(e.target.files ?? []);
|
|
if (files.length > 0) {
|
|
onFilesLoaded(files);
|
|
e.target.value = '';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="card">
|
|
<h2>1. Load PDF</h2>
|
|
<p>
|
|
Select one PDF to open it directly, or select several PDFs to place them
|
|
in the merge queue. Processing happens entirely in your browser.
|
|
</p>
|
|
<input
|
|
type="file"
|
|
accept="application/pdf"
|
|
multiple
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
{pdf && (
|
|
<div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
|
|
<div>
|
|
<strong>Loaded:</strong> {pdf.name}
|
|
</div>
|
|
<div>
|
|
<strong>Pages:</strong> {pdf.pageCount}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FileLoader;
|