Check by conditional the AllowedTypes

hello guys, I need some help, I’m trying to figure out how to check every open of the input the files there by. the restrictions prop, but the main problem is that I’m only getting something with some conditional by the onBeforeFileAdded using the

     this.uppy.setOptions({
                    meta: { type: 'avatar' },
                    allowMultipleUploads: false,
                    restrictions: {
                        maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
                        maxFileSize: 10 * 1024 * 1024, // 10mb
                        minFileSize: 3 * 1024, // 3kb
                        allowedFileTypes: allowedFileTypes,
                    },
                });

Then just when I drop the files I get the message about the allowedFileTypes there is another way to check when open the input?

here my component:

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.onComplete = this.onComplete.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.isAbortCurrent = false;
        this.state = {
            restrictionsImages: this.props.imageRestriction,
        };
        const { id, uppyOptions = {}, tusOptions = {}, isEdit, onEditStart } = props;

        if (!id) {
            throw new Error('An id is required.');
        }

        const allowedFileTypes = this.state.restrictionsImages
            ? supportedImageTypes
            : allSupportedTypes;

        const { ...otherUppyOptions } = uppyOptions;

        this.uppy = new Uppy({
            id,
            meta: { type: 'avatar' },
            allowMultipleUploads: false,

            autoProceed: !props.isEdit,

            onBeforeFileAdded: (currentFile) => {
                this.uppy.setOptions({
                    meta: { type: 'avatar' },
                    allowMultipleUploads: false,
                    restrictions: {
                        maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
                        maxFileSize: 10 * 1024 * 1024, // 10mb
                        minFileSize: 3 * 1024, // 3kb
                        allowedFileTypes: allowedFileTypes,
                    },
                });
                if (!allowedFileTypes.includes(currentFile.type)) {
                    this.uppy.info(
                        `${currentFile.type} not supported, only ${allowedFileTypes} supported`,
                        'error',
                        4000,
                    );
                    this.isAbortCurrent = true;
                    return false;
                }
                this.isAbortCurrent = false;
            },
            onBeforeUpload: (files) => {
                return Object.keys(files).length;
            },
            ...otherUppyOptions,
        });

        if (isEdit) {
            this.uppy = this.uppy.use(ImageEditor, {
                restrictions: {
                    allowedFileTypes,
                    maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
                    maxFileSize: 10 * 1024 * 1024, // 10mb
                    minFileSize: 3 * 1024, // 3kb
                    allowedFileTypes: this.props.imageRestriction
                        ? supportedImageTypes
                        : allSupportedTypes,
                },
                quality: 0.8,
                cropperOptions: {
                    viewMode: 1,
                    aspectRatio: 1,
                    dragMode: 'move',
                    toggleDragModeOnDblclick: false,
                    restore: false,
                    guides: true,
                    movable: true,
                    center: true,
                    cropBoxResizable: false,
                    cropBoxMovable: false,
                    responsive: true,
                    autoCrop: true,
                },
                actions: {
                    revert: false,
                    cropWidescreen: false,
                    cropWidescreenVertical: false,
                    cropSquare: false,
                },
            });
        }
        this.uppy = this.uppy
            .use(Tus, {
                endpoint: storage.upload,
                retryDelays: process.env.NODE_ENV === 'development' ? null : [0, 1000, 3000, 5000],
                storeFingerprintForResuming: process.env.NODE_ENV !== 'development',
                // headers: {
                //   authorization: process.browser && get(getUserData(), 'token'),
                // },
                withCredentials: false,
            })
            .on('complete', this.onComplete)
            .on('upload-error', (file, error, response) => {
                this.uppy.reset();
                reportError(error);
            })
            .on('error', (file, error, response) => {
                this.uppy.reset();
                reportError(error);
            })
            .on('file-editor:start', (file) => {
                onEditStart(file?.data);
            })
            .on('file-editor:complete', (updatedFile) => {
                this.uppy.upload();
            });
    }

    onComplete(result) {
        this.props.onComplete(
            map(result.successful, (file) => {
                const parts = file.uploadURL.split('/');
                const name = parts[parts.length - 1];

                return { preview: file.data, name, type: types.IMAGE };
            }),
        );

        this.uppy.reset();
    }

    componentDidUpdate(prevProps) {
        // automatic upload of preFile (if passed as prop)
        if (prevProps.imageRestriction !== this.props.imageRestriction) {
            this.setState({ restrictionsImages: this.props.imageRestriction });
        }
        if (this.props.preFile) {
            // let the model handle error in UI, otherwise it will throw unhandled runtime error
            setTimeout(() => {
                try {
                    this.uppy.addFile({
                        name: this.props.preFile.name,
                        type: this.props.preFile.type,
                        data: this.props.preFile,
                    });
                } catch (e) {
                    this.uppy.reset();
                }
            }, 500);
        }
    }

    UNSAFE_componentWillUnmount() {
        this.uppy.close();
    }

    //Using concept of event bubbling
    onCancel(e) {
        if (e?.target?.classList?.contains('uppy-DashboardContent-back')) {
            this.uppy.cancelAll();
        }
    }

    render() {
        const { isEdit } = this.props;
        const noteText = this.props.imageRestriction ? 'JPEG and WEBP' : 'All types of images';
        console.log('this.props.imageRestriction ', this.props.imageRestriction);

        return (
            <>
                <Head>
                    <link rel="stylesheet" type="text/css" href={asset('/css/uppy/core.css')} />
                    <link
                        rel="stylesheet"
                        type="text/css"
                        href={asset('/css/uppy/dashboard.css')}
                    />
                    <link
                        rel="stylesheet"
                        type="text/css"
                        href={asset('/css/uppy/image-editor.css')}
                    />
                    {isEdit && (
                        <style>
                            {`.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {background:${PRIMARY_COLOR};}
            .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
             background: ${SECONDARY_COLOR};
            }
            .uppy-c-btn-primary {
              background:${PRIMARY_COLOR};
            }
            .uppy-c-btn-primary:hover {
              background: ${SECONDARY_COLOR};
            }
            `}
                        </style>
                    )}
                </Head>
                <DashboardModal
                    uppy={this.uppy}
                    onClick={this.onCancel}
                    autoOpenFileEditor
                    showLinkToFileUploadResult={false}
                    showProgressDetails={true}
                    proudlyDisplayPoweredByUppy={false}
                    plugins={['ImageEditor']}
                    hideUploadButton
                    metaFields={[{ id: 'name', name: 'Name', placeholder: 'File name' }]}
                    note={`We accept only images. Supported formats: ${noteText}`}
                    {...this.props}
                />
            </>
        );
    }
}

Component.displayName = 'UploaderModalComponent';

export default Component;

Obs: I have on the uploadComponent a props when I open the modal and it’s coming right

Hi
You can use restrictions outside onBeforeFileAdded

new Uppy({							    restrictions: {
								            maxFileSize: 1000000000,//uppy options
								            maxNumberOfFiles: 30,
								            minNumberOfFiles: 1,
								            allowedFileTypes: '.$allowedext_for_uppy.'
								          },
.
.
..

Thanks
Preetam Kumar Joshi