swagger-api / swagger-api/swagger-ui

Input fields for arrays of references in request body

Open
#4,975 4 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

specification: 3.x 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: Ubuntu
  • Browser: chrome
  • Version: 69
  • Method of installation: composer
  • Swagger-UI version: 3.0
  • Swagger/OpenAPI version: OpenAPI 3.0
Content & configuration

Swagger/OpenAPI definition:

openapi: "3.0.0"
info:
  version: 1.0.0
  title: Hotels
paths:
  /hotel:
    post:
      requestBody:
        required: true
        content:
          multipart/form-data:
            schema:
              type: object
              properties:
                name:
                  type: string
                images:
                  type: array
                  items:
                    type: string
                    format: binary
                rooms:
                  type: array
                  items:
                    $ref: '#/components/schemas/Room'
      responses:
        '200':
          description: response
          content:
            application/json:
              schema:
                type: string
components:
  schemas:
    Room:
      type: object
      properties:
        name:
          type: string
        image:
          type: string
          format: binary

Swagger-UI configuration options:

SwaggerUI({
  // Auto-configured through bundle
})
Screenshots

image

How can we help?

As you can see in the image there are input fields for the images parameter but not for the rooms parameters. These are in JSON format.
It is possible to have input fields for each element in the arrays? Also, I seems the data is not sent in the proper format. I want to send to the server a request in this format(from Chrome Header/Form Data):

------WebKitFormBoundarynP2Wq5aK1GFB5j8h
Content-Disposition: form-data; name="name"

Hotel 1
------WebKitFormBoundarynP2Wq5aK1GFB5j8h
Content-Disposition: form-data; name="rooms[0][name]"

First room
------WebKitFormBoundarynP2Wq5aK1GFB5j8h
Content-Disposition: form-data; name="rooms[0][image]"; filename="img1.jpg"
Content-Type: application/octet-stream

<image data here>
------WebKitFormBoundarynP2Wq5aK1GFB5j8h
Content-Disposition: form-data; name="rooms[1][name]"

Second  room
------WebKitFormBoundarynP2Wq5aK1GFB5j8h
Content-Disposition: form-data; name="rooms[1][image]"; filename="img2.jpg"
Content-Type: application/octet-stream

<image data here>
------WebKitFormBoundarynP2Wq5aK1GFB5j8h--

But Swagger is sending it in this format:

------WebKitFormBoundaryB71611XhkBfcjbca
Content-Disposition: form-data; name="name"

Hotel 1
------WebKitFormBoundaryB71611XhkBfcjbca
Content-Disposition: form-data; name="rooms"

{
  "name": "string",
  "image": "string"
},{
  "name": "string",
  "image": "string"
}
------WebKitFormBoundaryB71611XhkBfcjbca--

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

Reproduce the provided OpenAPI 3.0 multipart/form-data example in SwaggerUI, starting from the requestBody schema and configuration shown. Done means array-of-reference rooms expose per-element inputs and submit multipart fields in the requested rooms[0][name] and rooms[0][image] shape.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.