{"_rev":"3-10d1b30b35bfec436f5e91841be308d2","time":{"created":"2025-07-23T13:34:57.021Z","modified":"2025-07-23T13:34:57.543Z","0.0.1":"2025-07-23T13:15:47.255Z","0.0.2":"2025-07-23T13:34:57.297Z"},"_id":"@avoraui/av-file-picker","name":"@avoraui/av-file-picker","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@avoraui/av-file-picker","version":"0.0.2","description":"A customizable Angular file picker component for images and PDFs with preview support.","keywords":["angular","file-picker","image-upload","pdf-upload"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","peerDependencies":{"@angular/common":"^20.1.0","@angular/core":"^20.1.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/avoraui-av-file-picker.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-file-picker.mjs"}},"_id":"@avoraui/av-file-picker@0.0.2","gitHead":"580cd1a8bbb253d89d483fab183305e9412ff78a","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-OaIzp5VOGfknkkp1QScSesVKgexY0wu+YlpHpJCjeURWYG7hi2ZiqO/HRRb6Dzsj6BtUaAN0DW+YKNV11aeeWA==","shasum":"988f90791de0ec1cc04c0c4ddd52338a77c6793d","tarball":"https://registry.npmjs.org/@avoraui/av-file-picker/-/av-file-picker-0.0.2.tgz","fileCount":7,"unpackedSize":73646,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFRjqKBtEbhC7Dmyw4Sm6quRQzJXi/pDFb7W7NNBtrlmAiEA20RBjPhV04IYdY1r9eZh6kuyE4JpwbL/HhjcjyxkKrY="}]},"_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"directories":{},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/av-file-picker_0.0.2_1753277697101_0.6781951586153256"},"_hasShrinkwrap":false}},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"description":"A customizable Angular file picker component for images and PDFs with preview support.","keywords":["angular","file-picker","image-upload","pdf-upload"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","readme":"# AvFilePicker Component (AvoraUI)\r\n\r\nA customizable Angular file picker component that supports both images and PDF files with preview functionality. This component implements Angular's `ControlValueAccessor` interface, making it fully compatible with reactive forms.\r\n\r\n## Features\r\n\r\n- ✅ **Multi-format Support**: Handles both image files and PDF documents\r\n- ✅ **File Size Validation**: Enforces a 10MB maximum file size limit\r\n- ✅ **Preview Functionality**:\r\n - Image preview with thumbnail display\r\n - PDF preview with view link that opens in a new tab\r\n- ✅ **Reactive Forms Integration**: Full support for Angular reactive forms\r\n- ✅ **Material Design**: Built with Angular Material components\r\n- ✅ **Memory Management**: Automatic cleanup of object URLs to prevent memory leaks\r\n- ✅ **Error Handling**: Graceful error handling with user-friendly alerts\r\n\r\n## Dependencies\r\n\r\nThis component requires the following Angular Material modules:\r\n\r\n```typescript\r\nimport { MatCard } from \"@angular/material/card\";\r\nimport { MatButton } from \"@angular/material/button\";\r\nimport { MatIcon } from '@angular/material/icon';\r\n```\r\n\r\n## Installation\r\n\r\n1. Ensure you have Angular Material installed in your project\r\n2. Import the component in your module or use it directly (standalone component)\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n### With Reactive Forms\r\n\r\n```typescript\r\n// Component\r\nexport class MyComponent {\r\n fileForm = this.fb.group({\r\n selectedFile: ['']\r\n });\r\n\r\n constructor(private fb: FormBuilder) {}\r\n}\r\n```\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n## Input Properties\r\n\r\n| Property | Type | Required | Default | Description |\r\n|----------|------|----------|---------|-------------|\r\n| `defaultImage` | `any` | No | `undefined` | Default image to display when no file is selected |\r\n| `showPdfDetails` | `boolean` | No | `false` | Whether to show PDF file details and view link |\r\n\r\n## Component Behavior\r\n\r\n### File Selection\r\n- Click the \"Select\" button to open the file picker dialog\r\n- Accepts image files (`image/*`) and PDF files (`.pdf`)\r\n- Validates file size (maximum 10MB)\r\n- Automatically detects file type and displays appropriate preview\r\n\r\n### File Preview\r\n- **Images**: Displays thumbnail preview of the selected image\r\n- **PDFs**: Shows PDF icon with document indicator and optional view link\r\n\r\n### File Management\r\n- **Clear**: Removes the selected file and resets to default state\r\n- **Replace**: Select a new file to replace the current selection\r\n\r\n### Form Integration\r\nThe component outputs a Base64-encoded string of the selected file, making it easy to:\r\n- Store in databases\r\n- Send via API calls\r\n- Integrate with form validation\r\n\r\n## Data Format\r\n\r\nThe component handles data conversion automatically:\r\n\r\n**Output**: Base64-encoded string representation of the file\r\n**Input**: Base64-encoded string (automatically decoded and displayed)\r\n\r\n### File Type Detection\r\nThe component uses binary signatures to detect file types:\r\n- **PDF**: Checks for PDF signature (`%PDF`) in the first 4 bytes\r\n- **Images**: Treats all non-PDF files as images\r\n\r\n## Error Handling\r\n\r\nThe component includes comprehensive error handling for:\r\n- File size validation (shows alert for files > 10MB)\r\n- File reading errors (console logging + user alerts)\r\n- Base64 decoding errors (graceful fallback to default image)\r\n\r\n## Memory Management\r\n\r\nThe component automatically:\r\n- Creates object URLs for PDF preview\r\n- Cleans up object URLs in `ngOnDestroy()` to prevent memory leaks\r\n- Revokes previous URLs when new files are selected\r\n\r\n## Styling\r\n\r\nThe component uses CSS classes that can be customized:\r\n\r\n- `.img-upload-panel` - Main container\r\n- `.img-preview-container` - Preview area container\r\n- `.img-placeholder` - Placeholder/preview area\r\n- `.preview-image` - Selected image display\r\n- `.pdf-placeholder` - PDF icon container\r\n- `.pdf-overlay` - PDF view link overlay\r\n- `.file-info` - File information display\r\n- `.action-buttons` - Button container\r\n\r\n## Browser Compatibility\r\n\r\nThis component uses modern browser APIs:\r\n- `FileReader` API for file reading\r\n- `URL.createObjectURL()` for PDF preview\r\n- `atob()`/`btoa()` for Base64 encoding/decoding\r\n\r\nEnsure your target browsers support these features or include appropriate polyfills.\r\n\r\n## Example Implementation\r\n\r\n```typescript\r\n// app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n template: `\r\n \r\n `\r\n})\r\nexport class AppComponent {\r\n defaultPlaceholder = '/assets/upload-placeholder.png';\r\n \r\n uploadForm: FormGroup = this.fb.group({\r\n document: ['']\r\n });\r\n\r\n constructor(private fb: FormBuilder) {}\r\n\r\n onSubmit() {\r\n const fileData = this.uploadForm.get('document')?.value;\r\n // fileData contains the Base64-encoded file\r\n console.log('Selected file (Base64):', fileData);\r\n }\r\n}\r\n```\r\n\r\n## Requirements\r\n\r\n- Angular 17+\r\n- Angular Material (for pagination component)\r\n- Modern browser with CSS Grid support\r\n\r\n## Browser Support\r\n\r\n- Chrome/Edge 57+\r\n- Firefox 52+\r\n- Safari 10.1+\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## Changelog\r\n\r\n### v0.0.2\r\n- Initial release\r\n- Basic table functionality with pagination\r\n- CRUD operations support\r\n- Reactive forms integration\r\n- Nested object property access\r\n","readmeFilename":"README.md"}