diff --git a/src/components/FileuploadDelega/index.js b/src/components/FileuploadDelega/index.js index 83a6dab..3b0f2dd 100644 --- a/src/components/FileuploadDelega/index.js +++ b/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={
{emptyText}
} chooseLabel={chooseLabel} diff --git a/src/components/FormField/components/Fileupload/index.js b/src/components/FormField/components/Fileupload/index.js index 81792fa..05cf58c 100644 --- a/src/components/FormField/components/Fileupload/index.js +++ b/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={{emptyText}
} chooseLabel={chooseLabel} diff --git a/src/components/FormField/components/FileuploadAsync/index.js b/src/components/FormField/components/FileuploadAsync/index.js index 4abee05..305b226 100644 --- a/src/components/FormField/components/FileuploadAsync/index.js +++ b/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={{emptyText}
} chooseLabel={chooseLabel} diff --git a/src/helpers/getPropeMimeLabels.js b/src/helpers/getPropeMimeLabels.js new file mode 100644 index 0000000..bac18c8 --- /dev/null +++ b/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; \ No newline at end of file