fix: preview file name and content type (#1678)

apps/web/app/(app)/environments/[environmentId]/settings/profile/lib.ts

@@ -52,10 +52,10 @@ export const handleFileUpload = async (
 
     requestHeaders = {
       "X-File-Type": file.type,
-      "X-File-Name": file.name,
+      "X-File-Name": encodeURIComponent(file.name),
       "X-Environment-ID": environmentId ?? "",
       "X-Signature": signature,
-      "X-Timestamp": timestamp,
+      "X-Timestamp": String(timestamp),
       "X-UUID": uuid,
     };
   }

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

@@ -110,6 +110,7 @@ export default function SurveyEditor({
               product={product}
               environment={environment}
               previewType={localSurvey.type === "web" ? "modal" : "fullwidth"}
+              onFileUpload={async (file) => file.name}
             />
           </aside>
         </div>

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

@@ -17,6 +17,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { Variants, motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
+import { TUploadFileConfig } from "@formbricks/types/storage";
 
 type TPreviewType = "modal" | "fullwidth" | "email";
 
@@ -27,6 +28,7 @@ interface PreviewSurveyProps {
   previewType?: TPreviewType;
   product: TProduct;
   environment: TEnvironment;
+  onFileUpload: (file: File, config?: TUploadFileConfig) => Promise<string>;
 }
 
 let surveyNameTemp;
@@ -64,6 +66,7 @@ export default function PreviewSurvey({
   previewType,
   product,
   environment,
+  onFileUpload,
 }: PreviewSurveyProps) {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const [isFullScreenPreview, setIsFullScreenPreview] = useState(false);
@@ -207,7 +210,7 @@ export default function PreviewSurvey({
                     isBrandingEnabled={product.linkSurveyBranding}
                     onActiveQuestionChange={setActiveQuestionId}
                     isRedirectDisabled={true}
-                    onFileUpload={async () => ""}
+                    onFileUpload={onFileUpload}
                   />
                 </Modal>
               ) : (
@@ -222,7 +225,7 @@ export default function PreviewSurvey({
                         activeQuestionId={activeQuestionId || undefined}
                         isBrandingEnabled={product.linkSurveyBranding}
                         onActiveQuestionChange={setActiveQuestionId}
-                        onFileUpload={async () => ""}
+                        onFileUpload={onFileUpload}
                       />
                     </div>
                   </div>
@@ -279,7 +282,7 @@ export default function PreviewSurvey({
                   isBrandingEnabled={product.linkSurveyBranding}
                   onActiveQuestionChange={setActiveQuestionId}
                   isRedirectDisabled={true}
-                  onFileUpload={async () => ""}
+                  onFileUpload={onFileUpload}
                 />
               </Modal>
             ) : (
@@ -293,7 +296,7 @@ export default function PreviewSurvey({
                       isBrandingEnabled={product.linkSurveyBranding}
                       onActiveQuestionChange={setActiveQuestionId}
                       isRedirectDisabled={true}
-                      onFileUpload={async () => ""}
+                      onFileUpload={onFileUpload}
                     />
                   </div>
                 </div>

apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateContainer.tsx

@@ -77,6 +77,7 @@ export default function TemplateContainerWithPreview({
                 product={product}
                 environment={environment}
                 setActiveQuestionId={setActiveQuestionId}
+                onFileUpload={async (file) => file.name}
               />
             </div>
           )}

apps/web/app/api/v1/client/[environmentId]/storage/local/route.ts

@@ -38,7 +38,7 @@ export async function POST(req: NextRequest, context: Context): Promise<NextResp
   const headersList = headers();
 
   const fileType = headersList.get("X-File-Type");
-  const fileName = headersList.get("X-File-Name");
+  const encodedFileName = headersList.get("X-File-Name");
   const surveyId = headersList.get("X-Survey-ID");
 
   const signedSignature = headersList.get("X-Signature");
@@ -49,7 +49,7 @@ export async function POST(req: NextRequest, context: Context): Promise<NextResp
     return responses.badRequestResponse("contentType is required");
   }
 
-  if (!fileName) {
+  if (!encodedFileName) {
     return responses.badRequestResponse("fileName is required");
   }
 
@@ -79,6 +79,8 @@ export async function POST(req: NextRequest, context: Context): Promise<NextResp
     return responses.notFoundResponse("TeamByEnvironmentId", environmentId);
   }
 
+  const fileName = decodeURIComponent(encodedFileName);
+
   // validate signature
 
   const validated = validateLocalSignedUrl(

apps/web/app/api/v1/management/storage/local/route.ts

@@ -17,7 +17,7 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
   const headersList = headers();
 
   const fileType = headersList.get("X-File-Type");
-  const fileName = headersList.get("X-File-Name");
+  const encodedFileName = headersList.get("X-File-Name");
   const environmentId = headersList.get("X-Environment-ID");
 
   const signedSignature = headersList.get("X-Signature");
@@ -28,7 +28,7 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
     return responses.badRequestResponse("fileType is required");
   }
 
-  if (!fileName) {
+  if (!encodedFileName) {
     return responses.badRequestResponse("fileName is required");
   }
 
@@ -60,6 +60,8 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
     return responses.unauthorizedResponse();
   }
 
+  const fileName = decodeURIComponent(encodedFileName);
+
   // validate signature
 
   const validated = validateLocalSignedUrl(

apps/web/app/storage/[environmentId]/[accessType]/[fileName]/lib/getFile.ts

@@ -15,7 +15,7 @@ const getFile = async (environmentId: string, accessType: string, fileName: stri
       return new Response(fileBuffer, {
         headers: {
           "Content-Type": metaData.contentType,
-          "Content-Disposition": "inline",
+          "Content-Disposition": "attachment",
         },
       });
     } catch (err) {

apps/web/app/storage/[environmentId]/[accessType]/[fileName]/route.ts

@@ -22,7 +22,9 @@ export async function GET(
     );
   }
 
-  const { environmentId, accessType, fileName } = params;
+  const { environmentId, accessType, fileName: fileNameOG } = params;
+
+  const fileName = decodeURIComponent(fileNameOG);
 
   if (accessType === "public") {
     return await getFile(environmentId, accessType, fileName);
@@ -42,7 +44,8 @@ export async function GET(
     return responses.unauthorizedResponse();
   }
 
-  return await getFile(environmentId, accessType, fileName);
+  const file = await getFile(environmentId, accessType, fileName);
+  return file;
 }
 
 export async function DELETE(_: NextRequest, { params }: { params: { fileName: string } }) {