react-jsonschema-form: [bootstrap-4] File uploads result in error ".file should match format "data-url""

@Hasenn I worked around it using this:

I first created a widget in my repo called BootstrapFileWidget and reference the FileWidget from core:

import React from "react";
import FileWidget from "@rjsf/core/dist/cjs/components/widgets/FileWidget";

const BootstrapFileWidget = (props: any) => {
  return (
    <>
      <FileWidget {...props} type="file" />
    </>
  );
};

export default BootstrapFileWidget;

Then i popped that into the widgets

const widgets = {
  file: BootstrapFileWidget,
};

Then, made sure my file was using that widget:

const uiSchema = { file: { "ui:widget": "file" } }

Not the cleanest workaround, but it got me up in running in a few minutes

Also see https://github.com/rjsf-team/react-jsonschema-form/issues/2418 for more context

@tjuravich / @CKGrafico would you like to make a PR that fixes the bootstrap 4 file widget? 🙏

Super small update to @tjuravich great solution 😃

 <>
      <Form.Label className={props.rawErrors?.length > 0 ? 'text-danger' : ''}>
        {props.label || props.schema.title}
        {(props.label || props.schema.title) && props.required ? '*' : null}
      </Form.Label>
      <div className="form-control-file">
        <FileWidget {...props} type="file" />
      </div>
    </>

To have label like in bootstrap theme