Skip to content

fix: update FilePreview to handle multiple renders in strict mode #3236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

doug-s-nava
Copy link

@doug-s-nava doug-s-nava commented Aug 13, 2025

Summary

A bug exists in the FilePreview component that prevents the FileInput component from correctly rendering when a file is uploaded in React Strict Mode. Because Strict Mode requires components to render twice, the mount logic in FilePreview will run twice, causing an error to be throw in relation to the FileReader object being accessed multiple times:

Error: An attempt was made to use an object that is not, or is no longer, usable

Note that this fix comes directly from the comment from @TomNUSDS (hi Tom!) here #2433 (comment)

Related Issues or PRs

Closes #2433

How To Test

Reproduce bug

  1. checkout the main branch
  2. add react strict mode to storybook configuration. In .storybook/main.ts, framework config should look like
  framework: {
    name: '@storybook/react-vite',
    options: {
      strictMode: true,
    },
  },
  1. start storybook with npm run storybook
  2. navigate to http://localhost:9009/?path=/docs/components-file-input--docs
  3. upload a file using the file input
  4. VERIFY: error message appears (see screenshot)

Verify fix

  1. check out this branch
  2. repeat steps 2 - 5 from above
  3. VERIFY: file uploads successfully, no error message

Screenshots (optional)

Screenshot 2025-08-13 at 8 34 53 AM

@doug-s-nava doug-s-nava marked this pull request as ready for review August 13, 2025 12:46
@doug-s-nava doug-s-nava requested a review from a team as a code owner August 13, 2025 12:46
@doug-s-nava doug-s-nava force-pushed the dws-file-input-dev-mode-2433 branch 2 times, most recently from 136382d to 3964ede Compare August 13, 2025 12:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[fix] FilePreview component breaks FileReader use in onChange events
1 participant