Sync-up PR

src/components/DataImport/ArtefactUploadView.jsx

@@ -0,0 +1,224 @@
+import { Button, Flex, Box, Text } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { HiUpload } from "react-icons/hi";
+import server from "../../networking";
+import ToastWizard from "../toastWizard";
+import FileItem from "./FileItem";
+import { IoArrowBackCircleSharp } from "react-icons/io5";
+import PendingBatchCard from "./PendingBatchCard";
+import hp1 from "../../assets/hp1.png";
+
+function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackToPending }) {
+    const batchID = batch?.id;
+    const fileInputRef = useRef(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [fileStatuses, setFileStatuses] = useState({});
+
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event) => {
+        const files = Array.from(event.target.files);
+        if (files.length > 0) {
+            setSelectedFiles((prev) => [...prev, ...files]);
+            // Clear statuses for newly added files
+            const newStatuses = { ...fileStatuses };
+            files.forEach((file) => {
+                delete newStatuses[file.name];
+            });
+            setFileStatuses(newStatuses);
+        }
+    };
+
+    const removeFile = (fileToRemove) => {
+        setSelectedFiles((prev) => prev.filter((file) => file !== fileToRemove));
+        setFileStatuses((prev) => {
+            const updated = { ...prev };
+            delete updated[fileToRemove.name];
+            return updated;
+        });
+    };
+
+    const clearAll = () => {
+        setSelectedFiles([]);
+        setFileStatuses({});
+    };
+
+    const hasPreviousStatus = selectedFiles.some(file => fileStatuses[file.name]);
+
+    const isDisabled =
+        selectedFiles.length === 0 ||
+        isSubmitting ||
+        hasPreviousStatus;
+
+    const handleUpload = async () => {
+        if (selectedFiles.length === 0 || isSubmitting) {
+            ToastWizard.standard("warning", "No Files Selected", "Please choose at least one file before uploading.");
+            return;
+        }
+
+        const formData = new FormData();
+        selectedFiles.forEach((file) => {
+            formData.append("file", file);
+        });
+
+        if (batchID) {
+            formData.append("batchID", batchID);
+        }
+
+        setIsSubmitting(true);
+
+        try {
+            const res = await server.post("/dataImport/upload", formData, {
+                headers: { "Content-Type": "multipart/form-data" },
+                transformRequest: formData => formData
+            });
+
+            const data = res.data;
+            const updates = data.raw?.updates || {};
+            const returnedBatchID = data.raw?.batchID;
+
+            if (returnedBatchID) {
+                setBatchID(returnedBatchID);
+            }
+            setFileStatuses(updates);
+            fetchBatches();
+
+            ToastWizard.standard(
+                "success",
+                "Upload Complete",
+                `Uploaded files to Batch ${returnedBatchID || '<Unknown ID>'}. Ready for processing.`
+            );
+        } catch (err) {
+            console.log(`Non-success response in file upload to batch ${batchID || 'New Batch'}`, err)
+            const updates = err?.response?.data?.raw?.updates;
+            if (updates) {
+                setFileStatuses(updates);
+            } else {
+                // If no detailed errors, mark all files as failed
+                const fallbackStatus = {};
+                selectedFiles.forEach((file) => {
+                    fallbackStatus[file.name] = "ERROR: Failed to upload.";
+                });
+                setFileStatuses(fallbackStatus);
+            }
+
+            ToastWizard.standard("error", "Upload Failed", "Some or all files failed to upload.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    useEffect(() => {
+        return () => {
+            clearAll();
+        }
+    }, []);
+
+    return (
+        <>
+            <Flex mb={{ base: 4, md: 6 }}>
+                <Box>
+                    <Button
+                        variant="ghost"
+                        size={{ base: "sm", md: "md" }}
+                        onClick={() => {
+                            clearAll();
+                            setBatchID(null);
+                            onBackToPending();
+                        }}
+                    >
+                        <IoArrowBackCircleSharp />
+                    </Button>
+
+                </Box>
+                <Box ml={{ base: 5, md: 4 }}>
+                    <PendingBatchCard
+                        batchName={batch?.name || "New Batch"}
+                        artefactCount={batch?.artefactCount || 0}
+                        timestamp={batch?.created || new Date().toLocaleString()}
+                        thumbnail={batch?.thumbnail || hp1}
+                    />
+                </Box>
+            </Flex >
+            <input
+                type="file"
+                accept=".png,.jpg,jpeg"
+                multiple
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                style={{ display: "none" }}
+            />
+
+            <Button
+                leftIcon={<HiUpload />}
+                variant="outline"
+                width={{ base: "400px", md: "full" }}
+                justifyContent="start"
+                mb={4}
+                onClick={handleButtonClick}
+            >
+                Choose Files
+            </Button>
+
+            {
+                selectedFiles.length > 0 && (
+                    <Box mb={4}>
+                        <Flex justify="space-between" align="center" mb={2}>
+                            <Text fontSize="sm" fontWeight="medium">
+                                {selectedFiles.length} file(s) selected
+                            </Text>
+                            <Button size="xs" variant="ghost" colorScheme="red" onClick={clearAll}>
+                                Remove All
+                            </Button>
+                        </Flex>
+
+                        <Box
+                            borderWidth="1px"
+                            borderRadius="md"
+                            p={2}
+                            maxHeight="200px"
+                            overflowY="auto"
+                            bg="gray.50"
+                        >
+                            {selectedFiles.map((file, index) => (
+                                <FileItem
+                                    key={index}
+                                    file={file}
+                                    statusMsg={fileStatuses[file.name]}
+                                    onRemove={removeFile}
+                                />
+                            ))}
+                        </Box>
+                    </Box>
+                )
+            }
+
+            {
+                hasPreviousStatus && (
+                    <Text fontSize="sm" color="orange.500" mt={2}>
+                        Click "Remove All" to upload new files.
+                    </Text>
+                )
+            }
+
+            <Flex direction="row" justify="flex-end" gap={3} mt={4}>
+                <Box pl={{ base: 0, md: 4 }} pr={{ base: 0, md: 4 }} display="flex" gap={2} flexWrap="wrap">
+                    <Button
+                        variant="ArchPrimary"
+                        disabled={isDisabled}
+                        onClick={handleUpload}
+                        loading={isSubmitting}
+                        loadingText={batchID ? `Uploading ${selectedFiles.length} file(s)...` : `Creating batch...`}
+                    >
+                        {batchID ? 'Upload to Existing Batch' : 'Create New Batch and Upload'} ({selectedFiles.length})
+                    </Button>
+                </Box>
+            </Flex >
+        </>
+    );
+}
+
+export default ArtefactUploadView;