feat: show upload requirements before file selection in task submission

[mudith-perera]

Jira ticket

FILE-F01 - Show Task Upload Requirements Before File Selection

Description

This PR adds pre-selection upload requirement guidance to the task submission modal. Previously, students had no way to see the accepted file category, formats, approved size limit, or required file count until after they attempted to select or submit a file. This PR surfaces that information up front, before any file picker or drag-and-drop interaction occurs, while preserving the existing shared file uploader and its validation behaviour unchanged.

Scope

Only the upload-submission-modal component was modified:

upload-submission-modal.tpl.html
upload-submission-modal.coffee
[add: any shared constants file if ACCEPTED_TYPES was extracted]

The existing shared component was reused as-is — no new uploader was created, and no backend validation, approved extension list, or task-submission page layout was changed.

Build combination

The work was checked against the following repository versions:

doubtfire-web: feature/pre-upload-requirements @ 7c56e3a

Before

Opened the task submission modal prior to this change:

No file category, accepted formats, size limit, or required file count were shown. Students only discovered rejected formats after selecting a file and receiving an inline error.

After

Rebuilt and reopened the modal as:

Checking the file-selection step now shows:

Required file type (e.g. Spreadsheet)
Accepted formats summary (e.g. CSV, XLS, XLSX)
Maximum file size (from approved policy, where available)
Files required (from task definition)
An expandable "View all accepted extensions" control for long lists

This confirms the requirement information is now visible before any click, drop, or selection occurs.

Accessibility check

The requirement text is linked to the upload control via aria-describedby and is reachable and operable through keyboard navigation alone (tab order, focus states, and expand/collapse via keyboard). Verified with [insert tool/method, e.g. VoiceOver / axe DevTools].

Missing-policy check

Tested with a task definition lacking upload requirement data. The component renders a clear, safe fallback state rather than an error or blank panel: [file-f01-missing-policy]

Invalid-file check

Confirmed the existing detailed invalid-file feedback after a rejected selection is unchanged: [file-f01-invalid-file]

Responsive check

Verified layout on desktop and narrow/mobile screen widths

Runtime check

Existing picker and drag-and-drop behaviour were retested after the change and continue to function as before. No previously-supported file types were rejected due to this change.

Testing / evidence

Component tests were added covering normal, long-extension-list, missing-policy, and invalid-file states. Targeted tests, type checking, lint, and build were run and passed:

The change itself is scoped to the upload requirements display and does not modify backend validation, the approved extension list, or the underlying uploader's file-handling logic.

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Testing Checklist:

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• This pull request is ready for review