Dataset uploads working

ui/src/app/api/datasets/upload/route.ts

@@ -0,0 +1,55 @@
+// src/app/api/datasets/upload/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { getDatasetsRoot } from '@/app/api/datasets/utils';
+
+export async function POST(request: NextRequest) {
+  try {
+    const datasetsPath = await getDatasetsRoot();
+    if (!datasetsPath) {
+      return NextResponse.json({ error: 'Datasets path not found' }, { status: 500 });
+    }
+    const formData = await request.formData();
+    const files = formData.getAll('files');
+    const datasetName = formData.get('datasetName') as string;
+
+    if (!files || files.length === 0) {
+      return NextResponse.json({ error: 'No files provided' }, { status: 400 });
+    }
+
+    // Create upload directory if it doesn't exist
+    const uploadDir = join(datasetsPath, datasetName);
+    await mkdir(uploadDir, { recursive: true });
+
+    const savedFiles = await Promise.all(
+      files.map(async (file: any) => {
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+
+        // Clean filename and ensure it's unique
+        const fileName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_');
+        const filePath = join(uploadDir, fileName);
+
+        await writeFile(filePath, buffer);
+        return fileName;
+      }),
+    );
+
+    return NextResponse.json({
+      message: 'Files uploaded successfully',
+      files: savedFiles,
+    });
+  } catch (error) {
+    console.error('Upload error:', error);
+    return NextResponse.json({ error: 'Error uploading files' }, { status: 500 });
+  }
+}
+
+// Increase payload size limit (default is 4mb)
+export const config = {
+  api: {
+    bodyParser: false,
+    responseLimit: '50mb',
+  },
+};

ui/src/app/datasets/[datasetName]/page.tsx

@@ -1,19 +1,15 @@
 'use client';
 
 import { useEffect, useState, use } from 'react';
-import Card from '@/components/Card';
-import { Modal } from '@/components/Modal';
-import Link from 'next/link';
-import { TextInput } from '@/components/formInputs';
-import { useRouter } from 'next/router';
+import { FaChevronLeft } from 'react-icons/fa';
 import DatasetImageCard from '@/components/DatasetImageCard';
+import { Button } from '@headlessui/react';
+import AddImagesModal, { openImagesModal } from '@/components/AddImagesModal';
 
 export default function DatasetPage({ params }: { params: { datasetName: string } }) {
   const [imgList, setImgList] = useState<{ img_path: string }[]>([]);
   const usableParams = use(params as any) as { datasetName: string };
   const datasetName = usableParams.datasetName;
-  const [newDatasetName, setNewDatasetName] = useState('');
-  const [isNewDatasetModalOpen, setIsNewDatasetModalOpen] = useState(false);
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
 
   const refreshImageList = (dbName: string) => {
@@ -43,31 +39,42 @@ export default function DatasetPage({ params }: { params: { datasetName: string
       refreshImageList(datasetName);
     }
   }, [datasetName]);
+
   return (
     <>
-      <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-xl font-bold mb-8">Dataset: {datasetName}</h1>
-          </div>
+      {/* Fixed top bar */}
+      <div className="absolute top-0 left-0 w-full h-12  dark:bg-gray-900 shadow-sm z-10 flex items-center px-2">
+        <div>
+          <Button className="text-gray-500 dark:text-gray-300 px-3 mt-1" onClick={() => history.back()}>
+            <FaChevronLeft />
+          </Button>
+        </div>
+        <div>
+          <h1 className="text-lg">Dataset: {datasetName}</h1>
+        </div>
+        <div className="flex-1"></div>
+        <div>
+          <Button
+            className="text-gray-200 bg-slate-600 px-3 py-1 rounded-md"
+            onClick={() => openImagesModal(datasetName, () => refreshImageList(datasetName))}
+          >
+            Add Images
+          </Button>
         </div>
-        <Card title={`Images (${imgList.length})`}>
-          {status === 'loading' && <p>Loading...</p>}
-          {status === 'error' && <p>Error fetching images</p>}
-          {status === 'success' && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-              {imgList.length === 0 && <p>No images found</p>}
-              {imgList.map(img => (
-                <DatasetImageCard
-                  key={img.img_path}
-                  alt="image"
-                  imageUrl={img.img_path}
-                />
-              ))}
-            </div>
-          )}
-        </Card>
       </div>
+      <div className="pt-16 px-6 absolute top-0 left-0 w-full h-full overflow-auto">
+        {status === 'loading' && <p>Loading...</p>}
+        {status === 'error' && <p>Error fetching images</p>}
+        {status === 'success' && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {imgList.length === 0 && <p>No images found</p>}
+            {imgList.map(img => (
+              <DatasetImageCard key={img.img_path} alt="image" imageUrl={img.img_path} />
+            ))}
+          </div>
+        )}
+      </div>
+      <AddImagesModal />
     </>
   );
 }

ui/src/app/layout.tsx

@@ -19,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ThemeProvider>
           <div className="flex h-screen bg-gray-950">
             <Sidebar />
-            <main className="flex-1 p-8 overflow-auto bg-gray-950 text-gray-100">{children}</main>
+            <main className="flex-1 p-8 overflow-auto bg-gray-950 text-gray-100 relative">{children}</main>
           </div>
         </ThemeProvider>
         <ConfirmModal />

ui/src/components/AddImagesModal.tsx

@@ -0,0 +1,161 @@
+'use client';
+import { createGlobalState } from 'react-global-hooks';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { FaUpload } from 'react-icons/fa';
+import { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import axios from 'axios';
+
+export interface AddImagesModalState {
+  datasetName: string;
+  onComplete?: () => void;
+}
+
+export const addImagesModalState = createGlobalState<AddImagesModalState | null>(null);
+
+export const openImagesModal = (datasetName: string, onComplete: () => void) => {
+  addImagesModalState.set({ datasetName, onComplete });
+}
+
+export default function AddImagesModal() {
+  const [addImagesModalInfo, setAddImagesModalInfo] = addImagesModalState.use();
+  const [uploadProgress, setUploadProgress] = useState<number>(0);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const open = addImagesModalInfo !== null;
+
+  const onCancel = () => {
+    if (!isUploading) {
+      setAddImagesModalInfo(null);
+    }
+  };
+
+  const onDone = () => {
+    if (addImagesModalInfo?.onComplete && !isUploading) {
+      addImagesModalInfo.onComplete();
+      setAddImagesModalInfo(null);
+    }
+  };
+
+  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+    if (acceptedFiles.length === 0) return;
+
+    setIsUploading(true);
+    setUploadProgress(0);
+
+    const formData = new FormData();
+    acceptedFiles.forEach(file => {
+      formData.append('files', file);
+    });
+    formData.append('datasetName', addImagesModalInfo?.datasetName || '');
+
+    try {
+      await axios.post(`/api/datasets/upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (progressEvent) => {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 100));
+          setUploadProgress(percentCompleted);
+        },
+        timeout: 0, // Disable timeout
+      });
+
+      onDone();
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setIsUploading(false);
+      setUploadProgress(0);
+    }
+  }, [addImagesModalInfo]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
+      'text/*': ['.txt']
+    },
+    multiple: true
+  });
+
+  return (
+    <Dialog open={open} onClose={onCancel} className="relative z-10">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-900/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+      />
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            transition
+            className="relative transform overflow-hidden rounded-lg bg-gray-800 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"
+          >
+            <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">
+                <div
+                  className="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-slate-600 sm:mx-0 sm:size-10"
+                >
+                  <FaUpload aria-hidden="true" className="size-6 bg-slate-600" />
+                </div>
+                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                  <DialogTitle as="h3" className="text-base font-semibold text-gray-200">
+                    Add Images to: {addImagesModalInfo?.datasetName}
+                  </DialogTitle>
+                  <div className="mt-2">
+                    <div
+                      {...getRootProps()}
+                      className={`mt-4 p-6 border-2 border-dashed rounded-lg cursor-pointer
+                        ${isDragActive ? 'border-blue-500 bg-blue-50/10' : 'border-gray-600'}`}
+                    >
+                      <input {...getInputProps()} />
+                      <p className="text-sm text-gray-200 text-center">
+                        {isDragActive
+                          ? 'Drop the files here...'
+                          : 'Drag & drop files here, or click to select files'}
+                      </p>
+                    </div>
+                    {isUploading && (
+                      <div className="mt-4">
+                        <div className="w-full bg-gray-700 rounded-full h-2.5">
+                          <div
+                            className="bg-blue-600 h-2.5 rounded-full"
+                            style={{ width: `${uploadProgress}%` }}
+                          ></div>
+                        </div>
+                        <p className="text-sm text-gray-300 mt-2 text-center">
+                          Uploading... {uploadProgress}%
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-gray-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+              <button
+                type="button"
+                onClick={onDone}
+                disabled={isUploading}
+                className={`inline-flex w-full justify-center rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-xs sm:ml-3 sm:w-auto
+                  ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
+              >
+                Done
+              </button>
+              <button
+                type="button"
+                data-autofocus
+                onClick={onCancel}
+                disabled={isUploading}
+                className={`mt-3 inline-flex w-full justify-center rounded-md bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-200 hover:bg-gray-800 sm:mt-0 sm:w-auto ring-0
+                  ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
+              >
+                Cancel
+              </button>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

ui/src/components/ConfirmModal.tsx

@@ -13,7 +13,7 @@ export interface ConfirmState {
   onCancel?: () => void;
 }
 
-const confirmstate = createGlobalState<ConfirmState | null>(null);
+export const confirmstate = createGlobalState<ConfirmState | null>(null);
 
 
 export default function ConfirmModal() {