CDCgov
Upload Page: Add hover state to file picker & allow users to remove a file after it has been selected
Why should we do this?
Current experience:
- The "Upload your results" page lacks visual feedback, making it unclear to users when the application is registering their file. This leads to a frustrating user experience and can potentially result in incorrect data submissions.
- Users cannot currently remove a file after they have selected it; they can only overwrite it by selecting another file.
Why we want to make this change:
- Adding a hover state to the file picker box will improve the user experience by providing clear feedback and enabling users to easily manage their uploaded files. This will increase user confidence in the upload process and reduce the likelihood of errors.
- Implementing "remove file" functionality will enable users to easily manage their uploaded files, correct mistakes, and ensure accurate data submission.
User story
Interacting with the file upload component As a user uploading test results, I want to see visual feedback when interacting with the file upload component so that I know the application is registering my interaction.
Removing a file after it has been selected As a user uploading test results, I want to be able to remove a selected file so that I can easily correct mistakes and ensure accurate data submission.
Action Requested
- Implement a hover state for the file picker box on the "Upload your results" page, following the CDC/Skylight Design System guidelines.
- Add a "remove file" function for uploaded files on the "Upload your results" page, allowing users to delete files they've selected.
Acceptance Criteria
- The file picker box displays a clear hover state when the user hovers over it with a file—not when they hover with their mouse. The box activates with a file and not the cursor because the box itself is not a button but rather a drag-and-drop. See the following screen
- Include a new loading state for when the file is uploading (see the following screen
- Users can remove uploaded files individually. The removal action should provide clear visual feedback (e.g., the file name disappears from the list of selected files). See the following screen
- When a file has been uploaded, switch the order of the Success and Error banner with the drag-and-drop box. When a CSV has a lot of errors, it pushes the file upload box too far down in the page. By switching the order, the file upload box is more accessible. See the following screen
- The implementation adheres to the CDC/Skylight Design System.
Additional Context
-
File Input https://designsystem.digital.gov/components/file-input/
-
SimpleReport 2023+ Figma File: https://www.figma.com/design/LglkDsGZDKMZm3XCkJPhfR/SimpleReport-2023%2B?node-id=8623-14130&t=OQ06foBIonnb5TiC-0
-
UX PoC: @khayeni-SL
-
product PoC: @KeepAustinWired
To clarify, I think the hover state should occur when a user hovers WITH a file over the upload box. I think the only thing that should have a hover state with the mouse curser is the hyperlink button: "choose from folder"
also curious if we want to include a loading state (where the file is uploading) to this ticket or a different ticket? Referring to this screen
Happy to edit the ticket with these if helpful!
WIP: https://github.com/CDCgov/prime-simplereport/tree/elisa/8525-file-picker-update
moved back to "Ready for implementation" with my WIP branch (still need to test if this is accessible)
not sure why I changed it to "high priority" (I think I did that by mistake 😅)