Configuration option to change default "send empty value" to true in form data

[timothee-peron]

Hello, In my API, I have some multipart forms, here's a screenshot from the pet store:

I want to have these checkboxes unchecked by default, because of the way my API deals with empty form fields. So far, I've tried to modify the request-body and the parameter-include-empty components by writing a plug-in, but I'm struggling to have the parameter-include-empty unchecked (by setting isIncluded to false) without breaking the behaviour of request-body. Is the current version of swagger-ui allowing for this customization? Sorry for my poor skills in react, any help is welcome!

Related links: #5830 Allow to skip submitting empty values in form data #6228 Set default true for 'send empty value'

[timothee-peron]

I'm actually trying to set the 'setIsIncludedOptions' in the 'RequestBody' by a plugin as follows: (defaultValue is changed to false)

file: request-body.jsx

(...)
const RequestBody = ({
  (...)
}) => {
  const handleFile = (e) => {
    onChange(e.target.files[0])
  }
  const setIsIncludedOptions = (key) => {
    let options = {
      key,
      shouldDispatchInit: false,
      defaultValue: false
    }
    let currentInclusion = requestBodyInclusionSetting.get(key, "no value")
    if (currentInclusion === "no value") {
      options.shouldDispatchInit = true
      // future: can get/set defaultValue from a config setting
    }
    return options
  }
(...)
}

Is the current code allowing to change setIsIncludedOptions without forking the swagger-ui project?

[tim-lai]

The ability to change the defaultValue for setIsIncludedOptions is not yet implemented. Fortunately, in #6228, a hook is in place to create a redux action to change the defaultValue, as well as to make a feature to have it available as a configuration option. I think this would be a generally useful option.

[tim-lai]

updating the issue title, and labeling as a feature request.

[xhafan]

I reported the same issue for .NET's Swashbuckle.AspNetCore and was redirected here.

[slobo]

@tim-lai when you say this:

a hook is in place to create a redux action to change the defaultValue

Does it mean it's something we can do via custom plugins, or is forking SwaggerUI the only way to change the default right now?

For our use case it's rather painful that optional fields are sent as empty by default instead of excluded, since we have a lot of optional fields and the backend doesn't like empty values...

Thanks!

[tim-lai]

Does it mean it's something we can do via custom plugins, or is forking SwaggerUI the only way to change the default right now?

You should be able to do this via custom plugins, via wrapping the targeted component(s).

@slobo

[pdhar-tibco]

Example:

UncheckSendEmptyValuePlugin = function() {
            return {
                wrapComponents: {
                    ParameterIncludeEmpty: (Original, {
                        React
                    }) => (props) => {
                        // console.log(props);
                        props.isIncludedOptions.defaultValue = false;
                        return React.createElement(Original, props)
                    },
                    TryItOutButton: (Original, {
                        React
                    }) => (props) => {
                        // console.log(props);
                        if (props.isOAS3 && props.hasUserEditedBody) {
                            props.hasUserEditedBody = false;
                        }
                        return React.createElement(Original, props)
                    }
                }

            }
        }

[kunaldo07]

how to get rid off "Send Empty Value" checkbox option?

[ily-salamat]

We are almost in 2024 and this option has not yet been implemented 😧

[juanestrada17]

The "Send Empty Value" checkbox was causing a bug for me. When I uploaded a file, removed the file and clicked on the checkbox it would load forever, without it even triggering a breakpoint in the API controller.

What I did was disable the "Send Empty Value" with this plugin:

const UncheckSendEmptyValuePlugin = () => {
    return {
      wrapComponents: {
        ParameterIncludeEmpty: () => () => null,
      },
    };
  };

I wonder if someone has encountered this issue before and has a better solution to it!

[Rikj000]

Thank you @pdhar-tibco, your plugin works great to disable the Send empty value check-boxes by default! 🎉

Below is an implementation example for people who'd like to integrate it into their Swagger UI:

<script>
    window.onload = function() {
        // Define uncheck empty value plugin
        const UncheckSendEmptyValuePlugin = function() {
            return {
                wrapComponents: {
                    ParameterIncludeEmpty: (Original, { React }) => (props) => {
                        props.isIncludedOptions.defaultValue = false;
                        return React.createElement(Original, props)
                    },
                    TryItOutButton: (Original, { React }) => (props) => {
                        if (props.isOAS3 && props.hasUserEditedBody) { props.hasUserEditedBody = false; }
                        return React.createElement(Original, props)
                    }
                }
            }
        }

        // Build the Swagger UI
        const ui = SwaggerUIBundle({
            // ...
            plugins: [
                // ...
                UncheckSendEmptyValuePlugin
            ],
            // ...
        })

        window.ui = ui
    }
</script>

[parth-1372]

Hey , @timothee-peron I would like to work on this issue. Please assign it to me.