Fix upload

BrunoQuaresma · BrunoQuaresma · commit e64db78eb833 · 2022-12-20T14:27:15.000Z
diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
-import { FC, useRef } from "react"
+import { FC, DragEvent, useRef } from "react"
 import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
 import { useClickable } from "hooks/useClickable"
 import CircularProgress from "@material-ui/core/CircularProgress"
@@ -9,6 +9,32 @@ import IconButton from "@material-ui/core/IconButton"
 import RemoveIcon from "@material-ui/icons/DeleteOutline"
 import FileIcon from "@material-ui/icons/FolderOutlined"
 
+const useTarDrop = (
+  callback: (file: File) => void,
+): {
+  onDragOver: (e: DragEvent<HTMLDivElement>) => void
+  onDrop: (e: DragEvent<HTMLDivElement>) => void
+} => {
+  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    const file = e.dataTransfer.files[0]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- file can be undefined
+    if (!file || file.type !== "application/x-tar") {
+      return
+    }
+    callback(file)
+  }
+
+  return {
+    onDragOver,
+    onDrop,
+  }
+}
+
 export interface TemplateUploadProps {
   isUploading: boolean
   onUpload: (file: File) => void
@@ -24,6 +50,7 @@ export const TemplateUpload: FC<TemplateUploadProps> = ({
 }) => {
   const styles = useStyles()
   const inputRef = useRef<HTMLInputElement>(null)
+  const tarDrop = useTarDrop(onUpload)
   const clickable = useClickable(() => {
     if (inputRef.current) {
       inputRef.current.click()
@@ -58,6 +85,7 @@ export const TemplateUpload: FC<TemplateUploadProps> = ({
           [styles.disabled]: isUploading,
         })}
         {...clickable}
+        {...tarDrop}
       >
         <Stack alignItems="center" spacing={1}>
           {isUploading ? (
diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts
@@ -405,9 +405,9 @@ export const createTemplateMachine =
         assignJobLogs: assign({ jobLogs: (_, { data }) => data }),
       },
       guards: {
-        isExampleProvided: ({ exampleId }) => exampleId !== undefined,
-        isNotUsingExample: ({ exampleId }) => exampleId === undefined,
-        hasFile: ({ file }) => file !== undefined,
+        isExampleProvided: ({ exampleId }) => Boolean(exampleId),
+        isNotUsingExample: ({ exampleId }) => !exampleId,
+        hasFile: ({ file }) => Boolean(file),
         hasFailed: (_, { data }) => data.job.status === "failed",
         hasMissingParameters: (_, { data }) =>
           Boolean(
