title: Yup.mixed().test() not working with Formik in React
body: <p>I have created a form and taking some inputs like studentName, photo etc. And I want to validate these inputs. For this I am using Formik &amp; Yup.</p>
  <ol>
  <li>studentName:- At least 3 characters, Only A-Za-z characters allowed</li>
  <li>photo:- file should not greater than 1mb, only jpeg &amp; png file types are allowed</li>
  </ol>
  <blockquote>
  <p>Validation for studentName works fine but doesn't work for photo. When I try to upload file then always it is giving error as <strong>Uploaded file is too big</strong> even though I am uploading greater than 1mb. In simple words the following condition is not working.</p>
  </blockquote>
  <pre><code>photo: Yup.mixed()
    .test('FILE_SIZE', 'Uploaded file is too big.', (value) =&gt; !value || (value &amp;&amp; value.size &gt;= FILE_SIZE))
    .test(
      'FILE_FORMAT',
      'Uploaded file has unsupported format.',
      (value) =&gt; !value || (value &amp;&amp; SUPPORTED_FORMATS.includes(value.type))
    )
  </code></pre>
  <p>Sanbox URL: <a href="https://codesandbox.io/s/ecstatic-mountain-gol1l" rel="nofollow noreferrer">https://codesandbox.io/s/ecstatic-mountain-gol1l</a></p>
  <pre><code>import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import { ErrorMessage, Field, Form, Formik } from &quot;formik&quot;;
  import React from &quot;react&quot;;
  import * as Yup from &quot;yup&quot;;
  
  export default function App() {
    const FILE_SIZE = 1000000; //1mb
    const SUPPORTED_FORMATS = [
      &quot;image/jpg&quot;,
      &quot;image/jpeg&quot;,
      &quot;image/png&quot;
    ];
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Formik
          initialValues={{
            studentName: &quot;&quot;,
            photo: null
          }}
          validationSchema={Yup.object().shape({
            studentName: Yup.string()
              .min(3, &quot;Name cannot be less than 3 characters&quot;)
              .matches(/^[A-Za-z ]*$/, &quot;Please enter valid name&quot;)
              .required(&quot;Student Name is required&quot;),
            photo: Yup.mixed()
              .required(&quot;A file is required&quot;)
              .test(
                &quot;FILE_SIZE&quot;,
                &quot;Uploaded file is too big.&quot;,
                (value) =&gt; !value || (value &amp;&amp; value.size &gt;= FILE_SIZE)
              )
              .test(
                &quot;FILE_FORMAT&quot;,
                &quot;Uploaded file has unsupported format.&quot;,
                (value) =&gt;
                  !value || (value &amp;&amp; SUPPORTED_FORMATS.includes(value.type))
              )
          })}
          render={({ errors, touched }) =&gt; (
            &lt;Form&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label className=&quot;col-sm-4 control-label&quot;&gt;Student Name&lt;/label&gt;
                &lt;div className=&quot;col-sm-8&quot;&gt;
                  &lt;Field
                    id=&quot;studentName&quot;
                    name=&quot;studentName&quot;
                    type=&quot;text&quot;
                    className={
                      &quot;form-control&quot; +
                      (errors.studentName &amp;&amp; touched.studentName
                        ? &quot; is-invalid&quot;
                        : &quot;&quot;)
                    }
                  /&gt;
                  &lt;ErrorMessage
                    name=&quot;studentName&quot;
                    component=&quot;div&quot;
                    className=&quot;invalid-feedback&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form-group&quot;&gt;
                &lt;label className=&quot;col-sm-4 control-label&quot;&gt;Photo&lt;/label&gt;
                &lt;div className=&quot;col-sm-8&quot;&gt;
                  &lt;Field
                    id=&quot;photo&quot;
                    name=&quot;photo&quot;
                    type=&quot;file&quot;
                    className={
                      &quot;form-control&quot; +
                      (errors.photo &amp;&amp; touched.photo ? &quot; is-invalid&quot; : &quot;&quot;)
                    }
                  /&gt;
                  &lt;ErrorMessage
                    name=&quot;photo&quot;
                    component=&quot;div&quot;
                    className=&quot;invalid-feedback&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/Form&gt;
          )}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>