Support jpg textures (#1114)

* feat: support jpg & jpge textures

* feat: support jpg and jpeg for all images inputs

* feat: update validation for textures

* feat: Update regez to support .jpg and .jpge extensions

* feat: fix lint issues

* feat: add validation on input change

* feat: change regex to pass tests

* feat: update validation on component

* feat: add error message for invalid URL and stop validating empty field

* feat: update message

Author: alejandralevy

packages/@dcl/inspector/src/components/EntityInspector/MaterialInspector/Texture/Texture.tsx

@@ -39,8 +39,9 @@ function TextureInspector({ label, texture, files, getInputProps }: Props) {
             label="Path"
             accept={ACCEPTED_FILE_TYPES['image']}
             onDrop={handleDrop}
-            error={!!src.value && files && !isValid}
+            error={!!src.value && !isValid}
             isValidFile={isModel}
+            acceptURLs
           />
         )}
         {/* {type.value === Texture.TT_AVATAR_TEXTURE && <TextField label="User ID" {...getInputProps(`${texture}.userId`)} />}*/}

packages/@dcl/inspector/src/components/EntityInspector/MaterialInspector/Texture/utils.ts

@@ -77,7 +77,8 @@ export const toTexture = (base: string, value?: TextureInput): TextureUnion => {
   }
 }
 
-export const isTexture = (value: string): boolean => value.endsWith('.png')
+export const isTexture = (value: string): boolean =>
+  value.endsWith('.png') || value.endsWith('.jpg') || value.endsWith('.jpeg')
 export const isModel = (node: TreeNode): node is AssetNodeItem => isAssetNode(node) && isTexture(node.name)
 
 export function isValidTexture(value: any, files?: AssetCatalogResponse): boolean {

packages/@dcl/inspector/src/components/ui/FileUploadField/FileUploadField.tsx

@@ -14,6 +14,7 @@ import { isAudio } from '../../EntityInspector/AudioSourceInspector/utils'
 import { isModel as isTexture } from '../../EntityInspector/MaterialInspector/Texture/utils'
 import { TreeNode } from '../../ProjectAssetExplorer/ProjectView'
 import { AssetNodeItem } from '../../ProjectAssetExplorer/types'
+import { isValidHttpsUrl } from '../../../lib/utils/url'
 
 import { TextField } from '../TextField'
 import { Message, MessageType } from '../Message'
@@ -36,9 +37,11 @@ const FileUploadField: React.FC<Props> = ({
   onDrop,
   onChange,
   isValidFile,
+  acceptURLs = false,
   accept = EXTENSIONS
 }) => {
   const [path, setPath] = useState<string | undefined>(value?.toString())
+  const [errorMessage, setErrorMessage] = useState<string | undefined>('File not valid.')
   const [dropError, setDropError] = useState<boolean>(false)
   const inputRef = useRef<HTMLInputElement>(null)
   const files = useAppSelector(selectAssetCatalog)
@@ -144,15 +147,18 @@ const FileUploadField: React.FC<Props> = ({
   const handleChangeTextField = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = event.target
-      if (value && isValidFileName(value)) {
+      if (value && (isValidFileName(value) || (acceptURLs && isValidHttpsUrl(value)))) {
         setPath(addBase(value))
         onChange && onChange(event)
         setDropError(false)
       } else {
         setDropError(true)
+        setErrorMessage(
+          acceptURLs && !isValidHttpsUrl(value) ? 'Provide a https URL or a valid file path' : 'File not valid.'
+        )
       }
     },
-    [addBase, setPath, setDropError]
+    [addBase, setPath, setDropError, acceptURLs, onChange]
   )
 
   const hasError = useMemo(() => {
@@ -166,7 +172,7 @@ const FileUploadField: React.FC<Props> = ({
           id={id.current}
           className="FileUploadInput"
           ref={drop}
-          placeholder="File Path"
+          placeholder={acceptURLs ? 'https://... or File Path' : 'File Path'}
           label={label}
           onChange={handleChangeTextField}
           value={removeBase(path)}
@@ -182,7 +188,7 @@ const FileUploadField: React.FC<Props> = ({
           </button>
         )}
       </div>
-      {hasError && <Message text="File not valid." type={MessageType.ERROR} />}
+      {hasError && <Message text={errorMessage} type={MessageType.ERROR} />}
     </div>
   )
 }

packages/@dcl/inspector/src/components/ui/FileUploadField/types.ts

@@ -8,11 +8,12 @@ export type Props = Omit<TextFieldProps, 'accept' | 'type' | 'onDrop'> & {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   isValidFile?: (node: TreeNode) => boolean
   showPreview?: boolean
+  acceptURLs?: boolean
 }
 
 export const ACCEPTED_FILE_TYPES = {
   model: ['.gltf', '.glb'],
-  image: ['.png'],
+  image: ['.png', '.jpg', '.jpeg'],
   audio: ['.mp3', '.wav', '.ogg'],
   video: ['.mp4']
 }