Skip to content

Commit

Permalink
feat(oas3): Show file upload for schema binary format (#7325)
Browse files Browse the repository at this point in the history 
* fix(ux): display actual content type instead of hard-coded application/octet-stream

* feat(ux): show file upload when schema has "format: binary", fixes #5636

* feat(ux): show file upload when schema has "format: base64"

According to
#7325 (comment)
the uploaded file should be converted to base64 automatically.

* feat(ux): add cypress tests for displaying an upload button
  • Loading branch information
@neiser
neiser authored Jun 22, 2021
1 parent 1032d92 commit 13c110a
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 2 deletions.
8 changes: 6 additions & 2 deletions src/core/plugins/oas3/components/request-body.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,18 +107,22 @@ const RequestBody = ({
}

const isObjectContent = mediaTypeValue.getIn(["schema", "type"]) === "object"
const isBinaryFormat = mediaTypeValue.getIn(["schema", "format"]) === "binary"
const isBase64Format = mediaTypeValue.getIn(["schema", "format"]) === "base64"

if(
contentType === "application/octet-stream"
|| contentType.indexOf("image/") === 0
|| contentType.indexOf("audio/") === 0
|| contentType.indexOf("video/") === 0
|| isBinaryFormat
|| isBase64Format
) {
const Input = getComponent("Input")

if(!isExecute) {
return <i>
Example values are not available for <code>application/octet-stream</code> media types.
Example values are not available for <code>{contentType}</code> media types.
</i>
}

Expand Down Expand Up @@ -163,7 +167,7 @@ const RequestBody = ({
|| prop.hasIn(["items", "default"])
const useInitialValFromEnum = prop.has("enum") && (prop.get("enum").size === 1 || required)
const useInitialValue = useInitialValFromSchemaSamples || useInitialValFromEnum

let initialValue = ""
if (type === "array" && !useInitialValue) {
initialValue = []
Expand Down
105 changes: 105 additions & 0 deletions test/e2e-cypress/static/documents/features/request-body-upload-file.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
openapi: 3.0.0
info:
title: "Request body file upload"
description: |-
This document has examples for examining the `schema` or content type for request bodies requiring a file upload
* `application/octect-stream` content type (no matter what schema format)
* `audio/*` content type (no matter what schema format)
* `image/*` content type (no matter what schema format)
* `video/*` content type (no matter what schema format)
* schema format is `base64` (no matter what content type)
* schema format is `binary` (no matter what content type)
version: "1.0.0"
paths:
/upload-application-octet-stream:
post:
operationId: uploadApplicationOctetStream
requestBody:
content:
application/octet-stream:
schema:
type: string
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
/upload-image-png:
post:
operationId: uploadImagePng
requestBody:
content:
image/png:
schema:
type: string
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
/upload-audio-wav:
post:
operationId: uploadAudioWav
requestBody:
content:
audio/wav:
schema:
type: string
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
/upload-video-mpeg:
post:
operationId: uploadVideoMpeg
requestBody:
content:
video/mpeg:
schema:
type: string
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
/upload-schema-format-binary:
post:
operationId: uploadSchemaFormatBinary
requestBody:
content:
application/x-custom:
schema:
type: string
format: binary
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
/upload-schema-format-base64:
post:
operationId: uploadSchemaFormatBase64
requestBody:
content:
application/x-custom:
schema:
type: string
format: base64
responses:
'200':
description: successful operation
content:
text/plain:
schema:
type: string
114 changes: 114 additions & 0 deletions test/e2e-cypress/tests/features/request-body-upload-file.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/**
* @prettier
*/

describe("OpenAPI 3.0 Request Body upload file button", () => {
describe("application/octet-stream", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadApplicationOctetStream")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for application/octet-stream media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadApplicationOctetStream")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
describe("image/png", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadImagePng")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for image/png media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadApplicationOctetStream")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
describe("audio/wav", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadAudioWav")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for audio/wav media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadApplicationOctetStream")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
describe("video/mpeg", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadVideoMpeg")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for video/mpeg media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadApplicationOctetStream")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
describe("schema format binary", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadSchemaFormatBinary")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for application/x-custom media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadSchemaFormatBinary")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
describe("schema format base64", () => {
it("should display description with the correct content type", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadSchemaFormatBase64")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper i")
.should("have.text", "Example values are not available for application/x-custom media types.")
})
it("should display a file upload button", () => {
cy.visit("/?url=/documents/features/request-body-upload-file.yaml")
.get("#operations-default-uploadSchemaFormatBinary")
.click()
.get(".try-out__btn")
.click()
.get(".opblock-section-request-body .opblock-description-wrapper input")
.should("have.prop", "type", "file")
})
})
})

0 comments on commit 13c110a

Please sign in to comment.