department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
285 stars 206 forks source link

VEDUHSF Fixes - Add page size validations #77041

Open freeheeling opened 9 months ago

freeheeling commented 9 months ago

Exceeding document size and page size limits were the 2 categories of Lighthouse Benefits Intake API failures documented in Investigate non-zipcode LH failures #75296, with the majority of failures attributed to page size violations. If there's any requirement that neither the frontend nor backend seems to be validating, it's page size. This can, perhaps, be accomplished by reading the file content and extracting the image dimensions. The 'pdjs-dist' library (already installed) might be used to find a PDF's dimensions. If it was determined a file's page size dimensions didn't meet the given criteria, an error message could be returned to the user notifying them of the issue.

I was able to successfully upload a PDF with the following dimensions: 100" wide by 120" high (resolution: 7200x8640; for reference, a PDF unit is 1/72 of an inch), which exceeds the 78" wide by 101" high limitations imposed by the Lighthouse Benefits Intake service. Currently, EVSS does not have any restriction on page size. It seems prudent to implement a UI validation to prevent an initially accepted file upload from ultimately not being processed.

In the case of an upload exceeding the accepted page size limitation, a useful error message would need to be displayed. Input from design is requested, but following is a suggestion as to how this might be conveyed mentioned in this Slack thread covering the same page size validation issue:

Here's version of the error message I shared with the 530 EZ forms team (I removed the dimensions specific to their form): Your file can't have a [width/height] larger than [dimension]. Follow the instructions for your device on how to resize the file and try again. When I worked with their team, I raised similar questions about upload requirements and adjustments to instructions or error messages. Looking forward to continued conversation on this and thanks for raising this!

Research and documentation of findings supporting this change request found here.

sortizsh commented 7 months ago

Asked @sbwiley to do a bit of digging on this

freeheeling commented 7 months ago

Resources from 4/10/24 planning:

lisacapaccioli commented 5 months ago

@juliepedtke - This is a Code Yellow ticket that looks like it needs to be reviewed by R&D first before we can implement a change. Will you please let me know if you agree or disagree and then we can decide what to do next. Thanks

juliepedtke commented 5 months ago

Hi @lisacapaccioli - it looks like the Decision Reviews team had the same issue and already got their error text run by CAIA, so let's not reinvent the wheel and we can repurpose the copy from their Figma, which Scott linked above. Thanks!

lisacapaccioli commented 3 months ago

Questions - how would a Veteran fix this kind of problem, is it possible? Non-disability team has the same issue and are wondering what the solutions for these are.

freeheeling commented 3 months ago

On Windows

  1. Using Paint: a) Open Paint: Right-click on the image file, select "Open with," and choose "Paint." b) Resize the Image: Click on "Resize" in the toolbar. You can choose to resize by percentage or pixels. c) Adjust Dimensions: Ensure the new width and height are within the allowed dimensions. Uncheck "Maintain aspect ratio" if you need specific dimensions. d) Save the File: Click on "File" > "Save As" to save the resized image.
  2. Using Photos App: a) Open Photos App: Right-click on the image, select "Open with," and choose "Photos." b) Edit & Create: Click on "Edit & Create" in the top menu, then choose "Edit." c) Resize: Click on the three dots in the top right corner and select "Resize." d) Select Dimensions: Choose a predefined size or define custom dimensions. e) Save a Copy: Save the resized image as a copy.

On macOS

  1. Using Preview: a) Open Preview: Double-click the image to open it in Preview. b) Adjust Size: Go to "Tools" in the menu bar and select "Adjust Size." c) Set Dimensions: Enter the desired width and height, ensuring they are within limits. d) Save: Click "File" > "Save" to save the resized image.
  2. Using Photos: a) Open Photos App: Open the Photos app and find your image. b) Export and Resize: Select the image, then click "File" > "Export" > "Export 1 Photo." Choose a size that meets the requirements. c) Save: Export and save the resized image.

On Mobile Devices

  1. Using Built-in Apps (iOS): a) Edit in Photos: Open the image in the Photos app. Tap "Edit," then tap the crop icon. b) Adjust Size: Use the crop and resize options to set the desired dimensions. c) Save Changes: Tap "Done" to save the resized image.
  2. Using Built-in Apps (Android): a) Open Gallery App: Open the image in the Gallery app. b) Edit Options: Tap on the edit icon, and look for options to crop or resize. c) Set Dimensions: Adjust the dimensions as needed. d) Save: Save the edited image.

Using Online Tools

  1. Use Websites: Websites like PicResize or ImageResizer allow you to upload and resize images online. a) Adjust Dimensions: Enter the specific width and height or select a percentage to resize. b) Download Resized Image: After processing, download the resized image to your device.