chrone: sperate client and server to different repos.

src/components/Dragzone.js

@@ -0,0 +1,83 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+import intl from 'react-intl-universal';
+
+// const initialFile: {
+//   file: ?File,
+//   preview: string,
+//   metadata: ?object,
+//   uploaded: boolean,
+// };
+
+export default function Dropzone({
+  text = intl.get('drag_drop_files_here_or_click_here'),
+  onDrop,
+  initialFiles = [],
+  onDeleteFile,
+  hint,
+  className,
+}) {
+  const [files, setFiles] = useState([]);
+
+  useEffect(() => {
+    setFiles([...initialFiles]);
+  }, [initialFiles]);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: 'image/*',
+    onDrop: (acceptedFiles) => {
+      const _files = acceptedFiles.map((file) => ({
+        file,
+        preview: URL.createObjectURL(file),
+        uploaded: false,
+      }));
+      setFiles(_files);
+    },
+  });
+
+  const handleRemove = useCallback(
+    (index) => {
+      const deletedFile = files.splice(index, 1);
+      setFiles([...files]);
+      onDeleteFile && onDeleteFile(deletedFile);
+    },
+    [files, onDeleteFile],
+  );
+
+  const thumbs = files.map((file, index) => (
+    <div className={'dropzone-thumb'} key={file.name}>
+      <div>
+        <img src={file.preview} />
+      </div>
+      <button onClick={() => handleRemove(index)}>
+        <Icon icon={'times'} iconSize={12} />
+      </button>
+    </div>
+  ));
+
+  useEffect(
+    () => () => {
+      files.forEach((file) => URL.revokeObjectURL(file.preview));
+    },
+    [files, onDrop],
+  );
+
+  useEffect(() => {
+    onDrop && onDrop(files);
+  }, [files, onDrop]);
+
+  return (
+    <section className={classNames('dropzone-container', className)}>
+      {hint && <div class="dropzone-hint">{hint}</div>}
+
+      <div {...getRootProps({ className: 'dropzone' })}>
+        <input {...getInputProps()} />
+        <p>{text}</p>
+      </div>
+
+      <div className={'dropzone-thumbs'}>{thumbs}</div>
+    </section>
+  );
+}