fix: update FilePreview to handle multiple renders in strict mode

[doug-s-nava]

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,
    },
  },

3. start storybook with npm run storybook
4. navigate to http://localhost:9009/?path=/docs/components-file-input--docs
5. upload a file using the file input
6. 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)

[brandonlenz]

This fix looks great to me. Thanks for PRing it. Thanks @TomNUSDS for suggesting it.

[brandonlenz]

@all-contributors please add @doug-s-nava for bug, code

[allcontributors]

@brandonlenz

I've put up a pull request to add @doug-s-nava! 🎉

[brandonlenz]

@all-contributors please add @TomNUSDS for bug, code

[allcontributors]

@brandonlenz

I've put up a pull request to add @TomNUSDS! 🎉