Web: Client: JavascriptSDK: isDocument icon prop was added to FileInput

packages/client/src/components/FilesSelectorInput/index.js

@@ -30,6 +30,7 @@ const FilesSelectorInput = (props) => {
     className,
     isSelect,
     isRoomBackup,
+    isDocumentIcon,
   } = props;
 
   const isFilesSelection = !!filterParam;
@@ -86,6 +87,7 @@ const FilesSelectorInput = (props) => {
         isDisabled={isDisabled || isLoading}
         hasError={isError || isErrorPath}
         scale
+        isDocumentIcon={isDocumentIcon}
       />
 
       <FilesSelector

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js

@@ -227,6 +227,7 @@ const Editor = (props) => {
                   onSelectFile={onChangeFileId}
                   filterParam={FilesSelectorFilterTypes.ALL}
                   isSelect
+                  isDocumentIcon
                 />
               </FilesSelectorInputWrapper>
             </ControlsGroup>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js

@@ -236,6 +236,7 @@ const Viewer = (props) => {
                   onSelectFile={onChangeFileId}
                   filterParam={FilesSelectorFilterTypes.ALL}
                   isSelect
+                  isDocumentIcon
                 />
               </FilesSelectorInputWrapper>
             </ControlsGroup>

packages/shared/components/file-input/FileInput.tsx

@@ -4,6 +4,7 @@ import Dropzone from "react-dropzone";
 import equal from "fast-deep-equal/react";
 
 import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
+import DocumentReactSvgUrl from "PUBLIC_DIR/images/document.react.svg?url";
 
 import { IconButton } from "../icon-button";
 import { Button, ButtonSize } from "../button";
@@ -29,6 +30,7 @@ const FileInputPure = ({
   fromStorage = false,
   path,
   idButton,
+  isDocumentIcon,
   ...rest
 }: FileInputProps) => {
   const { t } = useTranslation("Common");
@@ -139,7 +141,11 @@ const FileInputPure = ({
               ) : (
                 <IconButton
                   className="icon-button"
-                  iconName={CatalogFolderReactSvgUrl}
+                  iconName={
+                    isDocumentIcon
+                      ? DocumentReactSvgUrl
+                      : CatalogFolderReactSvgUrl
+                  }
                   color="#A3A9AE"
                   size={iconSize}
                   isDisabled={isDisabled}
@@ -160,6 +166,7 @@ FileInputPure.defaultProps = {
   isDisabled: false,
   isLoading: false,
   accept: [""],
+  isDocumentIcon: false,
 };
 
 export { FileInputPure };

packages/shared/components/file-input/FileInput.types.ts

@@ -31,6 +31,8 @@ export interface FileInputProps {
   accept?: string[];
   /** Specifies the label for the upload button */
   buttonLabel?: string;
+  /** Indicates that icon is document. Otherwise, it is folder icon */
+  isDocumentIcon?: boolean;
   onClick?: (e: React.MouseEvent) => void;
   idButton?: string;
   path?: string;

public/images/document.react.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.89543 0 0 0.895431 0 2L0 14C0 15.1046 0.89543 16 2 16L12 16C13.1046 16 14 15.1046 14 14L14 4.11111C14 3.85219 13.8996 3.60336 13.7198 3.41698L10.7198 0.305864C10.5314 0.110411 10.2715 0 10 0L2 0ZM2 2L9.5751 2L12 4.51471L12 14L2 14L2 2ZM3 6L9 6L9 4L3 4L3 6ZM3 9L11 9V7L3 7V9ZM3 12L11 12V10L3 10V12Z" fill="#333333"/>
+</svg>