kibana/packages/shared-ux/file/file_upload/impl
Antonio 0a38f85002
[Cases] Attaching files to cases (#154436)
Fixes #151595 

## Summary

In this PR we will be merging a feature branch into `main`.

This feature branch is a collection of several different PRs with file
functionality for cases.

- https://github.com/elastic/kibana/pull/152941
- https://github.com/elastic/kibana/pull/153957
- https://github.com/elastic/kibana/pull/154432
- https://github.com/elastic/kibana/pull/153853

Most of the code was already reviewed so this will mainly be used for
testing.

- Files tab in the case detail view.
- Attach files to a case.
- View a list of all files attached to a case (with pagination).
- Preview image files attached to a case.
- Search for files attached to a case by file name.
- Download files attached to a case.
- Users are now able to see file activity in the case detail view.
- Image files have a different icon and a clickable file name to
preview.
- Other files have a standard "document" icon and the name is not
clickable.
- The file can be downloaded by clicking the download icon.

## Release notes

Support file attachments in Cases.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-04-18 16:02:11 +02:00
..
src [Cases] Attaching files to cases (#154436) 2023-04-18 16:02:11 +02:00
index.tsx
jest.config.js
kibana.jsonc [codeowners] rename global experience to @elastic/appex-sharedux 2023-01-18 10:02:49 -07:00
package.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
README.mdx
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00

---
id: sharedUX/Components/FileUpload
slug: /shared-ux/components/file-upload
title: File upload
description: Upload file(s) to Kibana.
tags: ['shared-ux', 'component', 'files']
date: 2022-11-22
---

## Description

A wrapper around `<EuiFilePicker />` that provides state management for the upload process using the `FileClient`.

## Usage

Must be wrapped in the `FilesContext`.

```tsx
<FilesContext ...>
  <FileUpload ... />
</FilesContext>
```

## Variants

### Default

The default layout should sit nicely in a form, modal or flyout.

### Compressed

When space is constrained you can render a smaller version of the UI by passing the `compressed` prop. This variant will be smaller in size, and start uploading a file immediately once it receives it.