fix: adds relative image url path for self hosters without s3 (#2096)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditWelcomeCard.tsx

@@ -29,8 +29,9 @@ export default function EditWelcomeCard({
   const [firstRender, setFirstRender] = useState(true);
   const path = usePathname();
   const environmentId = path?.split("/environments/")[1]?.split("/")[0];
-  // const [open, setOpen] = useState(false);
+
   let open = activeQuestionId == "start";
+
   const setOpen = (e) => {
     if (e) {
       setActiveQuestionId("start");
@@ -39,7 +40,7 @@ export default function EditWelcomeCard({
     }
   };
 
-  const updateSurvey = (data) => {
+  const updateSurvey = (data: Partial<TSurvey["welcomeCard"]>) => {
     setLocalSurvey({
       ...localSurvey,
       welcomeCard: {
@@ -48,6 +49,7 @@ export default function EditWelcomeCard({
       },
     });
   };
+
   useEffect(() => {
     setFirstRender(true);
   }, [activeQuestionId]);
@@ -174,9 +176,7 @@ export default function EditWelcomeCard({
                 />
               </div>
               <div className="flex-column">
-                <Label htmlFor="timeToFinish" className="">
-                  Time to Finish
-                </Label>
+                <Label htmlFor="timeToFinish">Time to Finish</Label>
                 <div className="text-sm text-slate-500 dark:text-slate-400">
                   Display an estimate of completion time for survey
                 </div>
@@ -195,9 +195,7 @@ export default function EditWelcomeCard({
                   />
                 </div>
                 <div className="flex-column">
-                  <Label htmlFor="showResponseCount" className="">
-                    Show Response Count
-                  </Label>
+                  <Label htmlFor="showResponseCount">Show Response Count</Label>
                   <div className="text-sm text-slate-500 dark:text-slate-400">
                     Display number of responses for survey
                   </div>

apps/web/next.config.mjs

@@ -117,6 +117,12 @@ if (process.env.WEBAPP_URL) {
     protocol: "https",
     hostname: getHostname(process.env.WEBAPP_URL),
   });
+} else {
+  // The WEBAPP_URL is not set, so we allow all origins
+  nextConfig.images.remotePatterns.push({
+    protocol: "https",
+    hostname: "**",
+  });
 }
 
 const sentryOptions = {

packages/lib/storage/service.ts

@@ -201,7 +201,7 @@ export const getUploadSignedUrl = async (
           uuid,
         },
         updatedFileName,
-        fileUrl: new URL(`${WEBAPP_URL}/storage/${environmentId}/${accessType}/${updatedFileName}`).href,
+        fileUrl: `/storage/${environmentId}/${accessType}/${updatedFileName}`,
       };
     } catch (err) {
       throw err;

packages/lib/storage/utils.ts

@@ -1,9 +1,12 @@
 export const getOriginalFileNameFromUrl = (fileURL: string) => {
   try {
-    const fileNameFromURL = new URL(fileURL).pathname.split("/").pop();
-    const fileExt = fileNameFromURL?.split(".").pop();
-    const originalFileName = fileNameFromURL?.split("--fid--")[0];
-    const fileId = fileNameFromURL?.split("--fid--")[1];
+    const fileNameFromURL = fileURL.startsWith("/storage/")
+      ? fileURL.split("/").pop()
+      : new URL(fileURL).pathname.split("/").pop();
+
+    const fileExt = fileNameFromURL?.split(".").pop() ?? "";
+    const originalFileName = fileNameFromURL?.split("--fid--")[0] ?? "";
+    const fileId = fileNameFromURL?.split("--fid--")[1] ?? "";
 
     if (!fileId) {
       const fileName = originalFileName ? decodeURIComponent(originalFileName || "") : "";

packages/types/user.ts

@@ -45,7 +45,7 @@ export const ZUserUpdateInput = z.object({
   onboardingCompleted: z.boolean().optional(),
   role: ZRole.optional(),
   objective: ZUserObjective.nullish(),
-  imageUrl: z.string().url().nullish(),
+  imageUrl: z.string().nullish(),
   notificationSettings: ZUserNotificationSettings.optional(),
 });