file-upload
Keep file selection native and present application-owned queue and progress state beside it. AngularTS can handle drop events and backend transfer commands without introducing a second upload model.
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS File Upload</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="file-upload-demo">
<section class="visual-example" aria-labelledby="upload-title">
<header>
<h2 id="upload-title">Supporting documents</h2>
<p>PDF, PNG, or JPG files up to 10 MB.</p>
</header>
<label for="supporting-files">
<strong>Choose files or drop them here</strong>
<span>The application validates and transfers selected files.</span>
<input
id="supporting-files"
type="file"
accept=".pdf,image/png,image/jpeg"
multiple
/>
</label>
<ul aria-label="Upload queue">
<li>
<span>contract.pdf</span>
<output>72%</output>
<progress value="72" max="100">72%</progress>
</li>
</ul>
<output aria-live="polite">1 file ready for processing</output>
</section>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native file input and authored status.
Anatomy
Root styling selector
section:has(> label > input[type="file"])
Semantic structure
Use a semantic section with a direct label containing a native file input. Optional direct ul, native progress, and output elements present application-owned queue and transfer state without component or part classes.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
accept | Authored | Native accepted file types on the direct file input. |
dragging | Authored | Presentational drop-target state on the root section. |
multiple | Authored | Allows the direct native file input to accept several files. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
File Upload styles a native file input, authored queue, native progress, and status output. AngularTS or the application owns drag-and-drop event handling, validation, transfer, retry, cancellation, and persistence.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Keep the native file input operable and labeled. Announce queue changes with a status output, label progress, and expose validation or transfer errors as text rather than color alone.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.