feat: upload banner api temporary

Author: AlexanderWangY

apps/api/cmd/api/main.go

@@ -68,7 +68,7 @@ func main() {
 	authService := services.NewAuthService(userRepo, accountRepo, sessionRepo, txm, client, logger, &cfg.Auth)
 	userService := services.NewUserService(userRepo, logger)
 	eventInterestService := services.NewEventInterestService(eventInterestRepo, logger)
-	eventService := services.NewEventService(eventRepo, userRepo, logger)
+	eventService := services.NewEventService(eventRepo, userRepo, r2Client, &cfg.CoreBuckets, logger)
 	emailService := services.NewEmailService(taskQueueClient, logger)
 	applicationService := services.NewApplicationService(applicationRepo, eventService, txm, r2Client, &cfg.CoreBuckets, logger)
 

apps/api/internal/api/api.go

@@ -105,6 +105,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).Get("/staff", api.Handlers.Event.GetEventStaffUsers)
 			r.With(ensureEventAdmin).Post("/roles", api.Handlers.Event.AssignEventRole)
 

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

@@ -435,3 +435,54 @@ func (h *EventHandler) AssignEventRole(w http.ResponseWriter, r *http.Request) {
 
 	w.WriteHeader(http.StatusOK)
 }
+
+const maxBannerUploadSize = 5 << 20 // 5 Mb
+
+type EventBannerUploadResponse struct {
+	BannerUrl string `json:"banner_url"`
+}
+
+func (h *EventHandler) UploadEventBanner(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
+	}
+
+	if err := r.ParseMultipartForm(maxBannerUploadSize); err != nil {
+		res.SendError(w, http.StatusBadRequest, res.NewError("invalid_request", "could not parse multipart form"))
+		return
+	}
+
+	bannerFile, header, err := r.FormFile("image")
+	if err != nil {
+		res.SendError(w, http.StatusBadRequest, res.NewError("invalid_request", "invalid resume file"))
+		return
+	}
+	defer bannerFile.Close()
+
+	url, err := h.eventService.UploadBanner(r.Context(), eventId, bannerFile, header)
+	switch err {
+	case services.ErrFailedToUploadBanner:
+		res.SendError(w, http.StatusInternalServerError, res.NewError("internal_err", "Something went wrong on our end"))
+		return
+	case services.ErrUnexpectedFileType:
+		res.SendError(w, http.StatusBadRequest, res.NewError("file_error", err.Error()))
+		return
+	case nil:
+		// Continue
+	default:
+		res.SendError(w, http.StatusInternalServerError, res.NewError("internal_err", "Something went wrong on our end"))
+		return
+	}
+
+	res.Send(w, http.StatusOK, EventBannerUploadResponse{
+		BannerUrl: *url,
+	})
+
+}

apps/api/internal/api/response/response.go

@@ -31,7 +31,7 @@ func SendError(w http.ResponseWriter, status int, errorResponse ErrorResponse) {
 
 // Send marshals any successful payload struct to JSON, sets the status code,
 // and writes the response.
-func Send(w http.ResponseWriter, status int, payload interface{}) {
+func Send(w http.ResponseWriter, status int, payload any) {
 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
 	w.WriteHeader(status)
 

apps/api/internal/config/config.go

@@ -35,6 +35,8 @@ type CoreBuckets struct {
 	Avatars            string `env:"USER_AVATARS" envDefault:"core-user-avatars-dev"`
 	ApplicationResumes string `env:"APPLICATION_RESUMES" envDefault:"core-application-resumes-dev"`
 	EventAssets        string `env:"EVENT_ASSETS" envDefault:"core-event-assets-dev"`
+	AvatarsBaseUrl     string `env:"USER_AVATARS_BASE_URL"`
+	EventAssetsBaseUrl string `env:"EVENT_ASSETS_BASE_URL"`
 }
 
 type Config struct {

apps/api/internal/services/events.go

@@ -1,39 +1,54 @@
 package services
 
 import (
+	"bytes"
 	"context"
 	"errors"
+	"fmt"
+	"io"
+	"mime"
+	"mime/multipart"
+	"path/filepath"
+	"strings"
 	"time"
 
 	"github.com/google/uuid"
 	"github.com/rs/zerolog"
+	"github.com/swamphacks/core/apps/api/internal/config"
 	ctxu "github.com/swamphacks/core/apps/api/internal/ctxutils"
 	"github.com/swamphacks/core/apps/api/internal/db/repository"
 	"github.com/swamphacks/core/apps/api/internal/db/sqlc"
+	"github.com/swamphacks/core/apps/api/internal/storage"
 )
 
 var (
-	ErrFailedToCreateEvent = errors.New("failed to create event")
-	ErrFailedToGetEvent    = errors.New("failed to get event")
-	ErrFailedToUpdateEvent = errors.New("failed to update event")
-	ErrFailedToDeleteEvent = errors.New("failed to delete event")
-	ErrFailedToParseUUID   = errors.New("failed to parse uuid")
-	ErrMissingFields       = errors.New("missing fields")
-	ErrMissingPerms        = errors.New("missing perms")
+	ErrFailedToCreateEvent  = errors.New("failed to create event")
+	ErrFailedToGetEvent     = errors.New("failed to get event")
+	ErrFailedToUpdateEvent  = errors.New("failed to update event")
+	ErrFailedToDeleteEvent  = errors.New("failed to delete event")
+	ErrFailedToParseUUID    = errors.New("failed to parse uuid")
+	ErrMissingFields        = errors.New("missing fields")
+	ErrMissingPerms         = errors.New("missing perms")
+	ErrFailedToUploadBanner = errors.New("failed to upload banner")
+	ErrUnexpectedFileType   = errors.New("did not expect this file type")
 
 	ErrFailedToSubmitApplication = errors.New("failed to submit application")
 )
 
 type EventService struct {
 	eventRepo *repository.EventRepository
 	userRepo  *repository.UserRepository
+	storage   storage.Storage
+	buckets   *config.CoreBuckets
 	logger    zerolog.Logger
 }
 
-func NewEventService(eventRepo *repository.EventRepository, userRepo *repository.UserRepository, logger zerolog.Logger) *EventService {
+func NewEventService(eventRepo *repository.EventRepository, userRepo *repository.UserRepository, storage storage.Storage, buckets *config.CoreBuckets, logger zerolog.Logger) *EventService {
 	return &EventService{
 		eventRepo: eventRepo,
 		userRepo:  userRepo,
+		storage:   storage,
+		buckets:   buckets,
 		logger:    logger.With().Str("service", "EventService").Str("component", "events").Logger(),
 	}
 }
@@ -197,3 +212,49 @@ func (s *EventService) IsApplicationsOpen(ctx context.Context, eventId uuid.UUID
 	open := now.After(event.ApplicationOpen) && now.Before(event.ApplicationClose)
 	return open, nil
 }
+
+func (s *EventService) UploadBanner(ctx context.Context, eventId uuid.UUID, banner multipart.File, header *multipart.FileHeader) (*string, error) {
+	bannerFileBuffer := bytes.NewBuffer(nil)
+
+	fileName := header.Filename
+	fileExt := strings.ToLower(filepath.Ext(fileName))
+
+	switch fileExt {
+	case ".jpg", ".png", ".jpeg":
+		// Do nothing
+	default:
+		return nil, ErrUnexpectedFileType
+	}
+
+	fileType := mime.TypeByExtension(fileExt)
+
+	if fileType == "" {
+		return nil, ErrFailedToUploadBanner
+	}
+
+	if _, err := io.Copy(bannerFileBuffer, banner); err != nil {
+		return nil, ErrFailedToUploadBanner
+	}
+
+	uploadKey := fmt.Sprintf("%s/banner%s", eventId, fileExt)
+
+	err := s.storage.Store(ctx, s.buckets.EventAssets, uploadKey, bannerFileBuffer.Bytes(), &fileType)
+	if err != nil {
+		return nil, ErrFailedToUploadBanner
+	}
+
+	// Reconstrust URL
+	url := fmt.Sprintf("%s/%s", s.buckets.EventAssetsBaseUrl, uploadKey)
+
+	err = s.eventRepo.UpdateEventById(ctx, sqlc.UpdateEventByIdParams{
+		ID:             eventId,
+		BannerDoUpdate: true,
+		Banner:         &url,
+	})
+	if err != nil {
+		return nil, ErrFailedToUpdateEvent
+	}
+
+	return &url, nil
+
+}

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

@@ -0,0 +1,107 @@
+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 { toast } from "react-toastify";
+
+interface Props {
+  bannerUrl: string | null;
+  eventId: string;
+}
+
+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 handleFileSelection = (e: FileList | null) => {
+    let files = e ? Array.from(e) : [];
+    setFile(files[0] || null);
+  };
+
+  const handleUpload = async () => {
+    if (file) {
+      console.log("Uploading file:", file);
+      await mutateAsync(file, {
+        onSuccess: (data) => {
+          bannerUrl = data.banner_url;
+          setFile(undefined); // Reset file state after successful upload
+          toast.success("Banner uploaded successfully!", {
+            position: "bottom-right",
+          });
+        },
+        onError: () => {
+          toast.error("Failed to upload banner. Please try again.", {
+            position: "bottom-right",
+          });
+        },
+      });
+    } else {
+      toast.info("No file selected for upload.", {
+        position: "bottom-right",
+      });
+    }
+  };
+
+  return (
+    <div className="max-w-lg flex flex-col gap-2">
+      <p>Banner</p>
+      {bannerUrl || file ? (
+        <>
+          <FileTrigger
+            acceptedFileTypes={["image/png", "image/jpeg", "image/jpg"]}
+            allowsMultiple={false}
+            onSelect={handleFileSelection}
+          >
+            <RAC_Button className="relative w-full h-58 group p-0 overflow-hidden rounded-sm cursor-pointer">
+              <img
+                src={bannerUrl || (file && URL.createObjectURL(file)) || ""}
+                alt="Event Banner"
+                className="object-cover w-full h-full rounded-sm border border-neutral-300 dark:border-neutral-700"
+              />
+              {/* Overlay */}
+              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-row justify-center items-center">
+                <span className="text-white">Change Banner</span>
+              </div>
+            </RAC_Button>
+          </FileTrigger>
+          <Button
+            variant="danger"
+            size="sm"
+            className="rounded-sm"
+            onPress={() => setFile(null)}
+          >
+            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"
+          size="sm"
+          className="rounded-sm"
+          onPress={handleUpload}
+        >
+          Save Banner Changes
+        </Button>
+      )}
+      <p className="text-sm text-neutral-500">
+        Recommended dimensions: 1200x300px. Max file size: 5MB. Supported
+        formats: JPG, JPEG, PNG.
+      </p>
+    </div>
+  );
+};
+
+export default EventBannerUploader;

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

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

apps/web/src/features/Event/hooks/useUploadEventBanner.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { Event } from "../schemas/event";
+import { api } from "@/lib/ky";
+import z from "zod";
+
+//TODO: change this into a openapi spec
+const BannerUploadResponseSchema = z.object({
+  banner_url: z.url(),
+});
+
+export const useUploadEventBanner = (eventId: string) => {
+  const queryClient = useQueryClient();
+
+  const eventQueryKey = ["event", eventId] as const;
+
+  const uploadBanner = async (bannerFile: File) => {
+    const formData = new FormData();
+    formData.append("image", bannerFile);
+
+    const result = await api
+      .post(`events/${eventId}/banner`, {
+        body: formData,
+      })
+      .json();
+
+    return BannerUploadResponseSchema.parse(result);
+  };
+
+  return useMutation({
+    mutationFn: uploadBanner,
+    onSuccess: (data) => {
+      queryClient.setQueryData<Event>(eventQueryKey, (old) => {
+        if (!old) return;
+
+        return {
+          ...old,
+          banner: data.banner_url,
+        };
+      });
+
+      // Also return the new banner URL
+      return data.banner_url;
+    },
+  });
+};

apps/web/src/features/Event/schemas/event.ts

@@ -17,6 +17,7 @@ export const EventSchema = z.object({
   is_published: z.boolean(),
   created_at: z.coerce.date().nullable(),
   updated_at: z.coerce.date().nullable(),
+  banner: z.url().nullable(),
 });
 
 export type Event = z.infer<typeof EventSchema>;