Skip to content
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

Allow file upload to select same file after error #4022

Merged

Conversation

alefesouza
Copy link
Member

Fixes #460

Changes proposed in this Pull Request

  • Fixes an error that occur when a user upload a file and have some connection or general error, if select the same file again it does not emit the onChange event and the user get stuck until select a different file.

Needed to use a workaround to empty the file input because WordPress/gutenberg#39268 will be implemented on the next Gutenberg release and WCPay still uses the version 5.1.2 of it.

Testing instructions

  • Buy something on a merchant store and add a payment that generates a dispute.
  • Access the Transactions section on the left panel and open the latest transaction, if it does not work (this page is always empty to me), open the latest order and click on the "pi_hash" link.

Screen Shot 2022-03-23 at 9 45 36 PM

  • On this page there is a "View dispute" link, click on it.

Screen Shot 2022-03-23 at 9 47 39 PM

  • Click on "Challenge dispute".
  • Change the "Product type".
  • The file input button will be on this page.

Screen Shot 2022-03-23 at 9 49 49 PM

  • Now we need to make an error occur, to do it, just select a file that is not a PDF/JPG/PNG file.
  • Now select the same file again, it will show the loading animation, before this PR the user would get stuck because the onChange event was not called.
  • You can also disable the internet on the browser DevTools and try to upload a file, enable the internet again and selected the same file, before this PR the "You are offline" message would be showing until the user select another file.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

  • Link to testing instructions from release testing doc : Add link here / 'QA Testing Not Applicable'

It fixes an error that occur when a user upload a file and have some connection or general error, if select the same file again it does not change.
@brianyu28 brianyu28 self-assigned this Mar 24, 2022
Copy link
Contributor

@brianyu28 brianyu28 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me, thanks @alefesouza! I left one suggestion about leaving a comment documenting the relevant Gutenberg issue, otherwise this looks good and works well.

event: React.MouseEvent< HTMLButtonElement >,
openFileDialog: () => void
) => {
// Get file input next to the button element and clear it's value, allowing to select the same file again in case of connection or general error or need to select it again
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest leaving a comment here that links to WordPress/gutenberg#39267, so that it's clear why this workaround is being used. That'll also make it clearer later when we might want to use onChange directly on FormFileUpload once it's supported.

@alefesouza alefesouza merged commit 4619c31 into develop Mar 24, 2022
@alefesouza alefesouza deleted the fix/460-file-upload-does-not-start-selecting-same-file branch March 24, 2022 18:46
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.

File upload does not start when selecting the same file
2 participants