fix: align OpenAPI 3.x.y file uploads with specification (#10409)

Refs #9278

Author: glowcloud

src/core/config/defaults.js

@@ -87,6 +87,13 @@ const defaultOptions = Object.freeze({
   onComplete: null,
   modelPropertyMacro: null,
   parameterMacro: null,
+
+  fileUploadMediaTypes: [
+    "application/octet-stream",
+    "image/",
+    "audio/",
+    "video/",
+  ],
 })
 
 export default defaultOptions

src/core/config/type-cast/mappings.js

@@ -45,6 +45,10 @@ const mappings = {
   docExpansion: { typeCaster: stringTypeCaster },
   dom_id: { typeCaster: nullableStringTypeCaster },
   domNode: { typeCaster: domNodeTypeCaster },
+  fileUploadMediaTypes: {
+    typeCaster: arrayTypeCaster,
+    defaultValue: defaultOptions.fileUploadMediaTypes,
+  },
   filter: { typeCaster: filterTypeCaster },
   fn: { typeCaster: objectTypeCaster },
   initialState: { typeCaster: objectTypeCaster },

src/core/plugins/json-schema-2020-12/fn.js

@@ -1,6 +1,8 @@
 /**
  * @prettier
  */
+import { List, Map } from "immutable"
+
 export const upperFirst = (value) => {
   if (typeof value === "string") {
     return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
@@ -504,3 +506,22 @@ export const makeGetExtensionKeywords = (fnAccessor) => {
 
   return getExtensionKeywords
 }
+
+export const hasSchemaType = (schema, type) => {
+  const isSchemaImmutable = Map.isMap(schema)
+
+  if (!isSchemaImmutable && !isPlainObject(schema)) {
+    return false
+  }
+
+  const hasType = (schemaType) =>
+    type === schemaType || (Array.isArray(type) && type.includes(schemaType))
+
+  const schemaType = isSchemaImmutable ? schema.get("type") : schema.type
+
+  if (List.isList(schemaType) || Array.isArray(schemaType)) {
+    return schemaType.some((t) => hasType(t))
+  }
+
+  return hasType(schemaType)
+}

src/core/plugins/json-schema-2020-12/index.js

@@ -55,6 +55,7 @@ import {
   isBooleanJSONSchema,
   getSchemaKeywords,
   makeGetExtensionKeywords,
+  hasSchemaType,
 } from "./fn"
 import { JSONSchemaPathContext, JSONSchemaLevelContext } from "./context"
 import {
@@ -143,6 +144,7 @@ const JSONSchema202012Plugin = ({ getSystem, fn }) => {
         useLevel,
         getSchemaKeywords,
         getExtensionKeywords: makeGetExtensionKeywords(fnAccessor),
+        hasSchemaType,
       },
     },
   }

src/core/plugins/json-schema-5/components/json-schema-components.jsx

@@ -51,14 +51,15 @@ export class JsonSchemaForm extends Component {
     const format = schema && schema.get ? schema.get("format") : null
     const type = schema && schema.get ? schema.get("type") : null
     const foldedType = fn.jsonSchema202012.foldType(immutableToJS(type))
+    const isFileUploadIntended = fn.isFileUploadIntended(schema)
 
     let getComponentSilently = (name) => getComponent(name, false, { failSilently: true })
     let Comp = type ? format ?
       getComponentSilently(`JsonSchema_${type}_${format}`) :
       getComponentSilently(`JsonSchema_${type}`) :
       getComponent("JsonSchema_string")
 
-    if (List.isList(type) && (foldedType === "array" || foldedType === "object")) {
+    if (!isFileUploadIntended && List.isList(type) && (foldedType === "array" || foldedType === "object")) {
       Comp = getComponent("JsonSchema_object")
     }
 

src/core/plugins/json-schema-5/fn.js

@@ -0,0 +1,19 @@
+/**
+ * @prettier
+ */
+import { Map } from "immutable"
+import isPlainObject from "lodash/isPlainObject"
+
+export const hasSchemaType = (schema, type) => {
+  const isSchemaImmutable = Map.isMap(schema)
+
+  if (!isSchemaImmutable && !isPlainObject(schema)) {
+    return false
+  }
+
+  const schemaType = isSchemaImmutable ? schema.get("type") : schema.type
+
+  return (
+    type === schemaType || (Array.isArray(type) && type.includes(schemaType))
+  )
+}

src/core/plugins/json-schema-5/index.js

@@ -14,6 +14,7 @@ import Schemes from "./components/schemes"
 import SchemesContainer from "./containers/schemes"
 import * as JSONSchemaComponents from "./components/json-schema-components"
 import { ModelExtensions } from "./components/model-extensions"
+import { hasSchemaType } from "./fn"
 
 const JSONSchema5Plugin = () => ({
   components: {
@@ -31,6 +32,9 @@ const JSONSchema5Plugin = () => ({
     SchemesContainer,
     ...JSONSchemaComponents,
   },
+  fn: {
+    hasSchemaType,
+  },
 })
 
 export default JSONSchema5Plugin

src/core/plugins/oas3/components/request-body.jsx

@@ -105,21 +105,13 @@ const RequestBody = ({
   }
   requestBodyErrors = List.isList(requestBodyErrors) ? requestBodyErrors : List()
 
-  if(!mediaTypeValue.size) {
-    return null
-  }
-
-  const isObjectContent = mediaTypeValue.getIn(["schema", "type"]) === "object"
-  const isBinaryFormat = mediaTypeValue.getIn(["schema", "format"]) === "binary"
-  const isBase64Format = mediaTypeValue.getIn(["schema", "format"]) === "base64"
+  const isFileUploadIntended = fn.isFileUploadIntended(
+    mediaTypeValue?.get("schema"),
+    contentType
+  )
 
   if(
-    contentType === "application/octet-stream"
-    || contentType.indexOf("image/") === 0
-    || contentType.indexOf("audio/") === 0
-    || contentType.indexOf("video/") === 0
-    || isBinaryFormat
-    || isBase64Format
+    isFileUploadIntended
   ) {
     const Input = getComponent("Input")
 
@@ -132,6 +124,13 @@ const RequestBody = ({
     return <Input type={"file"} onChange={handleFile} />
   }
 
+
+  if (!mediaTypeValue.size) {
+    return null
+  }
+
+  const isObjectContent = fn.hasSchemaType(mediaTypeValue.get("schema"), "object")
+
   if (
     isObjectContent &&
     (
@@ -190,11 +189,11 @@ const RequestBody = ({
                 initialValue = JSON.parse(initialValue)
               }
 
-              const isFile = type === "string" && (format === "binary" || format === "base64")
+              const isFileUploadIntended = fn.isFileUploadIntended(schema)
 
               const jsonSchemaForm = <JsonSchemaForm
                 fn={fn}
-                dispatchInitialValue={!isFile}
+                dispatchInitialValue={!isFileUploadIntended}
                 schema={schema}
                 description={key}
                 getComponent={getComponent}

src/core/plugins/oas3/fn.js

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import { Map } from "immutable"
+import isPlainObject from "lodash/isPlainObject"
+
+export const makeIsFileUploadIntended = (getSystem) => {
+  const isFileUploadIntended = (schema, mediaType = null) => {
+    const { getConfigs, fn } = getSystem()
+    const { fileUploadMediaTypes } = getConfigs()
+    const isFileUploadMediaType =
+      typeof mediaType === "string" &&
+      fileUploadMediaTypes.some((fileUploadMediaType) =>
+        mediaType.startsWith(fileUploadMediaType)
+      )
+
+    if (isFileUploadMediaType) {
+      return true
+    }
+
+    const isSchemaImmutable = Map.isMap(schema)
+
+    if (!isSchemaImmutable && !isPlainObject(schema)) {
+      return false
+    }
+
+    const format = isSchemaImmutable ? schema.get("format") : schema.format
+
+    return (
+      fn.hasSchemaType(schema, "string") && ["binary", "byte"].includes(format)
+    )
+  }
+
+  return isFileUploadIntended
+}

src/core/plugins/oas3/index.js

@@ -9,8 +9,11 @@ import wrapComponents from "./wrap-components"
 import * as actions from "./actions"
 import * as selectors from "./selectors"
 import reducers from "./reducers"
+import { makeIsFileUploadIntended } from "./fn"
+
+export default function ({ getSystem }) {
+  const isFileUploadIntended = makeIsFileUploadIntended(getSystem)
 
-export default function () {
   return {
     components,
     wrapComponents,
@@ -28,5 +31,9 @@ export default function () {
         selectors: { ...selectors },
       },
     },
+    fn: {
+      isFileUploadIntended,
+      isFileUploadIntendedOAS30: isFileUploadIntended,
+    },
   }
 }