3

I have a scenario where POST method returns an "image/png" content. The API works perfectly in Postman and I am able to see an image.

I use Swagger to document my APIs. For some reason "Try out" functionality crashes any POST method which returns an image. It freeze on loading and I see the following in the browser console:

cannot parse JSON/YAML content 
swagger-ui-min-js:14 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at C.n.showStatus (swagger-ui-min-js:14)
at showCompleteStatus (swagger-ui-min-js:14)
at response (swagger-ui-min-js:9)
at h (swagger-ui-min-js:7)
at t.on.response (swagger-ui-min-js:7)
at swagger-ui-min-js:7
at h.callback (swagger-ui-min-js:13)
at h.<anonymous> (swagger-ui-min-js:13)
at h.r.emit (swagger-ui-min-js:13)
at XMLHttpRequest.n.onreadystatechange (swagger-ui-min-js:13)

Any ideas of how this could be fixed? The API works (at least in Postman), it is just the Swagger UI which seems to have a problem. I installed Swagger via nuget packages Swashbuckle.Core and Swashbuckle version 5.6.0

Helen
  • 87,344
  • 17
  • 243
  • 314
Marina Melin
  • 162
  • 5
  • 10
  • 1
    There's no Swagger UI version 5.6.0. The latest one is 3.0.19, and PNG image responses are displayed just fine https://i.stack.imgur.com/3mVHc.png. Could you clarify which Swagger UI version and browser you are using? Could you post your Swagger spec? – Helen Jul 21 '17 at 07:40
  • @Helen I installed swagger via nuget package https://www.nuget.org/packages/Swashbuckle The version of this package is 5.6. I don't know the corresponding version of Swagger UI since it's not listed.Also on the image you posted I see that it is GET request. My problem happens with an image being returned from POST. – Marina Melin Jul 21 '17 at 14:33
  • I'm trying to reproduce this issue, see here: http://swashbuckletest.azurewebsites.net/swagger/ui/index?filter=Image#/Image/Image_Post – Helder Sepulveda Jul 21 '17 at 14:52
  • On my case I have a controller with both a GET and a POST and both return "image/png" content, But the images are different and in the swagger-ui the POST shows the image of the GET... code is here:https://github.com/heldersepu/SwashbuckleTest/blob/master/Swagger_Test/Controllers/ImageController.cs – Helder Sepulveda Jul 21 '17 at 14:55
  • The POST results displaying GET result is a totally different issue. When the response is an image, the UI seems to send an additional GET request to fetch and render that image. You can see 2 requests in the console. You can [open an issue](https://github.com/swagger-api/swagger-ui/issues) about that in the Swagger UI repo. – Helen Jul 21 '17 at 15:04
  • ...and If there was no GET like the case presented by @M_M I think we would get an error. – Helder Sepulveda Jul 21 '17 at 15:15
  • 1
    Bug submitted with the swagger-ui team: https://github.com/swagger-api/swagger-ui/issues/3435 – Helder Sepulveda Jul 21 '17 at 15:41
  • Just curious - why does your image endpoint have response types application/json, text/json and text/html if it returns an image? This _might_ be why it says "cannot parse JSON/YAML content". – Helen Jul 21 '17 at 15:58
  • As @HelderSepu said, there is no GET in my case. The image is generated dynamically based on the json body passed in the request. For the older version of Swashbuckle (5.2.1) I saw that there was GET request sent after POST in the networking tab. For the version I use now (5.6.0) I don't see this problem. However, I still don't see an image – Marina Melin Jul 21 '17 at 20:41
  • Also, as @Helen pointed in the sample example, I don't have "image" in the list of response types on my documentation page. How do I add it? – Marina Melin Jul 21 '17 at 20:42
  • @M_M the "image" in the list of response types makes no difference... I added to my mine same result, you can add it using and IDocumentFilter – Helder Sepulveda Jul 22 '17 at 00:19

2 Answers2

2

As was clarified in the comments, M_M originally used Swagger UI 2.x, and the spec looked like this:

paths:
  /api/PngImage:
    post:
      produces:
        - application/json
        - text/json
        - text/html
      responses:
        200:
          description: OK
          schema:
            type: object

There are two issues with the spec:

  • The endpoint returns a PNG image, but is said to produce JSON and HTML.
  • File responses, including images, should have type: file, not type: object.

In Swagger UI 2.x, the "cannot parse JSON/YAML content" error is caused by wrong produces - UI expects a JSON response but gets a binary response instead. Changing produces to image/png should solve the problem with UI 2.x.

Swagger UI 3.0.19, however, had a different issue - when the response was an image, the UI repeated the request to the same endpoint but using GET in order to display the image instead of rendering the existing response. So if the endpoint did not accept GET, or if GET returned a different image than POST, the original image response was not displayed. HelderSepu reported the double request issue to the Swagger UI developers, and it was fixed in Swagger UI 3.0.20.

Helen
  • 87,344
  • 17
  • 243
  • 314
  • Since I use version 2.x this answer was actually the correct answer in my case. I used https://stackoverflow.com/a/36348869/5318253 to add a "image/png" as expected content result and now I can successfully receive an image from POST call in my Swagger documentation. Thank you very much @Helen – Marina Melin Jul 24 '17 at 18:03
1

The swagger-ui team confirmed that this is a bug only happening on POST:
https://github.com/swagger-api/swagger-ui/issues/3435
As a workaround I recommend you using GET (where possible)


Update (Jul/22)

The swagger-ui team has fixed the bug on version 3.0.20
I incorporated that version into my fork, you can get the latest here:
https://www.nuget.org/packages/Swagger-Net/8.3.0.2001

Community
  • 1
  • 1
Helder Sepulveda
  • 15,500
  • 4
  • 29
  • 56
  • Thank you for your help @HelderSepu! It ended up that Helen's answer worked in my case because I use Swagger 2.x which comes with swashbuckle. – Marina Melin Jul 24 '17 at 18:05
  • Good, I still recommend you to try Swagger-Net, on that one I'm using ui 3.x, that is a major improvement over 2 – Helder Sepulveda Jul 24 '17 at 18:42