Feature/section input validation

[Angekarara]

Fixes #139

What was changed?

File Selection Component:

• Modified the file selection UI to display selected file names alongside the "Choose File" button

• Implemented multiple file selection support while maintaining single file functionality

• Added dynamic file removal without page refresh

Number of Sections Input:

• Added input validation to only accept positive whole numbers

• Implemented error messaging for invalid inputs

• Updated placeholder text to clearly indicate expected input format

Why was it changed?

File Selection:
Issues:

No File Visibility: Users couldn't see selected files before uploading, leading to accidental uploads of wrong files.

No Multi-File Management: The UI only handled single files, forcing users to upload files one-by-one.

No Removal Option: Once selected, files couldn't be removed without refreshing the page.

Solutions:

Dynamic File Display: By showing filenames next to the "Choose File" button, users get immediate visual confirmation of their selection and also allowing them to select another file.

Array-Based State: Using selectedFiles array state allows tracking multiple files while preserving the original single-file functionality.

X Buttons: Individual remove buttons per file enable precise control without page reloads

Number Input Validation:
Issues:

Silent Failures: The field previously accepted invalid inputs (decimals/letters), causing hidden errors during processing.

Poor Guidance: Users had no indication that only integers were allowed.

Solutions:

Real-Time Validation: The handleNumSection function checks for positive integers and rejects others with clear error messages

Enhanced UX: The updated placeholder text ("Enter a whole number (e.g., 1, 2, 3)") and error messaging proactively guide users.

How was it changed?

Key modifications in OrcaDashboardComponent.js:

File Selection Changes:

• Modified onFileSelected to multiple files and be able to re-select the file you removed
  

• Created a state for allowing multiple files to be selected
  

• Updated UI to display selected files:
  

• Implemented file removal logic:
  

Screenshots that show the changes (if applicable):

• The display of No file chose
  

• File selection
  

• The display of error when there is a wrong input
  

[josue-igiraneza]

LGTM!! 👍🏾

[bhumulanandinireddy]

@Angekarara changes looks good but the CSS changes which were used for choose file is very basic and the choose file button is not aliened with the actual CSS of the page.

[Angekarara]

@Angekarara changes looks good but the CSS changes which were used for choose file is very basic and the choose file button is not aliened with the actual CSS of the page.

Okay, let me work on that!

[Angekarara]

@Angekarara changes looks good but the CSS changes which were used for choose file is very basic and the choose file button is not aliened with the actual CSS of the page.

@bhumulanandinireddy , i have worked on the requested changes

[kungfuchicken]

@Angekarara changes looks good but the CSS changes which were used for choose file is very basic and the choose file button is not aliened with the actual CSS of the page.

@bhumulanandinireddy , i have worked on the requested changes

Thank you! We just started a holiday break for Easter at the university, so it might be a couple days before @bhumulanandinireddy can review again. We'll get to it ASAP, though. We really appreciate the hard work and involvement!

[bhumulanandinireddy]

@Angekarara
The section input validation is perfect. However, the CSS you changed for the file upload is not matching the original CSS from the main branch, which you can check in the screenshot for reference. Other than that, I have no issues with the input validation code. For the CSS part, just keep it the same as in main.

[Angekarara]

@Angekarara The section input validation is perfect. However, the CSS you changed for the file upload is not matching the original CSS from the main branch, which you can check in the screenshot for reference. Other than that, I have no issues with the input validation code. For the CSS part, just keep it the same as in main.

@bhumulanandinireddy , I've worked on these requested changes

[Angekarara]

Hi @bhumulanandinireddy , Just following up on this PR. we’ve already addressed the requested changes a while back, so I wanted to check if there’s anything else you’d like me to do before it can be reviewed or merged.

Appreciate any updates when you get time! Thanks