Custom restrictions of file

Uppy
1

I am using uppy and i want to add custom restrictions for different files in uppy dashboard , since we are allow image and videos both . Therefore , i want to add different size validation on different file types .

i have tried onBeforeFileAdded , onBeforeUpload but that is giving in showing already uploaded file .

Below is the complete code of the react component :

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Uppy from '@uppy/core';
import Compressor from 'compressorjs';
import AwsS3 from '@uppy/aws-s3';
import getConfig from 'next/config';
import { get } from 'lodash';
import { Dashboard } from '@uppy/react';
import style from './uppy.module.scss';

/ Only holds serverRuntimeConfig and publicRuntimeConfig /
const { publicRuntimeConfig } = getConfig();

class UppyUploader extends PureComponent {
  constructor(props) {
super(props);
this.state = {
  showInlineDashboard: false,
};

this.uppy = new Uppy({
  id: 'uppy1',
  autoProceed: false,
  debug: true,
  restrictions: {
    maxFileSize: 209715200,
    maxNumberOfFiles: this.props.isMulti ? 15 : 1,
    minNumberOfFiles: 1,
    allowedFileTypes: this.props.acceptedMimes,
  },
  allowMultipleUploads: true,
  // onBeforeFileAdded: (currentFile, files) => {
  //   const { type } = currentFile;
  //   const { size } = currentFile.data;
  //   console.log(currentFile);
  //   if (type.includes('image')) {
  //     console.log('hello image');
  //     //return Promise.resolve();
  //   }
  //   return Promise.reject(
  //     "This file's size is bigger than the allowed size",
  //   );
  // },
  //onBeforeUpload: files => {
    //let videoCounter = 0;
    //Object.keys(files).forEach(item => {
     // if (files[item].type.includes('image')) {
      //  if (files[item].size > 10485760) {
    //      return Promise.reject(`file is too big`);
     //   }
    //  }
    //  if (files[item].type.includes('video')) {
     //   videoCounter++;
      //  if (files[item].size > 209715200) {
      //    return Promise.reject(`file is too big`);
      //  }
     //   if (videoCounter > 4) {
     //     return Promise.reject(`Maximum 4 videos are allowed`);
     //   }
     // }
   // });
    //return Promise.resolve();
  //},
});

const {
  uploadedFiles,
  handleOnDrop,
  handleDeleteImage,
  fileSlugName,
  input,
} = props;

uploadedFiles &&
  uploadedFiles.forEach(async file => {
    await fetch(`https://cors-anywhere.herokuapp.com/${file.uploadURL}`)
      .then(response => response.blob()) // returns a Blob
      .then(async blob => {
        const addedFile = await this.uppy.addFile({
          name: file.uploadURL,
          type: blob.type,
          data: blob, // changed blob -> data
          remote: true,
        });
        this.uppy.setFileState(addedFile, {
          progress: {
            ...file.progress,
            uploadComplete: true,
            uploadStarted: true,
          },
        });
      });
  });

this.uppy
  .use(AwsS3, {
    getUploadParameters(file) {
      // Send a request to our PHP signing endpoint.

      new Compressor(file.data, {
        quality: 0.6,
        success(result) {
          file.data = result;
        },
        error(err) {
          console.log(err.message);
        },
      });

      const auth = {}; // some object
      const token = 'someToken';
      return fetch(
        `${publicRuntimeConfig.ApiBaseUrl}/files/uploadOneByOne`,
        {
          method: 'post',
          // Send and receive JSON.
          headers: {
            accept: 'application/json',
            'content-type': 'application/json',
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
            name: file.data.name,
            fileSlugName,
          }),
        },
      )
        .then(response => {
          // Parse the JSON response.
          return response.json();
        })
        .then(data => {
          // Return an object in the correct shape.

          return {
            method: 'PUT',
            url: `${data.data.signedUrl}`,
            fields: [],
            headers: {
              'Content-Type': file.type,
            },
          };
        });
    },
  })
  .on('complete', result => {
    // console.log('complete', result);
    handleOnDrop(result.successful);
    input.onChange(result.successful);
  })
  .on('file-removed', (file, reason) => {
    if (reason === 'removed-by-user') {
      // console.log(file);
      handleDeleteImage(file);
    }
  });
  }

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

  render() {
const { height, meta } = this.props;
return (
  <div className={style.dashboardContainer}>
    <Dashboard
      id="Dashboard"
      target="body"
      trigger="#uppy-select-files"
      inline={true}
      uppy={this.uppy}
      width={'100%'}
      height={height}
      replaceTargetContent={true}
      showProgressDetails={true}
      browserBackButtonClose={true}
      proudlyDisplayPoweredByUppy={false}
      metaFields={[{ id: 'name', name: 'Name', placeholder: 'File name' }]}
      showRemoveButtonAfterComplete={true}
      hideCancelButton={true}
    />
    {meta.touched && (
      <p className="text-center text-danger">{meta.error}</p>
    )}
  </div>
);
  }
}

UppyUploader.defaultProps = {
  name: 'file',
};

UppyUploader.propTypes = {
  name: PropTypes.string,
  open: PropTypes.bool.isRequired,
  getUploadedUrl: PropTypes.func.isRequired,
};

export default UppyUploader;

Please let me know the solution and anything that can help .