finally implement image and urdf uploading

kscalelabs · Aug 3, 2024 · 1fdcf99 · 1fdcf99
1 parent dab9ec7
commit 1fdcf99
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 13 deletions.
diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -1,21 +1,30 @@
 import Carousel from "components/ui/Carousel";
+import { FileSvgDraw } from "components/ui/FileSvgDraw";
+import {
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from "components/ui/FileUpload";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
+import { FileInput, Paperclip } from "lucide-react";
 import { useEffect, useState } from "react";
 
 interface Props {
-  listing_id: string;
+  listingId: string;
   // TODO: If can edit, allow the user to add and delete artifacts.
   edit: boolean;
 }
 
 const ListingArtifacts = (props: Props) => {
-  const { listing_id } = props;
+  const { listingId, edit } = props;
 
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
 
+  const [files, setFiles] = useState<File[] | null>(null);
+
   const [artifacts, setArtifacts] = useState<
     components["schemas"]["ListArtifactsResponse"] | null
   >(null);
@@ -24,7 +33,7 @@ const ListingArtifacts = (props: Props) => {
     const fetchArtifacts = async () => {
       const { data, error } = await auth.client.GET("/artifacts/{listing_id}", {
         params: {
-          path: { listing_id },
+          path: { listing_id: listingId },
         },
       });
 
@@ -35,18 +44,50 @@ const ListingArtifacts = (props: Props) => {
       }
     };
     fetchArtifacts();
-  }, [listing_id]);
+  }, [listingId]);
 
   if (artifacts != null && artifacts.artifacts.length > 0) {
     return (
-      <Carousel
-        items={artifacts.artifacts.map((artifact) => {
-          return {
-            url: artifact.url,
-            caption: artifact.name,
-          };
-        })}
-      />
+      <>
+        <Carousel
+          items={artifacts.artifacts.map((artifact) => {
+            return {
+              url: artifact.url,
+              caption: artifact.name,
+            };
+          })}
+        />
+        {edit ?? (
+          <div>
+            <FileUploader
+              value={files}
+              onValueChange={setFiles}
+              dropzoneOptions={{
+                maxFiles: 5,
+                maxSize: 1024 * 1024 * 4,
+                multiple: true,
+              }}
+              className="relative bg-background rounded-lg p-2"
+            >
+              <FileInput className="outline-dashed outline-1 outline-white">
+                <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+                  <FileSvgDraw />
+                </div>
+              </FileInput>
+              <FileUploaderContent>
+                {files &&
+                  files.length > 0 &&
+                  files.map((file, index: number) => (
+                    <FileUploaderItem key={index} index={index}>
+                      <Paperclip className="h-4 w-4 stroke-current" />
+                      <span>{file.name}</span>
+                    </FileUploaderItem>
+                  ))}
+              </FileUploaderContent>
+            </FileUploader>
+          </div>
+        )}
+      </>
     );
   } else {
     return <></>;

diff --git a/frontend/src/components/listing/ListingBody.tsx b/frontend/src/components/listing/ListingBody.tsx
@@ -23,7 +23,7 @@ const ListingBody = (props: ListingBodyProps) => {
         child_ids={listing.child_ids}
         edit={listing.owner_is_user}
       />
-      <ListingArtifacts listing_id={listing.id} edit={listing.owner_is_user} />
+      <ListingArtifacts listingId={listing.id} edit={listing.owner_is_user} />
     </div>
   );
 };