src/services/api/auth.js

@@ -46,5 +46,10 @@ export const apiGetRegistrationQuestionVideo = () =>
 // Media uploads (especially course videos) can legitimately take several
 // minutes on slower connections. Keep the normal API timeout short, but give
 // this endpoint enough time to complete the backend's 300 MB upload contract.
-export const apiUploadMedia = (formData) =>
+// `onUploadProgress` is optional and forwarded straight to axios so callers
-  http.post(endpoints.uploadMedia, formData, { timeout: 10 * 60 * 1000 })
+// can render an upload progress bar (e.g. XHR progress events).
+export const apiUploadMedia = (formData, onUploadProgress) =>
+  http.post(endpoints.uploadMedia, formData, {
+    timeout: 10 * 60 * 1000,
+    ...(onUploadProgress ? { onUploadProgress } : {}),
+  })

src/services/query/auth.js

@@ -79,7 +79,16 @@ export const useGetRegistrationVideoQuery = (options = {}) =>
     ...options,
   })
 
-export const useUploadMediaMutation = () => useMutation({ mutationFn: apiUploadMedia })
+// `mutateAsync` accepts either a raw FormData (existing call sites, no
+// progress tracking) or `{ formData, onUploadProgress }` for callers that
+// want to render upload progress (e.g. a video upload progress bar).
+const uploadMediaMutationFn = (variables) => {
+  if (variables instanceof FormData) return apiUploadMedia(variables)
+  const { formData, onUploadProgress } = variables
+  return apiUploadMedia(formData, onUploadProgress)
+}
+
+export const useUploadMediaMutation = () => useMutation({ mutationFn: uploadMediaMutationFn })
 
 // Register-data is a flat `{ field: value }` object; legacy responses were a
 // `[{ key, value }]` list. Normalize both into the object shape.