Add an upload button to your swagger page

The swagger adventures continue…

In .NET Core the current recommended way to upload a file in ASP.NET is with an IFormFile.

If you’re using an IFormFile in your ASP.NET Web Api like so:

[HttpPost("upload")]
public IActionResult UploadFile(IFormFile file)
{

N.B. Update December 2018. As of Swashbuckle 4.0, IFormFile is supported out of the box, so the filter below is no longer needed.

If you do this, the Swagger page as rendered by Swashbuckle won’t look correct:

However, if you install version 2.5.0 or later of my Swashbuckle.AspNetCore.Examples NuGet package, then you can add the [AddSwaggerFileUploadButton] attribute to your controller action, like so:

[HttpPost("upload")]
[AddSwaggerFileUploadButton]
public IActionResult UploadFile(IFormFile file)
{

and then enable my filter in your Startup.cs:

services.AddSwaggerGen(c =>
{
    c.OperationFilter<AddFileParamTypesOperationFilter>();

Then you’ll get a nice upload button:

N.B. Update December 2018. As of Swashbuckle 4.0, IFormFile is supported out of the box, so the filter above is no longer needed.

Advertisement

11 thoughts on “Add an upload button to your swagger page

  1. Above attribute expects parameter name to be “File” else it will fail to create the upload button. is there a way we can configure the parameter name ?

  2. I am not able to see the upload button but was doing the exact thing you mentioned. Any idea why? Thanks!

      • Thanks for responding Matt. Your Swashbuckle Examples package is just what the doctor ordered!

        ([FromForm]IFormFile file ,[FromForm]string otherParm) does work! The SwaggerUI however includes Headers, Dispositions, etc that clutter it up quite a bit.

        When you leave [FromForm] off the file parameters, you get TWO “file” parameters in the SwaggerUI—one specified as “query” (the value of which doesn’t come through the method), and one from the body that has the upload button (thank you!!!!)–and this one DOES work.

        I would love to be able to get the clean SwaggerUI with the upload button on the ONE parameter, without the Header, Dispositions etc or the superfluous duplicate “file” parameter.

        Does this make sense? Please email me matt.page@niceincontact.com

        Your work is much appreciated. Thank you so much!

  3. I’m seeing the same thing as Matt here. Adding the [FromForm] attribute blows up the input form with discrete fields, and makes it fail. Leaving it off makes the form work, but with an extra field on it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s