Fix

web/apps/photos/src/pages/index.tsx

@@ -22,7 +22,7 @@ import { t } from "i18next";
 import { useRouter } from "next/router";
 import { CarouselProvider, DotGroup, Slide, Slider } from "pure-react-carousel";
 import "pure-react-carousel/dist/react-carousel.es.css";
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import { useAppContext } from "./_app";
 

web/apps/photos/src/services/upload/uploadHttpClient.ts

@@ -18,9 +18,10 @@ class UploadHttpClient {
             if (!token) {
                 return;
             }
+            const url = await apiURL("/files");
             const response = await retryHTTPCall(
                 () =>
-                    HTTPService.post(await apiURL("/files"), uploadFile, null, {
+                    HTTPService.post(url, uploadFile, null, {
                         "X-Auth-Token": token,
                     }),
                 handleUploadError,

web/packages/new/photos/components/DevSettings.tsx

@@ -72,7 +72,7 @@ const Contents: React.FC<ContentsProps> = (props) => {
                 setInitialAPIOrigin(
                     // TODO: Migration of apiOrigin from local storage to indexed DB
                     // Remove me after a bit (27 June 2024).
-                    o ?? localStorage.getItem("apiOrigin") ?? undefined,
+                    o ?? localStorage.getItem("apiOrigin") ?? "",
                 ),
             ),
         [],
@@ -80,20 +80,20 @@ const Contents: React.FC<ContentsProps> = (props) => {
 
     // Even though this is async, this should be instantanous, we're just
     // reading the value from the local IndexedDB.
-    if (!initialAPIOrigin) return <></>;
+    if (initialAPIOrigin === undefined) return <></>;
 
     return <Form {...{ initialAPIOrigin }} {...props} />;
 };
 
 type FormProps = ContentsProps & {
     /** The initial value of API origin to prefill in the text input field. */
-    initialAPIOrigin: string | undefined;
+    initialAPIOrigin: string;
 };
 
 const Form: React.FC<FormProps> = ({ initialAPIOrigin, onClose }) => {
     const form = useFormik({
         initialValues: {
-            apiOrigin: initialAPIOrigin ?? "",
+            apiOrigin: initialAPIOrigin,
         },
         validate: ({ apiOrigin }) => {
             try {