Add file attachments

client/src/lib/custom-ui/components/FilePicker/FilePicker.jsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './FilePicker.module.css';
+
+const FilePicker = React.memo(({ children, accept, onSelect }) => {
+  const field = useRef(null);
+
+  const handleTriggerClick = useCallback(() => {
+    field.current.click();
+  }, []);
+
+  const handleFieldChange = useCallback(
+    ({ target }) => {
+      if (target.files[0]) {
+        onSelect(target.files[0]);
+
+        target.value = null; // eslint-disable-line no-param-reassign
+      }
+    },
+    [onSelect],
+  );
+
+  const tigger = React.cloneElement(children, {
+    onClick: handleTriggerClick,
+  });
+
+  return (
+    <>
+      {tigger}
+      <input
+        ref={field}
+        type="file"
+        accept={accept}
+        className={styles.field}
+        onChange={handleFieldChange}
+      />
+    </>
+  );
+});
+
+FilePicker.propTypes = {
+  children: PropTypes.element.isRequired,
+  accept: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+};
+
+FilePicker.defaultProps = {
+  accept: undefined,
+};
+
+export default FilePicker;

client/src/lib/custom-ui/components/FilePicker/FilePicker.module.css

@@ -0,0 +1,3 @@
+.field {
+  display: none;
+}

client/src/lib/custom-ui/components/FilePicker/index.js

@@ -0,0 +1,3 @@
+import FilePicker from './FilePicker';
+
+export default FilePicker;

client/src/lib/custom-ui/index.js

@@ -1,6 +1,7 @@
 import Input from './components/Input';
 import Popup from './components/Popup';
 import Markdown from './components/Markdown';
+import FilePicker from './components/FilePicker';
 import DragScroller from './components/DragScroller';
 
-export { Input, Popup, Markdown, DragScroller };
+export { Input, Popup, Markdown, FilePicker, DragScroller };