first commit

src/app/Component/upload.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { FileUploader } from "react-drag-drop-files";
+
+const fileTypes = ["JPG", "PNG", "GIF"];
+
+function DragDrop({setPreview ,file, setFile}) {
+
+  const handleChange = (file) => {
+    setFile(file);
+  };
+
+  useEffect(()=>{
+    if(!file) return;
+
+     const objectUrl = URL.createObjectURL(file)
+     setPreview(objectUrl)
+
+    // free memory when ever this component is unmounted
+    return () => URL.revokeObjectURL(objectUrl)
+  },[file])
+  return (
+    <FileUploader handleChange={handleChange} name="file" types={fileTypes} multiple={false}/>
+  );
+}
+
+
+export default function Upload({daySelected={daySelected}}){
+  const [file, setFile] = useState(null);
+  const [preview, setPreview] = useState(null);
+
+    function uploadFile(){
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("date", daySelected)
+
+    fetch("/api/days", {
+        method: "POST",
+        body: formData,
+    }).then(() => {
+        setFile(null);
+        setPreview(null);
+    });
+    }
+
+    return(
+        <div className="Upload">
+
+            <div className="preview">
+                {preview ? <img src={preview} alt="preview" /> : null}
+            </div>
+
+            <DragDrop setPreview={setPreview} file={file} setFile={setFile}/>
+
+
+            <select type="select">
+                <option value="gesture">Gesture</option>
+                <option value="blender">Blender</option>
+            </select>
+
+            <p onClick={()=>{
+                uploadFile()
+            }}>Upload</p>
+
+        </div>
+    )
+}