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

[dstaley]

Prerequisites

• [x] I have read the documentation;
• [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [x] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Using the bootstrap-4 theme, submitting a file triggers an error:

.file should match format "data-url"

Steps to Reproduce

1. Playground link
2. Click "Choose file" for the first file upload
3. Select any file from your computer
4. Click "Submit"

Expected behavior

No errors are displayed.

Actual behavior

The following error is displayed:

.file should match format "data-url"

Version

master

[NeonMando158]

Is this issue due to Bootstrap or Something to do with the react-jsonschema wrapper ?

[epicfaace]

Yeah, this appears to be a problem with the bootstrap-4 theme. Seems like the form value is incorrectly being set to the file path, instead of the data url representation of the file:

@anikethsaha @Xtremilicious is this something you might be able to look into?

[Hasenn]

Are there any workarounds?

[tjuravich]

@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

[NeonMando158]

@tjuravich Nice solution but what happens when you need more than two or three file upload fields ?
File Widget will only accommodate 1.

[tjuravich]

Still not the most elegant, but something like this:

const uiSchema = { fileFieldOne: { "ui:widget": "file" }, fileFieldTwo: { "ui:widget": "file" }}

[CKGrafico]

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

[epicfaace]

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

[CKGrafico]

Let'ts wait to the original author @tjuravich if not, ping me.