[image-upload]: configurable max image upload size (#22)

* max file size is configurable

* edit version.ts

* rename property

Author: tom-schoener

api/config.yaml

@@ -11,6 +11,8 @@ db:
 challenges:
   liveParty:
     defaultTimePerSubmissionSeconds: 45
+  fileUpload:
+    maxFileSizeMb: 5
 imgProxy:
   enabled: true
   url: "http://localhost:8081"

api/main.go

@@ -34,6 +34,7 @@ func init() {
 	viper.SetDefault("db.host", "localhost:5432")
 	viper.SetDefault("db.poolSize", 50)
 	viper.SetDefault("challenges.party.live.defaultTimePerSubmissionSeconds", 45)
+	viper.SetDefault("challenges.fileUpload.maxFileSizeMb", 5)
 	viper.SetDefault("imgProxy.enabled", false)
 	viper.SetDefault("imgProxy.url", "http://localhost:8081")
 	viper.SetDefault("imgProxy.sharedLocalCacheDir", "/tmp/group-challenge-cache")

api/pkg/group-challenge/api/api.go

@@ -25,7 +25,7 @@ var (
 	livePartyHub            *liveparty.LivePartyHub
 	imgCache                *ttlcache.Cache[string, models.Image]
 	wsHub                   *ws.Hub
-	maxImageFileSize        int64  = 4 << 20
+	maxImageFileSize        int64
 	imagesInMemoryCacheSize uint64 = 35
 	imgProxyConfig          config.ImgProxyConfig
 )
@@ -76,6 +76,10 @@ func configureAPIRouter(router *gin.Engine, con *pg.DB) {
 			user.GET("", usersHandler)
 			user.GET("/:id", userByIdHandler)
 		}
+		config := v1.Group("/config")
+		{
+			config.GET("", configHandler)
+		}
 
 		v1.GET("ws", createWsHandler())
 	}
@@ -106,6 +110,7 @@ func RunServer(serverConfig config.ServerConfig, challengesConfig config.Challen
 	con = _con
 	livePartyHub = liveparty.CreateLivePartyHub(challengesConfig.LiveParty, con)
 	imgProxyConfig = _imgProxyConfig
+	maxImageFileSize = int64(challengesConfig.FileUpload.MaxFileSizeMb) << 20
 
 	// in-memory image cache
 	loader := ttlcache.LoaderFunc[string, models.Image](

api/pkg/group-challenge/api/config.go

@@ -0,0 +1,16 @@
+package api
+
+import (
+	"github.com/gin-gonic/gin"
+)
+
+type ConfigResponse struct {
+	MaxUploadSize int64 `json:"maxUploadSize"`
+}
+
+func configHandler(c *gin.Context) {
+	configResponse := ConfigResponse{
+		MaxUploadSize: maxImageFileSize,
+	}
+	c.JSON(200, configResponse)
+}

api/pkg/group-challenge/config/config.go

@@ -26,7 +26,12 @@ type DBConfig struct {
 }
 
 type ChallengesConfig struct {
-	LiveParty LivePartyConfig
+	LiveParty  LivePartyConfig
+	FileUpload FileUploadConfig
+}
+
+type FileUploadConfig struct {
+	MaxFileSizeMb int
 }
 
 type LivePartyConfig struct {

frontend/src/api/api-models.ts

@@ -1,5 +1,9 @@
 //response interfaces
 
+export interface ConfigResponse {
+  maxUploadSize: number;
+}
+
 export interface PaginationResponse<T> {
   pageSize: number;
   page: number;

frontend/src/api/api.ts

@@ -9,6 +9,7 @@ import {
   GCWebSocketEvent,
   PartyReaction,
   PaginationPartiesResponse,
+  ConfigResponse,
 } from './api-models';
 import { PartyFormData } from '../party/PartyForm';
 import { useSession } from '../user/session';
@@ -165,6 +166,21 @@ export const usePartyStatus = (id: string) =>
 export const useUsers = () => useApiHook<UserResponse[]>({ queryKey: ['users'] });
 export const useUser = (id: string) => useApiHook<UserResponse>({ queryKey: ['users', id] });
 
+export const useConfig = () => {
+  const [session] = useSession();
+
+  return useQuery(['config'], () => config({ sessionToken: session?.token! }));
+};
+
+export async function config({ sessionToken }: { sessionToken: string }): Promise<ConfigResponse> {
+  return fetch(`${API_URLS.API}/config`, {
+    method: 'GET',
+    headers: {
+      'X-AuthToken': sessionToken,
+    },
+  }).then((res) => res.json());
+}
+
 export async function signIn(emailOrUsername: string, password: string): Promise<UserSession | undefined> {
   const response = await fetch(`${API_URLS.AUTH}/signin`, {
     body: JSON.stringify({ emailOrUsername, password: window.btoa(password) }),

frontend/src/party/submissions/PostPartySubmission.tsx

@@ -4,38 +4,43 @@ import { FaUpload } from 'react-icons/fa';
 import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'react-router';
 import { toast } from 'react-toastify';
-import { addSubmission } from '../../api/api';
+import { addSubmission, useConfig } from '../../api/api';
 import { PartyResponse, PartySubmissionFormData } from '../../api/api-models';
 import { useSession } from '../../user/session';
 
-const MAX_FILE_SIZE = 4 << 20;
-
 function PostPartySubmission({ party, afterUpload }: { party: PartyResponse; afterUpload?: () => any }) {
   const [session] = useSession();
   const { id } = useParams<{ id: string }>();
   const [imgPrevSrc, setImgPrevSrc] = useState<string | undefined>();
   const form = useForm<PartySubmissionFormData>();
   const { mutateAsync } = useMutation(addSubmission);
+  const { data: appConfig } = useConfig();
 
   const file = form.watch('files')?.[0];
-  const fileTooLarge = file?.size > MAX_FILE_SIZE;
   const hasPreview = () => !!imgPrevSrc;
 
   useEffect(() => {
-    if (!file || fileTooLarge) {
+    if (!file || !appConfig) {
+      return;
+    }
+
+    if (file?.size > appConfig?.maxUploadSize) {
       return;
     }
+
     const reader = new FileReader();
     reader.onload = function (e: ProgressEvent<FileReader>) {
       setImgPrevSrc(e.target!.result as string);
     };
     reader.readAsDataURL(file);
-  }, [file, fileTooLarge]);
+  }, [file, appConfig]);
 
   if (!id) {
     return <div>No party id provided</div>;
   }
 
+  const fileTooLarge = appConfig?.maxUploadSize && file?.size > appConfig?.maxUploadSize;
+
   const onSubmit = async (data: PartySubmissionFormData) => {
     const req = await mutateAsync({ partyId: id, submission: data, sessionToken: session!.token });
     if (req.status === 413) {
@@ -68,7 +73,7 @@ function PostPartySubmission({ party, afterUpload }: { party: PartyResponse; aft
             >
               <FaUpload size={26} />
               <span className="mt-2 text-base leading-normal uppercase">Select a file</span>
-              <span className="font-light">max {MAX_FILE_SIZE >> 20}MB</span>
+              <span className="font-light">max {(appConfig?.maxUploadSize ?? 0) >> 20}MB</span>
               <input
                 className="hidden"
                 type="file"

frontend/src/version.ts

@@ -9,6 +9,10 @@ interface Change {
 }
 
 export const CHANGES: Change[] = [
+  {
+    name: '0.13.0',
+    changes: [{ description: 'Configurable max file upload size (default: 5MB)', type: 'feature' }],
+  },
   {
     name: '0.12.0',
     changes: [