[CU-86b06xn8q] feat(uploader): enhanced file preview with react-file-viewer #246
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
amjedidiah
changed the title
BSalaeddin
reviewed
Nov 22, 2024
- swapped and for uuid - removed duplicated returned error element
BSalaeddin
approved these changes
Nov 26, 2024
MedAmine1212
suggested changes
Nov 26, 2024
Comment on lines
36
to
40
| const objectUrl = useMemo(() => { | ||
| const url = URL.createObjectURL(file) | ||
| objectUrls.current.push(url) | ||
| return url | ||
| }, [file]) |
Contributor
There was a problem hiding this comment.
This could lead the url being added multiple times -> memory leaks if the useMemo is triggered multiple times (can happen alot with javascript.)
make sure the URL isn't already in the list before adding it
- removed `console.log` statements
MedAmine1212
approved these changes
Nov 27, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
react-file-viewerfor better file preview capabilitiesOTHER CHANGES
.gitignoreBREAKING CHANGE: New dependency
react-file-vieweris required