chore(website): uploa files through file input

Author: mlaursen

components/ErrorHeader.tsx

@@ -41,9 +41,10 @@ export function ErrorHeader({ error }: ErrorHeaderProps): ReactElement {
     );
   }
 
+  const { extensions } = error;
   return (
     <Text type="subtitle-2" margin="none">
-      Invalid file extension. Only non-minified text files are supported.
+      {`Invalid file extension. Must be one of ${extensions.join(", ")}`}
     </Text>
   );
 }

components/FileDropzone.tsx

@@ -1,66 +1,19 @@
 import cn from "classnames";
 import { ReactElement, useEffect, useState } from "react";
-import {
-  GetFileParser,
-  getSplitFileUploads,
-  useDropzone,
-  useFileUpload,
-  Text,
-  TextContainer,
-  FileUploadSVGIcon,
-} from "react-md";
+import { FileUploadSVGIcon, Text, TextContainer, useDropzone } from "react-md";
 
-import { ErrorModal } from "./ErrorModal";
 import styles from "./FileDropzone.module.scss";
-import { usePlayground } from "./usePlayground";
+import { useUpload } from "./useUpload";
 
-const getFileParser: GetFileParser = () => "readAsText";
-const extensions = [
-  "md",
-  "txt",
-  "js",
-  "jsx",
-  "ts",
-  "tsx",
-  "json",
-  "yml",
-  "yaml",
-] as const;
-
-export function FileDropzone(): ReactElement {
-  const { setMarkdown } = usePlayground();
+export function FileDropzone(): ReactElement | null {
+  const { onDrop } = useUpload();
   const [enabled, setEnabled] = useState(false);
-  const { onDrop, stats, reset, errors, clearErrors } = useFileUpload({
-    maxFiles: 1,
-    getFileParser,
-    extensions,
-    onDrop() {
+  const [isOver, handlers] = useDropzone({
+    onDrop(event) {
       setEnabled(false);
+      onDrop(event);
     },
   });
-  const [isOver, handlers] = useDropzone({
-    onDrop,
-    onDragEnter: reset,
-  });
-
-  const { complete } = getSplitFileUploads(stats);
-  const [current] = complete;
-  const type = current?.file.type?.replace(/^.*\//, "");
-  const fileContents = current?.result;
-  useEffect(() => {
-    if (typeof fileContents !== "string") {
-      return;
-    }
-
-    let contents = fileContents;
-    if (type !== "markdown" && type) {
-      contents = `\`\`\`${type}
-${fileContents}\`\`\`
-`;
-    }
-
-    setMarkdown(contents);
-  }, [fileContents, setMarkdown, type]);
 
   useEffect(() => {
     if (enabled) {
@@ -77,24 +30,23 @@ ${fileContents}\`\`\`
     };
   }, [enabled]);
 
+  if (!enabled) {
+    return null;
+  }
+
   return (
-    <>
-      <ErrorModal errors={errors} clearErrors={clearErrors} />
-      {enabled && (
-        <div
-          {...handlers}
-          className={cn(styles.container, isOver && styles.hovering)}
-          onMouseLeave={() => setEnabled(false)}
-        >
-          <TextContainer>
-            <Text type="headline-5">
-              Drag and drop a text file to update the markdown text with the
-              file contents.
-            </Text>
-            <FileUploadSVGIcon />
-          </TextContainer>
-        </div>
-      )}
-    </>
+    <div
+      {...handlers}
+      className={cn(styles.container, isOver && styles.hovering)}
+      onMouseLeave={() => setEnabled(false)}
+    >
+      <TextContainer>
+        <Text type="headline-5">
+          Drag and drop a text file to update the markdown text with the file
+          contents.
+        </Text>
+        <FileUploadSVGIcon />
+      </TextContainer>
+    </div>
   );
 }

components/Header.tsx

@@ -3,6 +3,7 @@ import {
   AppBar,
   AppBarTitle,
   Brightness4SVGIcon,
+  FileInput,
   FilterFramesSVGIcon,
   FilterNoneSVGIcon,
   HelpOutlineSVGIcon,
@@ -15,6 +16,7 @@ import {
 import { AppBarAction } from "./AppBarAction";
 import { HelpDialog } from "./HelpDialog";
 import { usePlayground } from "./usePlayground";
+import { useUpload } from "./useUpload";
 
 export function Header(): ReactElement {
   const [visible, setVisible] = useState(false);
@@ -29,6 +31,7 @@ export function Header(): ReactElement {
     toggleSplitView,
     toggleCustomRenderers,
   } = usePlayground();
+  const { accept, onChange } = useUpload();
 
   return (
     <AppBar
@@ -48,6 +51,14 @@ export function Header(): ReactElement {
         >
           {splitView ? <SettingsOverscanSVGIcon /> : <ViewColumnSVGIcon />}
         </AppBarAction>
+        <FileInput
+          id="file-uploa"
+          accept={accept}
+          onChange={onChange}
+          theme="clear"
+          themeType="flat"
+          style={{ flexShrink: 0 }}
+        />
         <AppBarAction
           aria-label="Custom Renderers"
           aria-pressed={customRenderers}

components/MarkdownEditor.tsx

@@ -18,7 +18,7 @@ export function MarkdownEditor(): ReactElement {
         name="editor"
         theme="none"
         value={markdown}
-        placeholder="# Enter some parkdown here!"
+        placeholder="# Enter some markdown here!"
         className={styles.editor}
         resize="none"
         animate={false}

components/Playground.tsx

@@ -5,17 +5,20 @@ import { FileDropzone } from "./FileDropzone";
 import { Header } from "./Header";
 import { PlaygroundView } from "./PlaygroundView";
 import { PlaygroundProvider } from "./usePlayground";
+import { UploadProvider } from "./useUpload";
 
 const tabs = ["Editor", "Preview"];
 
 export default function Playground(): ReactElement {
   return (
     <PlaygroundProvider>
-      <TabsManager tabs={tabs} tabsId="editor-tabs">
-        <Header />
-        <FileDropzone />
-        <PlaygroundView />
-      </TabsManager>
+      <UploadProvider>
+        <TabsManager tabs={tabs} tabsId="editor-tabs">
+          <Header />
+          <FileDropzone />
+          <PlaygroundView />
+        </TabsManager>
+      </UploadProvider>
     </PlaygroundProvider>
   );
 }

components/useUpload.tsx

@@ -0,0 +1,102 @@
+import React, {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+import {
+  FileUploadHookReturnValue,
+  GetFileParser,
+  getSplitFileUploads,
+  useFileUpload,
+} from "react-md";
+import { ErrorModal } from "./ErrorModal";
+import { usePlayground } from "./usePlayground";
+
+type UploadContext = Pick<
+  FileUploadHookReturnValue,
+  "onDrop" | "onChange" | "accept"
+>;
+
+const noop = (): void => {
+  // do nothing
+};
+
+const context = createContext<UploadContext>({
+  onDrop: noop,
+  onChange: noop,
+  accept: "",
+});
+context.displayName = "Upload";
+const { Provider } = context;
+
+export function useUpload(): Readonly<UploadContext> {
+  return useContext(context);
+}
+
+const getFileParser: GetFileParser = () => "readAsText";
+const extensions = [
+  "md",
+  "txt",
+  "js",
+  "jsx",
+  "ts",
+  "tsx",
+  "json",
+  "yml",
+  "yaml",
+  "html",
+] as const;
+
+export function UploadProvider({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
+  const { setMarkdown } = usePlayground();
+  const { onDrop, stats, reset, errors, clearErrors, accept, onChange } =
+    useFileUpload({
+      maxFiles: 1,
+      getFileParser,
+      extensions,
+    });
+  const { complete } = getSplitFileUploads(stats);
+  const [current] = complete;
+  const type = current?.file.type?.replace(/^.*\//, "");
+  const fileContents = current?.result;
+  useEffect(() => {
+    if (typeof fileContents !== "string") {
+      return;
+    }
+
+    let contents = fileContents;
+    if (type !== "markdown" && type) {
+      contents = `\`\`\`${type}
+${fileContents}\`\`\`
+`;
+    }
+
+    setMarkdown(contents);
+    reset();
+    // TODO: Add reset to dependency array after next release
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fileContents, setMarkdown, type]);
+
+  return (
+    <Provider
+      value={useMemo(
+        () => ({
+          onDrop,
+          accept,
+          onChange,
+        }),
+        [accept, onChange, onDrop]
+      )}
+    >
+      <ErrorModal errors={errors} clearErrors={clearErrors} />
+      {children}
+    </Provider>
+  );
+}