diff --git a/static_src/react/issue-wizard/AttachmentUploader.tsx b/static_src/react/issue-wizard/AttachmentUploader.tsx
new file mode 100644
index 0000000..a207ef5
--- /dev/null
+++ b/static_src/react/issue-wizard/AttachmentUploader.tsx
@@ -0,0 +1,87 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import styles from './AttachmentUploader.css';
+
+type Props = {
+  files: Array<File>,
+  setFiles: Function,
+  setSubmitEnable: Function,
+}
+
+const isSameFile = (a: File, b: File) => {
+  // NOTE: This function could return a false positive if two files have the
+  // exact same name, lastModified time, size, and type but different
+  // content. This is extremely unlikely, however.
+  return a.name === b.name && a.lastModified === b.lastModified &&
+    a.size === b.size && a.type === b.type;
+}
+
+const getTotalSize = (files: Array<File>) => {
+  let size = 0;
+  files.forEach((f) => {
+    size += f.size;
+  });
+  return size;
+}
+
+const MAX_SIZE = 10 * 1000 * 1000;
+export default function AttachmentUploader(props: Props): React.ReactElement {
+
+  const {files, setFiles, setSubmitEnable} = props;
+  const [isOverSize, setIsOverSize] = React.useState(false);
+
+  const onSelectFile = (event: {currentTarget: any;}) => {
+    const input = event.currentTarget;
+    if (!input.files || input.files.length === 0) {
+      return;
+    }
+
+    const newFiles = [...input.files].filter((f1) => {
+      const fileExist = files.some((f2) => isSameFile(f1, f2));
+      return !fileExist;
+    })
+
+    const expendFiles = [...files].concat(newFiles);
+    const filesSize = getTotalSize(expendFiles);
+    setIsOverSize(filesSize > MAX_SIZE);
+    setSubmitEnable(filesSize <= MAX_SIZE);
+    setFiles(expendFiles);
+  }
+
+  const onRemoveFile = (index: number) => () => {
+    let remainingFiles = [...files];
+    remainingFiles.splice(index, 1);
+    const filesSize = getTotalSize(remainingFiles);
+    setIsOverSize(filesSize > MAX_SIZE);
+    setSubmitEnable(filesSize <= MAX_SIZE);
+    setFiles(remainingFiles);
+  }
+  return (
+    <>
+      <div className={styles.controls}>
+        <input className={styles.inputUpload} id="file-uploader" type="file" multiple onChange={onSelectFile}/>
+        <label className={styles.button} for="file-uploader">
+          <i className={styles.materialIcons} role="presentation">attach_file</i>Add attachments
+        </label>
+        You can include multiple attachments (Max: 10.0 MB per issue)
+      </div>
+      {files.length === 0 ? null :
+        (<ul>
+          {
+            files?.map((f, i) => (
+              <li>
+                {f.name}
+                <Button onClick={onRemoveFile(i)}> X</Button>
+              </li>
+            ))
+          }
+        </ul>)
+      }
+      {isOverSize ? <div className={styles.error}>Warning: Attachments are too big !</div> : null}
+    </>
+  );
+}