diff --git a/src/pages/gallery/components/DragAndDropUpload.tsx b/src/pages/gallery/components/DragAndDropUpload.tsx
new file mode 100644
index 000000000..9cb53a8e8
--- /dev/null
+++ b/src/pages/gallery/components/DragAndDropUpload.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Dropzone from 'react-dropzone';
+import styled from 'styled-components';
+
+const getColor = (props) => {
+  if (props.isDragAccept) {
+    return '#00e676';
+  }
+  if (props.isDragReject) {
+    return '#ff1744';
+  }
+  if (props.isDragActive) {
+    return '#2196f3';
+  }
+};
+
+const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
+
+const DropDiv = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: ${(props) => getColor(props)};
+  border-style: ${(props) => enableBorder(props)};
+  outline: none;
+  transition: border 0.24s ease-in-out;
+`;
+
+const FileUpload = ({ children }) => {
+  return (
+    <>
+      <Dropzone
+        onDrop={(acceptedFiles) => {
+          console.log(acceptedFiles);
+        }}
+      >
+        {({
+          getRootProps,
+          getInputProps,
+          isDragActive,
+          isDragAccept,
+          isDragReject,
+        }) => {
+          return (
+            <>
+              <DropDiv
+                {...getRootProps({
+                  isDragActive,
+                  isDragAccept,
+                  isDragReject,
+                })}
+              >
+                <input {...getInputProps()} />
+                {children}
+              </DropDiv>
+            </>
+          );
+        }}
+      </Dropzone>
+    </>
+  );
+};
+
+export default FileUpload;