feat(custom-dropzone): add file list and restrictions

src/components/custom-dropzone.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import JSZip from "jszip";
 import styled from "@emotion/styled";
@@ -7,8 +7,7 @@ import { Text } from ".";
 const Container = styled.div`
   border: 1px solid var(--color-dark);
   margin-bottom: var(--spacing-y-sm);
-  padding: var(--spacing-y-lg) var(--spacing-x-sm);
+  padding: var(--spacing-y-sm) var(--spacing-x-sm) 0;
-  text-align: center;
 
   &:focus {
     outline: 0;
@@ -20,8 +19,26 @@ const Container = styled.div`
   }
 `;
 
+const Message = styled.div`
+  border: 3px dashed var(--color-mid-grey);
+  padding: var(--spacing-y-md) var(--spacing-x-sm);
+  margin-bottom: var(--spacing-y-sm);
+  text-align: center;
+`;
+
+const Files = styled.div`
+  margin-bottom: var(--spacing-y-sm);
+`;
+
+const List = styled.ul`
+  margin: 0 0 var(--spacing-y-sm);
+  list-style: circle;
+`;
+
 export default function CustomDropzone({ name, files, setFiles, ...other }) {
+  const [fileList, setFileList] = useState([]);
   const onDrop = useCallback(acceptedFiles => {
+    setFileList(acceptedFiles.map(file => file.path));
     if (acceptedFiles.length > 1) {
       const zip = new JSZip();
       acceptedFiles.forEach(file => zip.file(file.name, file));
@@ -36,16 +53,43 @@ export default function CustomDropzone({ name, files, setFiles, ...other }) {
       setFiles(acceptedFiles[0]);
     }
   }, []);
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: "image/jpeg, image/png",
+    maxFiles: 5,
+    onDrop
+  });
   return (
     <Container {...getRootProps()} {...other}>
       <input name={name} {...getInputProps()} />
-      {isDragActive ? (
+      <Message>
-        <Text noMargin>Drop the images here</Text>
+        {isDragActive ? (
-      ) : (
+          <Text noMargin>Drop the images here</Text>
-        <Text noMargin>
+        ) : (
-          Drop your images here, or click to select the files
+          <>
-        </Text>
+            <Text noMargin>
+              Drop your images here, or click to select the files
+            </Text>
+            <Text size="xs" textStyle="italic" noMargin>
+              (5 files maximum, *.jpg and *.png only)
+            </Text>
+          </>
+        )}
+      </Message>
+      {fileList.length > 0 && (
+        <Files>
+          <Text size="sm" noMargin>
+            Files added:
+          </Text>
+          <List>
+            {fileList.map(file => (
+              <li key={file}>
+                <Text size="sm" noMargin>
+                  {file}
+                </Text>
+              </li>
+            ))}
+          </List>
+        </Files>
       )}
     </Container>
   );