kibana/examples/files_example/public/components/file_picker.tsx
Jean-Louis Leysens f1b0dd4720
[Files] Add meta prop to <FilePicker /> (#151417)
## Summary

Added the `meta` prop to the `FilePicker` component, also pass this down
to the `FileUpload` component so that files created via the picker can
have meta set.

Close https://github.com/elastic/kibana/issues/151375

## How to test

1. Start Kibana with examples `yarn start --run-examples`
2. Go to the "Developer examples" in the side-nav menu under analytics
3. Go to "Files example"
4. Upload a file via the "Select file" button, should present an empty
file picker if you have no files, otherwise use the little upload
component bottom left
5. Either select files or dismiss the modal
6. Inspect the uploaded file and see the `myCool: 'meta'` entry included
with other metadata

## Screenshot

A file uploaded via the `FilePicker` in the "Files example" plugin.

<img width="897" alt="Screenshot 2023-02-16 at 11 41 06"
src="https://user-images.githubusercontent.com/8155004/219342872-c39b5d81-7421-4187-bb1c-d6815d80a3dc.png">


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
2023-02-16 04:58:48 -07:00

34 lines
1,013 B
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import type { FunctionComponent } from 'react';
import { exampleFileKind } from '../../common';
import { FilePicker } from '../imports';
interface Props {
onClose: () => void;
onUpload: (ids: string[]) => void;
onDone: (ids: string[]) => void;
}
export const MyFilePicker: FunctionComponent<Props> = ({ onClose, onDone, onUpload }) => {
return (
<FilePicker
kind={exampleFileKind.id}
onClose={onClose}
onDone={(files) => onDone(files.map((f) => f.id))}
onUpload={(n) => onUpload(n.map(({ id }) => id))}
pageSize={50}
uploadMeta={{ myCool: 'meta' }}
multiple
/>
);
};