swagger-api / swagger-api/swagger-ui

File browser shows in Swagger Editor but not in Swagger UI

Open
#7,261 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: support
Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Q&A (please complete the following information)
  • OS: Linux or MacOS
  • Browser: Chrome, Firefox
  • Version: 90.0, 88.0
  • Method of installation: dist assets, docker, tried out at https://validator.swagger.io
  • Swagger-UI version: 3.48.0
  • Swagger/OpenAPI version: OpenAPI 3.0.1
Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.1
info:
  title: Product Services
  version: 2.3.0
servers:
  - url: /dp/api
tags:
  - name: Image
    description: Operations on Images
  - name: OtherProduct
    description: Operations on \'Other\' Product type data
paths:
  /stage:
    post:
      tags:
        - OtherProduct
        - Image
      summary: Stage content for up to 30 while user completes form.
      operationId: stageContent
      requestBody:
        content:
          multipart/form-data:
            schema:
              type: object
              required:
                - content
              properties:
                content:
                  type: string
                  description: content (source image or \'Other\' file)
                  format: binary
        required: true
      responses:
        200:
          description: Content staged
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/StagedContent'
        500:
          description: Unexpected error
          content: { }
      security:
        - jwt: [ ]

components:
  schemas:
    StagedContent:
      required:
        - id
      type: object
      properties:
        id:
          type: string
          description: staged content id

  securitySchemes:
    jwt:
      type: "http"
      scheme: "bearer"
      bearerFormat: "JWT"
Describe the bug you're encountering

The /stage POST service described in the YAML above takes a file. When I view the UI for the service rendered by the Swagger editor at https://editor.swagger.io (swagger-editor-bundle.js, swagger-editor-standalone-preset.js), a file picker is shown.
When I view the UI for the service rendered by the Swagger UI (swagger-ui-bundle.js, swagger-ui-standalone-preset.js), a textbox is shown. I've tried installing the Swagger UI dist files locally, running the swaggerapi/swagger-ui Docker image, and using https://validator.swagger.io. Results are the same for all three.

It appears to me from this stack overflow question that the behavior was fixed in Swagger Editor in 2018, but that fix wasn't made in Swagger UI. I also realize that this could be related to issue 5636, but am not completely sure.

To reproduce...

Steps to reproduce the behavior:

  1. Render the YAML above in the Swagger UI
  2. Expand the POST stage/ service. See that a text box is shown rather than a file picker.
  3. Render the YAML above in the Swagger Editor at https://editor.swagger.io
  4. Expand the POST stage/ service. See that a file picker is shown, which is what should be shown.
Expected behavior

Swagger UI should show a file picker for services with requestBody item of type=string and format=binary

Screenshots

Swagger Editor
swagger_editor_stage
Swagger UI at https://validator.swagger.io
swagger_validator_stage
Swagger UI (dist files)
swagger-ui_stage

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the YAML in Swagger UI and comparing its request-body rendering with Swagger Editor. Trace the Swagger UI request-body component reached from swagger-ui-bundle.js, focusing on how type=string and format=binary are rendered. Done means the OpenAPI 3.0.1 example shows a file picker instead of a textbox.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.