Cu 86b2qw06r feat add upload event listeners #247
Conversation
- Added support for previewing multiple file types (PDF, DOCX, XLSX, etc.) - Implemented `react-file-viewer` for better file preview capabilities - Maintained fallback to FileIcon component when preview fails OTHER CHANGES - Resolved React version mismatch (16.14.0 -> 18.2.0) to fix hook errors in Storybook - Added VSCode workspace folder to `.gitignore` BREAKING CHANGE: New dependency `react-file-viewer` is required
- Added hover effect with background color change and shadow elevation - Implemented cursor pointer for clickable file previews - Added active state for click feedback - Enhanced dark mode hover states - Maintained consistent hover behaviour across mini and full preview modes
- Added modal-based DOCX preview to prevent interference between multiple previews - Created FileWithId interface and shared type definitions - Fixed file ID generation and management - Added proper cleanup for object URLs - Ensured consistent key generation for previews BREAKING CHANGE: File state type is now FileWithId[] instead of File[]
- Replaced DOCX-specific preview with universal file preview component - Added modal preview support for all file types - Fixed file name truncation in preview cards
- Added file handling events (onFileClick, onFilesChange, onFileRemove) - Added upload lifecycle events (onUpload, onCompletedUpload, onAllCompleted, onUploadFail) - Added progress tracking events (onFileProgress, onTotalProgress) - Added drag-and-drop events (onDragOver, onDragLeave, onDrop) - Added integration selection event (onClick) The event system provides granular control and visibility into: - File selection and removal - Upload progress per file and overall - Upload success/failure states - Drag-and-drop interactions - Integration method selection - Updates Demonstrates all events in Storybook with status updates and console logs
There was a problem hiding this comment.
It might be worth including a few additional events to cover more use cases and enhance flexibility. Here are some suggestions:
onFileTypeMismatch: Called when a file's type doesn’t match the allowed types, useful for providing feedback about supported formats.
onCancelUpload: Handles user-initiated upload cancellations, providing better control over the upload flow.
We could benefit from slight refinements to reduce ambiguity and ensure consistency.
onClick
Issue: The name is too generic and doesn’t describe its purpose (related to integration type selection).
Suggestion: Rename it to onIntegrationClick or onIntegrationSelected to clarify its intent.
onUpload
Issue: Could be misinterpreted as a trigger for when the entire upload process starts, but it actually refers to individual file uploads.
Suggestion: Rename it to onFileUploadStart for clarity.
onCompletedUpload
Issue: The name doesn’t specify that it’s for a single file’s upload completion.
Suggestion: Rename it to onFileUploadComplete to indicate it's for individual files.
onAllCompleted
Issue: Slightly ambiguous; could be confused with completing all operations, not just uploads.
Suggestion: Rename it to onAllUploadsComplete to make it clear it relates to uploads.
onUploadFail
Issue: The name is fine but could be improved for consistency with other events.
Suggestion: Rename it to onFileUploadFail.
onTotalProgress
Issue: Clear for aggregate progress but could use a slight clarification for upload context.
Suggestion: Rename it to onTotalUploadProgress.
Drag events could be prefixed with onFile (e.g., onFileDragOver) for better specificity.
…tency per review, changed: - `onClick` to `onIntegrationClick` - `onUpload` to `onFileUploadStart` - `onCompletedUpload` to `onFileUploadComplete` - `onAllCompleted` to `onAllUploadsComplete` - `onUploadFail` to `onFileUploadFail` - `onTotalProgress` to `onTotalUploadProgress` - `onDragOver` to `onFileDragOver` - `onDragLeave` to `onFileDragLeave` - `onDrop` to `onFileDrop` fix failing build caused by `src/lib/uploadObject.ts`
amjedidiah
changed the title
- Added onFileTypeMismatch event to handle file type validation failures - Added onCancelUpload event for upload cancellation handling - Updated useProgress hook to properly handle upload abortion - Exposed cancelUpload method through component ref
| // Add this helper function at the top level | ||
| const createFileWithId = (file: File) => { | ||
| return Object.assign(file, { | ||
| id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`, | ||
| }) | ||
| } | ||
|
|
There was a problem hiding this comment.
Change math.random() with an actual UUID.
(please make sure to not use math.random anywhere)
…curate values from `uuid` call
amjedidiah
changed the title
3 participants
Added the following event listeners: