galleries have upload dates and fize sizes added

Author: Ivana-B2

backend/app/alembic/versions/2025011501_add_photo_file_size_uploaded_at.py

@@ -0,0 +1,34 @@
+"""add file_size and uploaded_at to photo table
+
+Revision ID: 2025011501
+Revises: 2025111201
+Create Date: 2025-01-15
+"""
+
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = "2025011501"
+down_revision = "2025111201"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # Add file_size column (in bytes, default 0 for existing photos)
+    op.add_column("photo", sa.Column("file_size", sa.Integer(), nullable=False, server_default="0"))
+    
+    # Add uploaded_at column (use created_at as default for existing photos)
+    # First add as nullable, then update existing rows, then make non-nullable
+    op.add_column("photo", sa.Column("uploaded_at", sa.DateTime(), nullable=True))
+    op.execute("UPDATE photo SET uploaded_at = created_at WHERE uploaded_at IS NULL")
+    op.alter_column("photo", "uploaded_at", nullable=False)
+
+
+def downgrade():
+    op.drop_column("photo", "uploaded_at")
+    op.drop_column("photo", "file_size")
+

backend/app/api/routes/galleries.py

@@ -225,6 +225,7 @@ async def upload_gallery_photos(
             target_path = storage_dir / f"{stem}-{counter}{ext}"
             counter += 1
         content = await uf.read()
+        file_size = len(content)  # Get file size in bytes
         with open(target_path, "wb") as out:
             out.write(content)
 
@@ -236,6 +237,7 @@ async def upload_gallery_photos(
                 gallery_id=id,
                 filename=rel_filename,
                 url=f"/api/v1/galleries/{id}/photos/files/{rel_filename}",
+                file_size=file_size,
             ),
         )
         saved.append(photo)

backend/app/models.py

@@ -251,11 +251,14 @@ class PhotoCreate(SQLModel):
     gallery_id: uuid.UUID
     filename: str = Field(min_length=1, max_length=255)
     url: str = Field(min_length=1, max_length=500)
+    file_size: int = Field(ge=0)  # File size in bytes
 
 
 class Photo(PhotoBase, table=True):
     id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
     created_at: datetime = Field(default_factory=datetime.utcnow)
+    uploaded_at: datetime = Field(default_factory=datetime.utcnow)  # When photo was uploaded
+    file_size: int = Field(default=0, ge=0)  # File size in bytes
     gallery_id: uuid.UUID = Field(
         foreign_key="gallery.id", nullable=False, ondelete="CASCADE"
     )
@@ -264,6 +267,8 @@ class Photo(PhotoBase, table=True):
 class PhotoPublic(PhotoBase):
     id: uuid.UUID
     created_at: datetime
+    uploaded_at: datetime
+    file_size: int
     gallery_id: uuid.UUID
 
 

frontend/src/routes/_layout/galleries.$galleryId.tsx

@@ -92,9 +92,18 @@ function GalleryDetail() {
         },
       })
       if (!res.ok) throw new Error("Failed to load photos")
-      const data = await res.json() as { data: { id: string; filename: string; url: string }[]; count: number }
+      const data = await res.json() as { 
+        data: { 
+          id: string; 
+          filename: string; 
+          url: string; 
+          file_size: number; 
+          uploaded_at: string;
+        }[]; 
+        count: number 
+      }
       // Convert relative URLs to absolute URLs
-      data.data = data.data.map((photo: { id: string; filename: string; url: string }) => ({
+      data.data = data.data.map((photo) => ({
         ...photo,
         url: photo.url.startsWith("http") ? photo.url : `${OpenAPI.BASE}${photo.url}`,
       }))
@@ -204,6 +213,32 @@ function GalleryDetail() {
     setSelected((prev: Record<string, boolean>) => ({ ...prev, [id]: !prev[id] }))
   }
 
+  // Format file size for display
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i]
+  }
+
+  // Format date for display
+  const formatDate = (dateString: string | undefined): string => {
+    if (!dateString) return "Unknown"
+    try {
+      const date = new Date(dateString)
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    } catch {
+      return "Unknown"
+    }
+  }
+
   const onDownloadAll = () => {
     if (!hasPhotos) {
       showErrorToast("There are no photos in this gallery to download")
@@ -445,14 +480,28 @@ function GalleryDetail() {
                       ›
                     </Button>
                   </Box>
-                  <Box> {/* TODO: Add file size and date added */ }
-                    <Text fontWeight="bold">Filename: {photos[currentPhotoIndex].filename}</Text>
-                    <Text>
-                      Size: unknown (file size is not tracked in the database)
-                    </Text>
-                    <Text>
-                      Date added: {gallery.date ?? "Unknown"}
-                    </Text>
+                  <Box>
+                    <Stack gap={2}>
+                      <Text fontWeight="bold">Filename: {photos[currentPhotoIndex].filename}</Text>
+                      <Text>
+                        Size: {photos[currentPhotoIndex].file_size 
+                          ? formatFileSize(photos[currentPhotoIndex].file_size) 
+                          : "Unknown"}
+                      </Text>
+                      <Text>
+                        Date uploaded: {formatDate(photos[currentPhotoIndex].uploaded_at)}
+                      </Text>
+                      <Flex alignItems="center" gap={2} mt={2}>
+                        <Checkbox
+                          checked={!!selected[photos[currentPhotoIndex].id]}
+                          onCheckedChange={() => {
+                            onSelectToggle(photos[currentPhotoIndex].id)
+                          }}
+                        >
+                          Select this photo
+                        </Checkbox>
+                      </Flex>
+                    </Stack>
                   </Box>
                 </Stack>
               )}
@@ -478,7 +527,7 @@ function GalleryDetail() {
               }}
               gap={4}
             >
-              {photos.map((p: { id: string; filename: string; url: string }, index: number) => (
+              {photos.map((p: { id: string; filename: string; url: string; file_size?: number; uploaded_at?: string }, index: number) => (
                 <Box
                   key={p.id}
                   position="relative"
@@ -489,18 +538,38 @@ function GalleryDetail() {
                   alignItems="center"
                   justifyContent="center"
                   overflow="hidden"
-                  onClick={() => openLightboxAt(index)}
+                  onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                    // Don't open dialog if clicking on checkbox
+                    const target = e.target as HTMLElement
+                    if (target.closest('[role="checkbox"]') || target.closest('input[type="checkbox"]')) {
+                      return
+                    }
+                    openLightboxAt(index)
+                  }}
                   cursor="pointer"
                 >
                   <img
                     src={p.url}
                     alt={p.filename}
                     style={{ width: "100%", height: "100%", objectFit: "cover" }}
                   />
-                  <Box position="absolute" top="8px" left="8px" bg="whiteAlpha.800" borderRadius="md" p={1}>
+                  <Box 
+                    position="absolute" 
+                    top="8px" 
+                    left="8px" 
+                    bg="whiteAlpha.800" 
+                    borderRadius="md" 
+                    p={1}
+                    onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                      // Stop propagation so clicking checkbox doesn't open dialog
+                      e.stopPropagation()
+                    }}
+                  >
                     <Checkbox
                       checked={!!selected[p.id]}
-                      onCheckedChange={() => onSelectToggle(p.id)}
+                      onCheckedChange={() => {
+                        onSelectToggle(p.id)
+                      }}
                     >
                       Select
                     </Checkbox>