Initial

components/forms/Thumb.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export default class Thumb extends React.Component {
+  state = {
+    loading: false,
+    thumb: undefined,
+  };
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.file !== this.props.file) {
+      this.setState({ loading: true }, () => {
+        let reader = new FileReader();
+
+        reader.onloadend = () => {
+          this.setState({ loading: false, thumb: reader.result });
+        };
+
+        reader.readAsDataURL(this.props.file);
+      });
+    }
+  }
+
+  render() {
+    if (!this.props.file) {
+      return null;
+    }
+
+    if (this.state.loading) {
+      return <p>loading...</p>;
+    }
+
+    return (
+      <img
+        src={this.state.thumb}
+        alt={this.props.file.name}
+        className=""
+        height={200}
+        width={200}
+      />
+    );
+  }
+}