fix: (BACKPORT) file upload validation (#7029)

apps/web/lib/utils/video-upload.ts

@@ -26,7 +26,7 @@ export const checkForVimeoUrl = (url: string): boolean => {
 
     if (vimeoUrl.protocol !== "https:") return false;
 
-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
     const hostname = vimeoUrl.hostname;
 
     return vimeoDomains.includes(hostname);
@@ -74,7 +74,7 @@ export const extractYoutubeId = (url: string): string | null => {
 };
 
 export const extractVimeoId = (url: string): string | null => {
-  const regExp = /vimeo\.com\/(\d+)/;
+  const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
   const match = regExp.exec(url);
 
   if (match?.[1]) {
@@ -85,7 +85,7 @@ export const extractVimeoId = (url: string): string | null => {
 };
 
 export const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/([a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/([a-zA-Z0-9]+)/;
   const match = regExp.exec(url);
 
   if (match?.[1]) {

apps/web/modules/ui/components/file-input/lib/utils.ts

@@ -86,6 +86,10 @@ export const getAllowedFiles = async (
 };
 
 export const checkForYoutubePrivacyMode = (url: string): boolean => {
+  if (!url || typeof url !== "string" || url.trim() === "") {
+    return false;
+  }
+
   try {
     const parsedUrl = new URL(url);
     return parsedUrl.host === "www.youtube-nocookie.com";

packages/survey-ui/src/components/elements/file-upload.tsx

@@ -145,6 +145,7 @@ interface UploadAreaProps {
   onDragOver: (e: React.DragEvent<HTMLLabelElement>) => void;
   onDrop: (e: React.DragEvent<HTMLLabelElement>) => void;
   showUploader: boolean;
+  uploadedFiles: UploadedFile[];
 }
 
 function UploadArea({
@@ -160,6 +161,7 @@ function UploadArea({
   onDragOver,
   onDrop,
   showUploader,
+  uploadedFiles,
 }: Readonly<UploadAreaProps>): React.JSX.Element | null {
   if (!showUploader) {
     return null;
@@ -201,7 +203,7 @@ function UploadArea({
           accept={acceptAttribute}
           onChange={onFileChange}
           disabled={disabled}
-          required={required}
+          required={uploadedFiles.length > 0 ? false : required}
           dir={dir}
           aria-label="File upload"
           aria-describedby={`${inputId}-label`}
@@ -323,6 +325,7 @@ function FileUpload({
               onDragOver={handleDragOver}
               onDrop={handleDrop}
               showUploader={showUploader}
+              uploadedFiles={uploadedFiles}
             />
           </div>
         </div>

packages/survey-ui/src/components/general/element-media.tsx

@@ -3,30 +3,18 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video";
 
-// Function to add extra params to videoUrls in order to reduce video controls
-const getVideoUrlWithParams = (videoUrl: string): string | undefined => {
-  // First convert to embed URL
-  const embedUrl = convertToEmbedUrl(videoUrl);
-  if (!embedUrl) return undefined;
-
+//Function to add extra params to videoUrls in order to reduce video controls
+const getVideoUrlWithParams = (videoUrl: string): string => {
   const isYoutubeVideo = checkForYoutubeUrl(videoUrl);
   const isVimeoUrl = checkForVimeoUrl(videoUrl);
   const isLoomUrl = checkForLoomUrl(videoUrl);
-
-  if (isYoutubeVideo) {
-    // For YouTube, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}controls=0`;
-  } else if (isVimeoUrl) {
-    // For Vimeo, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false`;
-  } else if (isLoomUrl) {
-    // For Loom, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}hide_share=true&hideEmbedTopBar=true&hide_title=true`;
-  }
-  return embedUrl;
+  if (isYoutubeVideo) return videoUrl.concat("?controls=0");
+  else if (isVimeoUrl)
+    return videoUrl.concat(
+      "?title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false"
+    );
+  else if (isLoomUrl) return videoUrl.concat("?hide_share=true&hideEmbedTopBar=true&hide_title=true");
+  return videoUrl;
 };
 
 interface ElementMediaProps {

packages/survey-ui/src/lib/video.ts

@@ -27,7 +27,7 @@ export const checkForVimeoUrl = (url: string): boolean => {
 
     if (vimeoUrl.protocol !== "https:") return false;
 
-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
     const hostname = vimeoUrl.hostname;
 
     return vimeoDomains.includes(hostname);
@@ -77,14 +77,14 @@ const extractYoutubeId = (url: string): string | null => {
 };
 
 const extractVimeoId = (url: string): string | null => {
-  const regExp = /vimeo\.com\/(?<videoId>\d+)/;
+  const regExp = /vimeo\.com\/(?:video\/)?(?<videoId>\d+)/;
   const match = regExp.exec(url);
 
   return match?.groups?.videoId ?? null;
 };
 
 const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/(?<videoId>[a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/(?<videoId>[a-zA-Z0-9]+)/;
   const match = regExp.exec(url);
 
   return match?.groups?.videoId ?? null;

packages/surveys/src/components/general/block-conditional.tsx

@@ -173,7 +173,8 @@ export function BlockConditional({
     }
 
     // For other element types, check if required fields are empty
-    if (element.required && isEmptyResponse(response)) {
+    // CTA elements should not block navigation even if marked required (as they are informational)
+    if (element.type !== TSurveyElementTypeEnum.CTA && element.required && isEmptyResponse(response)) {
       form.requestSubmit();
       return false;
     }

packages/surveys/src/lib/video-upload.ts

@@ -27,7 +27,7 @@ export const checkForVimeoUrl = (url: string): boolean => {
 
     if (vimeoUrl.protocol !== "https:") return false;
 
-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
     const hostname = vimeoUrl.hostname;
 
     return vimeoDomains.includes(hostname);
@@ -77,7 +77,7 @@ export const extractYoutubeId = (url: string): string | null => {
 };
 
 const extractVimeoId = (url: string): string | null => {
-  const regExp = /vimeo\.com\/(\d+)/;
+  const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
   const match = url.match(regExp);
 
   if (match && match[1]) {
@@ -87,7 +87,7 @@ const extractVimeoId = (url: string): string | null => {
 };
 
 const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/([a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/([a-zA-Z0-9]+)/;
   const match = url.match(regExp);
 
   if (match && match[1]) {