Merge pull request #2110 from iamfaran/feat/2099-fileUpload

[Feat]: #2099 #2100 add clearValueAt + file name validation to the file upload component

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/fileComp/ImageCaptureModal.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { default as Button } from "antd/es/button";
 import Dropdown from "antd/es/dropdown";
 import type { ItemType } from "antd/es/menu/interface";
@@ -8,6 +8,7 @@ import Flex from "antd/es/flex";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { CustomModal } from "lowcoder-design";
+import { CaptureResolution, RESOLUTION_CONSTRAINTS } from "./fileComp";
 
 const CustomModalStyled = styled(CustomModal)`
   top: 10vh;
@@ -53,23 +54,32 @@ const ReactWebcam = React.lazy(() => import("react-webcam"));
 
 export const ImageCaptureModal = (props: {
   showModal: boolean;
+  captureResolution?: CaptureResolution;
   onModalClose: () => void;
   onImageCapture: (image: string) => void;
 }) => {
   const [errMessage, setErrMessage] = useState("");
-  const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({
-    facingMode: "environment",
-  });
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
   const [modeList, setModeList] = useState<ItemType[]>([]);
   const [dropdownShow, setDropdownShow] = useState(false);
   const [imgSrc, setImgSrc] = useState<string>();
   const webcamRef = useRef<any>(null);
 
+  const resolution = props.captureResolution ?? "auto";
+  const resolutionSize = RESOLUTION_CONSTRAINTS[resolution] ?? {};
+
+  const videoConstraints = useMemo<MediaTrackConstraints>(() => {
+    const base: MediaTrackConstraints = selectedDeviceId
+      ? { deviceId: { exact: selectedDeviceId } }
+      : { facingMode: "environment" };
+    return { ...base, ...resolutionSize };
+  }, [selectedDeviceId, resolutionSize]);
+
   useEffect(() => {
     if (props.showModal) {
       setImgSrc("");
       setErrMessage("");
-      setVideoConstraints({ facingMode: "environment" });
+      setSelectedDeviceId(null);
       setDropdownShow(false);
     }
   }, [props.showModal]);
@@ -125,6 +135,8 @@ export const ImageCaptureModal = (props: {
                   ref={webcamRef}
                   onUserMediaError={handleMediaErr}
                   screenshotFormat="image/jpeg"
+                  screenshotQuality={1}
+                  forceScreenshotSourceSize
                   videoConstraints={videoConstraints}
                 />
               </Suspense>
@@ -172,7 +184,7 @@ export const ImageCaptureModal = (props: {
                     <Menu
                       items={modeList}
                       onClick={(value) => {
-                        setVideoConstraints({ deviceId: { exact: value.key } });
+                        setSelectedDeviceId(value.key);
                         setDropdownShow(false);
                       }}
                     />

client/packages/lowcoder/src/comps/comps/fileComp/draggerUpload.tsx

@@ -1,7 +1,7 @@
 import { default as AntdUpload } from "antd/es/upload";
 import { default as Button } from "antd/es/button";
 import { UploadFile, UploadChangeParam, UploadFileStatus, RcFile } from "antd/es/upload/interface";
-import { useState, useEffect } from "react";
+import { useState, useMemo } from "react";
 import styled, { css } from "styled-components";
 import { trans } from "i18n";
 import _ from "lodash";
@@ -11,8 +11,7 @@ import {
   multiChangeAction,
 } from "lowcoder-core";
 import { hasIcon } from "comps/utils";
-import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { resolveValue, resolveParsedValue, commonProps } from "./fileComp";
+import { resolveValue, resolveParsedValue, commonProps, validateFile, CaptureResolution } from "./fileComp";
 import { FileStyleType, AnimationStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { ImageCaptureModal } from "./ImageCaptureModal";
 import { v4 as uuidv4 } from "uuid";
@@ -149,9 +148,11 @@ interface DraggerUploadProps {
   prefixIcon: any;
   suffixIcon: any;
   forceCapture: boolean;
+  captureResolution: CaptureResolution;
   minSize: number;
   maxSize: number;
   maxFiles: number;
+  fileNamePattern: string;
   uploadType: "single" | "multiple" | "directory";
   text: string;
   dragHintText?: string;
@@ -162,25 +163,27 @@ interface DraggerUploadProps {
 
 export const DraggerUpload = (props: DraggerUploadProps) => {
   const { dispatch, files, style, autoHeight, animationStyle } = props;
-  const [fileList, setFileList] = useState<UploadFile[]>(
-    files.map((f) => ({ ...f, status: "done" })) as UploadFile[]
-  );
+  // Track only files currently being uploaded (not yet in props.files)
+  const [uploadingFiles, setUploadingFiles] = useState<UploadFile[]>([]);
   const [showModal, setShowModal] = useState(false);
   const isMobile = checkIsMobile(window.innerWidth);
 
-  useEffect(() => {
-    if (files.length === 0 && fileList.length !== 0) {
-      setFileList([]);
-    }
-  }, [files]);
+  // Derive fileList from props.files (source of truth) + currently uploading files
+  const fileList = useMemo<UploadFile[]>(() => [
+    ...(files.map((f) => ({ ...f, status: "done" as const })) as UploadFile[]),
+    ...uploadingFiles,
+  ], [files, uploadingFiles]);
 
   const handleOnChange = (param: UploadChangeParam) => {
-    const uploadingFiles = param.fileList.filter((f) => f.status === "uploading");
-    if (uploadingFiles.length !== 0) {
-      setFileList(param.fileList);
+    const currentlyUploading = param.fileList.filter((f) => f.status === "uploading");
+    if (currentlyUploading.length !== 0) {
+      setUploadingFiles(currentlyUploading);
       return;
     }
 
+    // Clear uploading state when all uploads complete
+    setUploadingFiles([]);
+
     let maxFiles = props.maxFiles;
     if (props.uploadType === "single") {
       maxFiles = 1;
@@ -240,8 +243,6 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
         props.onEvent("parse");
       });
     }
-
-    setFileList(uploadedFiles.slice(-maxFiles));
   };
 
   return (
@@ -254,21 +255,11 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
         $auto={autoHeight}
         capture={props.forceCapture}
         openFileDialogOnClick={!(props.forceCapture && !isMobile)}
-        beforeUpload={(file) => {
-          if (!file.size || file.size <= 0) {
-            messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-
-          if (
-            (!!props.minSize && file.size < props.minSize) ||
-            (!!props.maxSize && file.size > props.maxSize)
-          ) {
-            messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-          return true;
-        }}
+        beforeUpload={(file) => validateFile(file, {
+          minSize: props.minSize,
+          maxSize: props.maxSize,
+          fileNamePattern: props.fileNamePattern,
+        })}
         onChange={handleOnChange}
       >
           <p className="ant-upload-drag-icon">
@@ -301,6 +292,7 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
 
       <ImageCaptureModal
         showModal={showModal}
+        captureResolution={props.captureResolution as CaptureResolution}
         onModalClose={() => setShowModal(false)}
         onImageCapture={async (image) => {
           setShowModal(false);