- updated code related to files validation;

src/components/FileuploadDelega/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty } from 'ramda';
+import { head, isEmpty } from 'ramda';
 
 import { FileUpload } from 'primereact/fileupload';
 import { Tag } from 'primereact/tag';
@@ -8,6 +8,7 @@ import { Button } from 'primereact/button';
 
 // api
 import CompanyService from '../../service/company-service';
+import { mimeTypes } from '../../configData';
 
 const FileuploadDelega = ({
                                   fieldName,
@@ -25,6 +26,7 @@ const FileuploadDelega = ({
                               }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
     const [acceptFormats, setAcceptFormats] = useState('');
+    const [formatsForInput, setFormatsForInput] = useState('');
     const inputRef = useRef();
 
     const customBase64Uploader = (event) => {
@@ -141,8 +143,20 @@ const FileuploadDelega = ({
     }, [defaultValue]);
 
     useEffect(() => {
+        const properMime = accept
+            .map(v => {
+                const found = head(mimeTypes.filter(o => o.code.includes(v)));
+                let res = v;
+
+                if (found) {
+                    res = found.code;
+                }
+
+                return res;
+            })
         // eslint-disable-next-line no-useless-escape
-        setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setAcceptFormats(properMime.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setFormatsForInput(properMime.join(','))
     }, [accept]);
 
     useEffect(() => {
@@ -161,7 +175,7 @@ const FileuploadDelega = ({
                 name={fieldName}
                 url={'/document/uploadFile'}
                 multiple={multiple}
-                accept={accept}
+                accept={formatsForInput}
                 maxFileSize={maxSize}
                 emptyTemplate={<p>{emptyText}</p>}
                 chooseLabel={chooseLabel}

src/components/FormField/components/Fileupload/index.js

@@ -3,8 +3,13 @@ import { classNames } from 'primereact/utils';
 import { head, isEmpty } from 'ramda'
 import { __ } from '@wordpress/i18n';
 
+// api
 import FileUploadService from '../../../../service/file-upload-service';
 
+// tools
+import getPropeMimeLabels from '../../../../helpers/getPropeMimeLabels';
+
+// components
 import { FileUpload } from 'primereact/fileupload';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
@@ -35,8 +40,10 @@ const Fileupload = ({
                         saveFormCallback = () => {
                         }
                     }) => {
+    // eslint-disable-next-line no-unused-vars
     const [stateFieldData, setStateFieldData] = useState([]);
     const [acceptFormats, setAcceptFormats] = useState('');
+    const [formatsForInput, setFormatsForInput] = useState('');
     const inputRef = useRef();
 
     const customBase64Uploader = (event) => {
@@ -143,21 +150,6 @@ const Fileupload = ({
         });
     }
 
-    const getPropeMimeLabels = (acceptFormats) => {
-        return acceptFormats
-            .map(v => {
-                const found = head(mimeTypes.filter(o => o.code === v));
-                let res = v;
-
-                if (found) {
-                    res = found.name;
-                }
-
-                return res;
-            })
-            .join(', ');
-    }
-
     useEffect(() => {
         setStateFieldData(defaultValue);
         register(fieldName, config)
@@ -171,8 +163,20 @@ const Fileupload = ({
     }, [defaultValue]);
 
     useEffect(() => {
+        const properMime = accept
+            .map(v => {
+                const found = head(mimeTypes.filter(o => o.code.includes(v)));
+                let res = v;
+
+                if (found) {
+                    res = found.code;
+                }
+
+                return res;
+            })
         // eslint-disable-next-line no-useless-escape
-        setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setAcceptFormats(properMime.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setFormatsForInput(properMime.join(','))
     }, [accept]);
 
     return (
@@ -190,7 +194,7 @@ const Fileupload = ({
                     name={fieldName}
                     url={'/document/uploadFile'}
                     multiple={multiple}
-                    accept={accept}
+                    accept={formatsForInput}
                     maxFileSize={maxSize}
                     emptyTemplate={<p>{emptyText}</p>}
                     chooseLabel={chooseLabel}

src/components/FormField/components/FileuploadAsync/index.js

@@ -2,12 +2,18 @@ import React, { useEffect, useState, useRef } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
 
+// api
 import FileUploadService from '../../../../service/file-upload-service';
 
+// tools
+import getPropeMimeLabels from '../../../../helpers/getPropeMimeLabels';
+
+// components
 import { FileUpload } from 'primereact/fileupload';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { head, isEmpty } from 'ramda';
+
 import { mimeTypes } from '../../../../configData';
 
 const FileuploadAsync = ({
@@ -31,6 +37,7 @@ const FileuploadAsync = ({
                          }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
     const [acceptFormats, setAcceptFormats] = useState('');
+    const [formatsForInput, setFormatsForInput] = useState('');
     const inputRef = useRef();
 
     const customBase64Uploader = (event) => {
@@ -133,21 +140,6 @@ const FileuploadAsync = ({
         });
     }
 
-    const getPropeMimeLabels = (acceptFormats) => {
-        return acceptFormats
-            .map(v => {
-                const found = head(mimeTypes.filter(o => o.code === v));
-                let res = v;
-
-                if (found) {
-                    res = found.name;
-                }
-
-                return res;
-            })
-            .join(', ');
-    }
-
     useEffect(() => {
         setStateFieldData(defaultValue);
         register(fieldName, config)
@@ -163,8 +155,20 @@ const FileuploadAsync = ({
     }, [defaultValue]);
 
     useEffect(() => {
+        const properMime = accept
+            .map(v => {
+                const found = head(mimeTypes.filter(o => o.code.includes(v)));
+                let res = v;
+
+                if (found) {
+                    res = found.code;
+                }
+
+                return res;
+            })
         // eslint-disable-next-line no-useless-escape
-        setAcceptFormats(accept.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setAcceptFormats(properMime.join(',').replace(/\*/g, '.\*').replace(/,/g, '|'));
+        setFormatsForInput(properMime.join(','))
     }, [accept]);
 
     useEffect(() => {
@@ -188,7 +192,7 @@ const FileuploadAsync = ({
                     name={fieldName}
                     url={'/document/uploadFile'}
                     multiple={multiple}
-                    accept={accept}
+                    accept={formatsForInput}
                     maxFileSize={maxSize}
                     emptyTemplate={<p>{emptyText}</p>}
                     chooseLabel={chooseLabel}

src/helpers/getPropeMimeLabels.js

@@ -0,0 +1,19 @@
+import { head } from 'ramda';
+import { mimeTypes } from '../configData';
+
+const getPropeMimeLabels = (accept) => {
+    return accept
+        .map(v => {
+            const found = head(mimeTypes.filter(o => o.code.includes(v)));
+            let res = v;
+
+            if (found) {
+                res = found.name;
+            }
+
+            return res;
+        })
+        .join(', ');
+}
+
+export default getPropeMimeLabels;