Can a field in react-final-form mark itself as invalid / prevent submission?

I have a custom file upload field that uploads files immediately once you select/drop them, and returns a UUID for later submission. So, basically what most webapps do nowadays (e.g. Facebook, Twitter, etc.) when you drop a file.

This is all easy enough to handle with final-form - my field simply calls final-form's onChange function once the upload finished to pass the UUID to final-form.

However, if a user submits the form while an upload is still running they will submit the form without a file UUID since as far as final-form is concerned, no file has been selected yet. Especially for bigger files this would be problematic as users might not realize they still have to wait (even with a loading indicator). Marking the field as required is not an option either, since not providing a file at all is valid (or the field may allow multiple files, or you are replacing a previously-uploaded file) - so the only case where the field is "invalid" is when a file is currently being uploaded.

Here is a codesandbox with a small dummy app that should provide a good starting point at any attempt to solve it: https://codesandbox.io/s/polished-fast-k80t7

The idea is that the field becomes invalid when clicking "Pretend to start uploading" and valid again after clicking "Pretend to finish uploading".

Please note that I'm looking for a clean way to do this while keeping things separated, i.e. I'd prefer to not add state for this to the component containing the Form - also because a validation functions need to be idempotent, so checking external state there would be pretty much broken (as my attempt of doing this shows).

---

Should the codesandbox links ever break, here's the relevant code from the first link (since the other one is just a broken attempt anyway):

import React, { useState } from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field } from "react-final-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = async values => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const MyFileUploader = ({ input: { value, onChange }, meta: { invalid } }) => {
  const [isUploading, setUploading] = useState(false);
  const handleStartClick = () => {
    setUploading(true);
  };
  const handleFinishClick = () => {
    setUploading(false);
    onChange("0xdeadbeef"); // let's pretend this is the file UUID ;)
  };
  const style = { color: invalid ? "#f00" : "#000" };
  if (value) {
    return <em style={style}>{value}</em>;
  } else if (isUploading) {
    return (
      <button type="button" onClick={handleFinishClick} style={style}>
        Pretend to finish uploading
      </button>
    );
  } else {
    return (
      <button type="button" onClick={handleStartClick} style={style}>
        Pretend to start uploading
      </button>
    );
  }
};

const App = () => (
  <Styles>
    <h1>React Final Form</h1>
    <Form
      onSubmit={onSubmit}
      initialValues={{ file: null }}
      render={({ handleSubmit, form, submitting, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>File</label>
            <Field name="file" component={MyFileUploader} />
          </div>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
            <button type="button" onClick={form.reset} disabled={submitting}>
              Reset
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </Styles>
);

render(<App />, document.getElementById("root"));

Interesting question.

How about something like this? When the file is uploading, it renders a field that will always be invalid, thus blocking the submission.

const SubmitBlocker = ({ children }) => (
  <Field name="uploading" validate={() => children}>
    {({ meta }) =>
      meta.touched && meta.error ? meta.error : null
    }
  </Field>
);