# EuiFileUploadComponent

**Type:** component

<p><code>eui-file-upload</code> component supporting both traditional file selection and drag-and-drop functionality.
Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms.
<code>eui-file-upload</code> provides file preview, upload progress tracking, file type filtering, and multiple file management.
<code>eui-file-upload</code> displays uploaded files with customizable templates for previews, buttons, and progress indicators.</p>
<h3>Basic file upload</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-file-upload
  [isMultiple]=&quot;true&quot;
  accept=&quot;.pdf,.doc,.docx&quot;
  [maxFiles]=&quot;5&quot;&gt;
&lt;/eui-file-upload&gt;</code></pre></div><h3>With form control</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">fileControl = new FormControl([]);</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-file-upload
  [formControl]=&quot;fileControl&quot;
  [hasDragArea]=&quot;true&quot;
  [progress]=&quot;uploadProgress&quot;&gt;
&lt;/eui-file-upload&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Native file input is keyboard accessible</li>
<li>Drag-and-drop area announces state changes to screen readers</li>
<li>File list items are navigable and removable via keyboard</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>accept</code> to filter file types (e.g., &quot;image/*&quot;, &quot;.pdf&quot;)</li>
<li>Progress tracking requires external upload logic to update <code>progress</code> input</li>
<li>Customize UI with templates: uploadedFile, browseButton, resetButton, progressBar</li>
<li>Set <code>maxFiles</code> to limit simultaneous uploads</li>
</ul>


**Selector:** `eui-file-upload`

**Standalone:** false

## Inputs

- **accept**: `string` - <p>Comma-separated list of allowed file extensions for upload filtering.
Files not matching the specified extensions will be rejected.
Use &#39;*&#39; to allow all file types.</p>

- **e2eAttr**: `string` - <p>Data attribute used for end-to-end testing identification.</p>

- **hasDragArea**: `boolean` - <p>Enables drag-and-drop functionality for file selection.
Displays a drop zone area where users can drag files from their file system.</p>

- **hasPreview**: `boolean` - <p>Displays a visual preview for each file in the upload list.
Preview type is controlled by hasPreviewAsImage and hasPreviewAsIcon properties.</p>

- **hasPreviewAsIcon**: `boolean` - <p>Renders file previews as file format icons instead of image thumbnails.
When enabled, automatically sets hasPreviewAsImage to false.</p>

- **hasPreviewAsImage**: `boolean` - <p>Renders file previews as thumbnail images for supported image file types.
Automatically disabled when hasPreviewAsIcon is true.</p>

- **hasProgressBar**: `boolean` - <p>Displays a progress bar indicating upload completion percentage.
Progress value must be provided via the progress input property.</p>

- **hasResetButton**: `boolean` - <p>Displays a button to clear all files from the upload queue.
Only visible when isMultiple is true and files are present.</p>

- **hasTotalSizeDisplayed**: `boolean` - <p>Shows the total combined size of all files in the upload queue.
Provides users with visibility into total upload size.</p>

- **isItemsClickable**: `boolean` - <p>Makes files in the upload list clickable, emitting itemClick events on interaction.
Useful for implementing file preview or detail views.</p>

- **isMultiple**: `boolean` - <p>Enables selection of multiple files in a single upload operation.
When false, only one file can be selected at a time.</p>

- **maxFiles**: `number` - <p>Maximum number of files that can be uploaded simultaneously.
When limit is reached, additional file selection is disabled.
Set to null or undefined for unlimited files.</p>

- **progress**: `number` - <p>Current upload progress percentage displayed in the progress bar.
Only effective when hasProgressBar is true. Value should be between 0 and 100.
Must be updated externally to reflect actual upload progress.</p>


## Outputs

- **fileDrop**: `EventEmitter` - <p>Emitted when files are dropped into the drag-and-drop area.
Triggered after files are processed and added to the upload queue.
No payload is emitted.</p>

- **itemClick**: `EventEmitter` - <p>Emitted when a file in the upload list is clicked.
Only triggers when isItemsClickable is true.
Payload: Blob, EuiUploadedFileInterface, or any file object representing the clicked item.</p>

