feat: banner upload and deletion complete

Author: AlexanderWangY

apps/api/internal/api/api.go

@@ -106,6 +106,7 @@ func (api *API) setupRoutes(mw *mw.Middleware) {
 			// Admin-only
 			r.With(ensureEventAdmin).Patch("/", api.Handlers.Event.UpdateEventById)
 			r.With(ensureEventAdmin).Post("/banner", api.Handlers.Event.UploadEventBanner)
+			r.With(ensureEventAdmin).Delete("/banner", api.Handlers.Event.DeleteBanner)
 			r.With(ensureEventAdmin).Get("/staff", api.Handlers.Event.GetEventStaffUsers)
 			r.With(ensureEventAdmin).Post("/roles", api.Handlers.Event.AssignEventRole)
 

apps/api/internal/api/handlers/events.go

@@ -486,3 +486,24 @@ func (h *EventHandler) UploadEventBanner(w http.ResponseWriter, r *http.Request)
 	})
 
 }
+
+func (h *EventHandler) DeleteBanner(w http.ResponseWriter, r *http.Request) {
+	eventIdStr := chi.URLParam(r, "eventId")
+	if eventIdStr == "" {
+		res.SendError(w, http.StatusBadRequest, res.NewError("missing_event_id", "The event ID is missing from the URL!"))
+		return
+	}
+	eventId, err := uuid.Parse(eventIdStr)
+	if err != nil {
+		res.SendError(w, http.StatusBadRequest, res.NewError("invalid_event_id", "The event ID is not a valid UUID"))
+		return
+	}
+
+	err = h.eventService.DeleteBanner(r.Context(), eventId)
+	if err != nil {
+		res.SendError(w, http.StatusInternalServerError, res.NewError("internal_err", "Something went wrong on our end"))
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+}

apps/api/internal/services/events.go

@@ -219,6 +219,8 @@ func (s *EventService) UploadBanner(ctx context.Context, eventId uuid.UUID, bann
 	fileName := header.Filename
 	fileExt := strings.ToLower(filepath.Ext(fileName))
 
+	s.logger.Info().Str("Filetype", fileExt).Msg("The file type")
+
 	switch fileExt {
 	case ".jpg", ".png", ".jpeg":
 		// Do nothing
@@ -243,8 +245,8 @@ func (s *EventService) UploadBanner(ctx context.Context, eventId uuid.UUID, bann
 		return nil, ErrFailedToUploadBanner
 	}
 
-	// Reconstrust URL
-	url := fmt.Sprintf("%s/%s", s.buckets.EventAssetsBaseUrl, uploadKey)
+	// Reconstrust URL with cache buster
+	url := fmt.Sprintf("%s/%s?t=%d", s.buckets.EventAssetsBaseUrl, uploadKey, time.Now().Unix())
 
 	err = s.eventRepo.UpdateEventById(ctx, sqlc.UpdateEventByIdParams{
 		ID:             eventId,
@@ -258,3 +260,12 @@ func (s *EventService) UploadBanner(ctx context.Context, eventId uuid.UUID, bann
 	return &url, nil
 
 }
+
+func (s *EventService) DeleteBanner(ctx context.Context, eventId uuid.UUID) error {
+	// For now its a soft delete, not actually deleting banner is easiest, just set to null
+	return s.eventRepo.UpdateEventById(ctx, sqlc.UpdateEventByIdParams{
+		ID:             eventId,
+		BannerDoUpdate: true,
+		Banner:         nil,
+	})
+}

apps/web/package.json

@@ -36,6 +36,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.9.0",
+    "browser-image-compression": "^2.0.2",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "js-cookie": "^3.0.5",

apps/web/pnpm-lock.yaml

@@ -1,8 +1,9 @@
 import { Button } from "@/components/ui/Button";
 import { useState } from "react";
 import { Button as RAC_Button, FileTrigger } from "react-aria-components";
-import { useUploadEventBanner } from "../hooks/useUploadEventBanner";
+import { useEventBannerActions } from "../hooks/useEventBannerActions";
 import { toast } from "react-toastify";
+import imageCompression, { type Options } from "browser-image-compression";
 
 interface Props {
   bannerUrl: string | null;
@@ -12,41 +13,106 @@ interface Props {
 const EventBannerUploader = ({ bannerUrl, eventId }: Props) => {
   // State to hold the selected file
   const [file, setFile] = useState<File | null | undefined>(undefined); // File and null can be uploaded, undefined means no change
-  const { mutateAsync } = useUploadEventBanner(eventId);
+  const [currentBanner, setCurrentBanner] = useState<string | null>(bannerUrl);
+  const [uploadProgress, setUploadProgress] = useState(0); // 0-100
+  const [isUploading, setIsUploading] = useState(false);
 
-  const handleFileSelection = (e: FileList | null) => {
-    let files = e ? Array.from(e) : [];
-    setFile(files[0] || null);
+  const { upload, remove } = useEventBannerActions(eventId);
+
+  const handleFileSelection = async (e: FileList | null) => {
+    const files = e ? Array.from(e) : [];
+
+    if (!files[0]) {
+      setFile(null);
+      return;
+    }
+
+    const selectedFile = files[0];
+
+    const options = {
+      maxSizeMB: 0.5,
+      maxWidthOrHeight: 1920,
+      useWebWorker: true,
+    } as Options;
+
+    // Compress the image file
+    const compressedFileBlob = await imageCompression(selectedFile, options);
+
+    // Create a new File object from the compressed Blob to preserve the file name and type
+    // This is needed so the server can correctly identify the file type
+    const compressedFile = new File([compressedFileBlob], selectedFile.name, {
+      type: compressedFileBlob.type,
+    });
+
+    setFile(compressedFile);
   };
 
   const handleUpload = async () => {
     if (file) {
-      console.log("Uploading file:", file);
-      await mutateAsync(file, {
+      setIsUploading(true);
+      setUploadProgress(0);
+
+      // Fake progress bar until upload completes
+      let progress = 0;
+      const interval = setInterval(() => {
+        progress += Math.random() * 3 + 1; // Random increment between 1-4%
+        if (progress >= 80) progress = 80; // Cap at 80% until upload finishes
+        setUploadProgress(progress);
+      }, 10); // Every 10ms to fake a smooth progress
+
+      await upload.mutateAsync(file, {
         onSuccess: (data) => {
-          bannerUrl = data.banner_url;
-          setFile(undefined); // Reset file state after successful upload
+          clearInterval(interval);
+          setUploadProgress(100);
+          setTimeout(() => {
+            setIsUploading(false);
+            setUploadProgress(0);
+            setCurrentBanner(data.banner_url);
+            setFile(undefined);
+          }, 500);
           toast.success("Banner uploaded successfully!", {
             position: "bottom-right",
           });
         },
         onError: () => {
+          clearInterval(interval);
+          setIsUploading(false);
+          setUploadProgress(0);
           toast.error("Failed to upload banner. Please try again.", {
             position: "bottom-right",
           });
         },
       });
     } else {
-      toast.info("No file selected for upload.", {
-        position: "bottom-right",
+      await remove.mutateAsync(undefined, {
+        onSuccess: () => {
+          setCurrentBanner(null);
+          toast.success("Banner removed successfully!", {
+            position: "bottom-right",
+          });
+        },
+        onError: () => {
+          toast.error("Failed to remove banner. Please try again.", {
+            position: "bottom-right",
+          });
+        },
       });
     }
   };
 
   return (
     <div className="max-w-lg flex flex-col gap-2">
       <p>Banner</p>
-      {bannerUrl || file ? (
+      {file === null || (file === undefined && !currentBanner) ? (
+        <FileTrigger
+          acceptedFileTypes={["image/*"]}
+          onSelect={handleFileSelection}
+        >
+          <RAC_Button className="w-full h-58 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-sm cursor-pointer select-none hover:dark:bg-neutral-700 hover:bg-neutral-200 transition-colors">
+            <span className="text-neutral-500">No Banner Uploaded</span>
+          </RAC_Button>
+        </FileTrigger>
+      ) : (
         <>
           <FileTrigger
             acceptedFileTypes={["image/png", "image/jpeg", "image/jpg"]}
@@ -55,9 +121,9 @@ const EventBannerUploader = ({ bannerUrl, eventId }: Props) => {
           >
             <RAC_Button className="relative w-full h-58 group p-0 overflow-hidden rounded-sm cursor-pointer">
               <img
-                src={bannerUrl || (file && URL.createObjectURL(file)) || ""}
+                src={file ? URL.createObjectURL(file) : currentBanner || ""}
                 alt="Event Banner"
-                className="object-cover w-full h-full rounded-sm border border-neutral-300 dark:border-neutral-700"
+                className="w-full h-58 object-cover rounded-sm"
               />
               {/* Overlay */}
               <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-row justify-center items-center">
@@ -74,18 +140,8 @@ const EventBannerUploader = ({ bannerUrl, eventId }: Props) => {
             Remove Banner
           </Button>
         </>
-      ) : (
-        <FileTrigger
-          acceptedFileTypes={["image/*"]}
-          onSelect={handleFileSelection}
-        >
-          <RAC_Button
-            className="w-full h-58 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-sm cursor-pointer select-none hover:dark:bg-neutral-700 hover:bg-neutral-200 transition-colors"
-          >
-            <span className="text-neutral-500">No Banner Uploaded</span>
-          </RAC_Button>
-        </FileTrigger>
       )}
+
       {file !== undefined && (
         <Button
           variant="primary"
@@ -96,10 +152,21 @@ const EventBannerUploader = ({ bannerUrl, eventId }: Props) => {
           Save Banner Changes
         </Button>
       )}
+
       <p className="text-sm text-neutral-500">
         Recommended dimensions: 1200x300px. Max file size: 5MB. Supported
         formats: JPG, JPEG, PNG.
       </p>
+
+      {/* Progress bar for uploads */}
+      {isUploading && (
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-neutral-200 dark:bg-neutral-600 rounded-t overflow-hidden">
+          <div
+            className="h-1 bg-cyan-700 transition-[width] duration-300 ease-out"
+            style={{ width: `${uploadProgress}%` }}
+          />
+        </div>
+      )}
     </div>
   );
 };

apps/web/src/features/Event/components/EventBannerUploader.tsx

@@ -17,6 +17,7 @@ export interface EventCardProps {
   description: string;
   date: string;
   location: string;
+  banner: string | null;
 }
 
 const EventCard = ({
@@ -26,13 +27,14 @@ const EventCard = ({
   description,
   date,
   location,
+  banner,
 }: EventCardProps) => {
   return (
     <Card className="border">
       <div className="w-full">
         <img
           className="w-full h-40 object-cover rounded-t-md"
-          src={imageFile}
+          src={banner ?? imageFile}
           alt={`${title} Image`}
         />
       </div>

apps/web/src/features/Event/components/EventCard.tsx

@@ -246,7 +246,9 @@ const EventSettingsForm = ({ event }: Props) => {
                 isSelected={field.state.value}
                 onChange={field.handleChange}
               >
-                {field.state.value ? "Event is published" : "Event is unpublished"}
+                {field.state.value
+                  ? "Event is published"
+                  : "Event is unpublished"}
               </Switch>
             )}
           </form.Field>

apps/web/src/features/Event/components/EventSettingsForm.tsx

@@ -6,6 +6,8 @@ export function useEvent(eventId: string) {
   const fetchEvent = async () => {
     const data = await getEventById(eventId);
 
+    console.log("Fetched event data:", data);
+
     return EventSchema.parse(data);
   };