file upload support

ROADMAP.md

@@ -29,8 +29,8 @@
 - Multiple select(array of strings)✅
 - date(Firebase timestamp)✅
 - time(Firebase timestamp)✅
-- file(firebase storage url string)
-- image ✅
+- file (single) 🏗️(missing status indicator)
+- image (single) 🏗️(missing status indicator)
 - single select reference(DocReference)
 - multi select reference(DocReference)
 - rating ✅
@@ -51,13 +51,17 @@
 - Edit tables
 - Hide tables
 - On new table add, refresh view to the table view✅
+- import csv to table
 
 ## V1
 
 ### additional fields:
 
+- file (multi)
+- image (multi)
 - Duration
 - Percentage(number)
+- Slider(number)
 - Table(Document[])
 - Rich Text(html string)
 
@@ -90,7 +94,6 @@
 
 ### Functionality:
 
-- import csv to table
 - Themes
 - Table templates
 - Dialog View of a row

src/components/Fields/File.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import useUploader from "../../hooks/useFiretable/useUploader";
+
+import { FieldType } from ".";
+import Chip from "@material-ui/core/Chip";
+import {
+  createStyles,
+  makeStyles,
+  useTheme,
+  Theme,
+} from "@material-ui/core/styles";
+
+// TODO:  indicate state completion / error
+// TODO: Create an interface for props
+
+interface Props {
+  value: any;
+  row: { ref: firebase.firestore.DocumentReference; id: string };
+  onSubmit: Function;
+  fieldType: FieldType;
+  fieldName: string;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      flexWrap: "wrap",
+    },
+    chip: {},
+  })
+);
+
+const File = (props: Props) => {
+  const { fieldName, value, row } = props;
+  const classes = useStyles();
+  const [uploaderState, upload] = useUploader();
+  const onDrop = useCallback(acceptedFiles => {
+    // Do something with the files
+    const imageFile = acceptedFiles[0];
+    if (imageFile) {
+      upload(row.ref, fieldName, [imageFile]);
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple: false,
+  });
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      {value ? (
+        <Chip
+          key={value[0].name}
+          label={value[0].name}
+          className={classes.chip}
+          onClick={() => {
+            window.open(value[0].downloadURL);
+          }}
+        />
+      ) : isDragActive ? (
+        <p>Drop the files here ...</p>
+      ) : (
+        <p>click to select files</p>
+      )}
+    </div>
+  );
+};
+export default File;

src/components/Fields/LongText.tsx

@@ -3,13 +3,11 @@ import ExpandIcon from "@material-ui/icons/AspectRatio";
 import IconButton from "@material-ui/core/IconButton";
 
 interface Props {
-  value: firebase.firestore.Timestamp | null;
-  row: any;
-  onSubmit: Function;
+  value: string | null;
 }
 
-const UrlLink = (props: any) => {
-  const { value, cellActions } = props;
+const UrlLink = (props: Props) => {
+  const { value } = props;
   return value ? (
     <>
       <IconButton>

src/components/Table/grid-fns.tsx

@@ -9,6 +9,7 @@ import firebase from "firebase/app";
 import { Editors } from "react-data-grid-addons";
 import MultiSelect from "../Fields/MultiSelect";
 import Image from "../Fields/Image";
+import File from "../Fields/File";
 
 const { AutoComplete } = Editors;
 
@@ -20,8 +21,8 @@ export const editable = (fieldType: FieldType) => {
     case FieldType.checkBox:
     case FieldType.multiSelect:
     case FieldType.image:
+    case FieldType.file:
       return false;
-
     default:
       return true;
   }
@@ -81,7 +82,11 @@ export const cellFormatter = (column: any) => {
       };
     case FieldType.image:
       return (props: any) => {
-        return <Image {...props} onSubmit={onSubmit(key)} fieldName={key} />;
+        return <Image {...props} fieldName={key} />;
+      };
+    case FieldType.file:
+      return (props: any) => {
+        return <File {...props} fieldName={key} />;
       };
     default:
       return false;