file upload

betteridea-dev · Sep 20, 2024 · 81f668d · 81f668d
1 parent 957007f
commit 81f668d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 15 deletions.
diff --git a/next_app/src/components/drawer/components/file-list.tsx b/next_app/src/components/drawer/components/file-list.tsx
@@ -1,6 +1,8 @@
 import { useGlobalState, useProjectManager } from "@/hooks";
 import { TDrawerItem } from "."
 import { Button } from "@/components/ui/button";
+import Dropzone from "react-dropzone";
+import { toast } from "sonner";
 
 function FileList() {
     const manager = useProjectManager();
@@ -9,11 +11,13 @@ function FileList() {
     if (globalState.activeProject) {
         const project = manager.projects[globalState.activeProject];
         return <div className="flex flex-col">
-            <h1 className="text-left m-3 text-muted-foreground flex items-center justify-between">FILE EXPLORER <Button variant="ghost" className="rounded-none hover:bg-primary w-fit h-6 my-2.5 text-muted-foreground hover:text-black ml-auto px-3"
-                onClick={() => {
-                    document.getElementById("new-file")?.click()
-                }}
-            >+ New File</Button></h1>
+            <h1 className="text-left m-3 text-muted-foreground flex items-center justify-between">FILE EXPLORER
+                <Button variant="ghost" className="rounded-none hover:bg-primary w-fit h-6 my-2.5 text-muted-foreground hover:text-black ml-auto px-2"
+                    onClick={() => {
+                        document.getElementById("new-file")?.click()
+                    }}
+                >+ New File</Button>
+            </h1>
             {
                 Object.keys(project.files).toSorted().map((fname, i) => <Button key={i} variant="ghost"
                     data-active={globalState.activeFile == fname}
@@ -27,6 +31,47 @@ function FileList() {
                     {fname}
                 </Button>)
             }
+            <div>
+                <Dropzone
+                    accept={{ 'text/markdown': ['.md'], 'application/json': ['.json', '.luanb'], 'text/x-lua': ['.lua'] }}
+                    onDrop={acceptedFiles => {
+                        console.log(acceptedFiles)
+                        const file = acceptedFiles[0]
+                        const reader = new FileReader()
+                        reader.onload = () => {
+                            console.log(reader.result)
+                            // add new file to project
+                            const proj = manager.getProject(globalState.activeProject);
+                            if (proj.files[file.name]) return toast.error("File already exists")
+                            const f = manager.newFile(proj, {
+                                name: file.name,
+                                type: file.name.endsWith(".luanb") ? "NOTEBOOK" : "NORMAL",
+                                initialContent: reader.result as string,
+                            });
+                            // if notebook replace content
+                            if (f.type == "NOTEBOOK") {
+                                f.content = JSON.parse(reader.result as string).content;
+                                proj.files[f.name] = f;
+                                manager.projects[globalState.activeProject] = proj;
+                                manager.saveProjects(manager.projects);
+                            }
+                            globalState.setActiveFile(file.name);
+                        }
+                        reader.readAsText(file)
+                    }}>
+                    {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject }) => {
+                        return (
+                            <section data-active={isDragActive} className="text-center text-muted p-2 py-4 border m-2 rounded border-dashed data-[active=true]:border-primary">
+                                <div {...getRootProps()}>
+                                    <input {...getInputProps()} />
+                                    {/* <p>Drag 'n' drop some files here, or click to select files</p> */}
+                                    Upload File (.lua, .luanb, .md)
+                                </div>
+                            </section>
+                        )
+                    }}
+                </Dropzone>
+            </div>
         </div>
     } else {
         return <div className="flex flex-col">

diff --git a/next_app/src/components/menubar/components/new-file.tsx b/next_app/src/components/menubar/components/new-file.tsx
@@ -56,7 +56,7 @@ export default function NewFile() {
                     <DialogDescription>Enter the name of the file you want to create<br />(supported extensions: lua, luanb, md)</DialogDescription>
                 </DialogHeader>
                 <Input type="text" placeholder="File Name" onChange={(e) => setNewFileName(e.target.value)} onKeyDown={handleEnter} />
-                <div className="text-muted text-center rounded-md p-5 border border-dashed">
+                <div className="text-muted text-center rounded-md p-0">
                     {/* Upload File (coming soon...) */}
                     <Dropzone
                         accept={{ 'text/markdown': ['.md'], 'application/json': ['.json', '.luanb'], 'text/x-lua': ['.lua'] }}
@@ -86,15 +86,17 @@ export default function NewFile() {
                             }
                             reader.readAsText(file)
                         }}>
-                        {({ getRootProps, getInputProps }) => (
-                            <section>
-                                <div {...getRootProps()}>
-                                    <input {...getInputProps()} />
-                                    {/* <p>Drag 'n' drop some files here, or click to select files</p> */}
-                                    Upload File (.lua, .luanb, .md)
-                                </div>
-                            </section>
-                        )}
+                        {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject }) => {
+                            return (
+                                <section data-active={isDragActive} className="text-center text-muted p-6 border rounded border-dashed data-[active=true]:border-primary">
+                                    <div {...getRootProps()}>
+                                        <input {...getInputProps()} />
+                                        {/* <p>Drag 'n' drop some files here, or click to select files</p> */}
+                                        Upload File (.lua, .luanb, .md)
+                                    </div>
+                                </section>
+                            )
+                        }}
                     </Dropzone>
                 </div>
                 <Button onClick={() => newFile()}>Create File</Button>