# File Service Components

This package provides React components for file upload, management, import, export, and viewing.

## Components

### FileUploader
Basic file upload component with drag-and-drop support.

### FileList
Display a list of uploaded files with delete functionality.

### FileViewer
View files (images, PDFs, etc.) in an iframe.

### FileImporter
**New!** Advanced file import with:
- File preview (shows data inside)
- Selective import (choose specific pages/sheets)
- File validation (size and format checks)

### FileExporter
**New!** Advanced file export with:
- Multiple export formats
- Selective export (choose specific pages/sheets)
- Custom file naming

## Usage Examples

### FileImporter

```tsx
import { FileImporter } from 'file-service-frontend';

function MyComponent() {
  const config = {
    apiUrl: 'http://localhost:3002/api/file-service',
    maxFileSize: 10 * 1024 * 1024, // 10MB
    acceptedFileTypes: ['application/pdf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
  };

  return (
    <FileImporter
      config={config}
      showPreview={true}
      allowSelectiveImport={true}
      onImportSuccess={(fileId, options) => {
        console.log('File imported:', fileId);
        console.log('Import options:', options);
      }}
      onImportError={(error) => {
        console.error('Import failed:', error);
      }}
      accept=".pdf,.xlsx,.docx"
    />
  );
}
```

### FileExporter

```tsx
import { FileExporter } from 'file-service-frontend';

function MyComponent() {
  const fileId = 'some-file-id';
  const config = {
    apiUrl: 'http://localhost:3002/api/file-service',
  };

  return (
    <FileExporter
      fileId={fileId}
      config={config}
      allowSelectiveExport={true}
      onExportSuccess={(blob, fileName) => {
        console.log('File exported:', fileName);
        // blob contains the exported file
      }}
      onExportError={(error) => {
        console.error('Export failed:', error);
      }}
    />
  );
}
```

## Features

### Import Features
- ✅ File preview (shows data inside)
- ✅ Selective import (choose specific pages for PDF/Word, sheets for Excel)
- ✅ File validation (size and format checks)
- ✅ Drag-and-drop support
- ✅ Visual feedback for validation errors/warnings

### Export Features
- ✅ Multiple export formats (PDF, Excel, CSV, JSON, TXT, Original)
- ✅ Selective export (choose specific pages/sheets)
- ✅ Custom file naming
- ✅ Download functionality

## Validation

The `FileImporter` component automatically validates:
- File size (against `maxFileSize` in config)
- File type (against `acceptedFileTypes` in config)
- File emptiness
- File name validity

## Selective Import/Export

### For PDF/Word Documents
- Select specific page numbers to import/export
- Useful for large documents where you only need certain pages

### For Excel Files
- Select specific sheet names to import/export
- Useful for workbooks with multiple sheets

## Note on Advanced Features

Some advanced features like PDF page extraction, Excel sheet extraction, and format conversion require additional libraries:
- **PDF.js** for PDF manipulation
- **xlsx** for Excel file processing
- **mammoth.js** for Word document processing

These are currently placeholders in the implementation. To enable full functionality, install these libraries and update the preview/export utilities.

