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

[dstaley]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• 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.

[peterkelly]

Here's another workaround which monkey-patches the library, without requiring you to do anything special in uiSchema:

import { withTheme, utils } from "@rjsf/core";
import { Theme } from "@rjsf/bootstrap-4";

const registry = utils.getDefaultRegistry();
const defaultFileWidget = registry.widgets["FileWidget"];
(Theme as any).widgets["FileWidget"] = defaultFileWidget;
const Form = withTheme(Theme);

The root cause of the bug is an incomplete implementation of FileWidget in the theme, which simply wraps around the text input. It doesn't work because obtaining data urls for the uploaded files requires some extra javascript functions, which are present in the core FileWidget.

[epicfaace]

I think an easier way to do this would be just to override FileWidget in https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields/#customizing-the-default-fields-and-widgets?

[boskjoett]

This bug is almost 1 year old and still not fixed - why?

[epicfaace]

lol bugs don't fix themselves, someone has to fix it

[boskjoett]

This thread has identified the root cause (thanks peterkelly), so I was hoping some of the maintainers would fix it. I am unfortunately not a React expert.

[epicfaace]

Also see #2418 for more context