Scribd
Upload
201 views2 pages

Uploading A File Using IFormFile Should Show An Upload Button

The document describes an issue where uploading a file using IFormFile in an API action method causes Swagger UI to display a text box instead of an upload button. It provides code for an action method that accepts an IFormFile and for an IOperationFilter to change the parameter to type "file", but this does not solve the problem. The solution section then provides an example of how to use a NonBodyParameter with in="formData" along with adding "application/form-data" to the consumes, which should produce the desired upload button in Swagger UI.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
201 views2 pages

Uploading A File Using IFormFile Should Show An Upload Button

The document describes an issue where uploading a file using IFormFile in an API action method causes Swagger UI to display a text box instead of an upload button. It provides code for an action method that accepts an IFormFile and for an IOperationFilter to change the parameter to type "file", but this does not solve the problem. The solution section then provides an example of how to use a NonBodyParameter with in="formData" along with adding "application/form-data" to the consumes, which should produce the desired upload button in Swagger UI.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Uploading a File using IFormFile Should Show an Upload Button

===============

I am using IFormFile in the following action method to upload a file to my API.


This causes the Swagger UI to display a text box. Is there a way to show an upload
button in the Swagger UI to upload a file with the application/zip MIME type?

[HttpPost("{GuideId}/content", Name = GuidesControllerRouteName.PostZipFile)]


[Consumes("application/zip")]
[ProducesResponseType(typeof(void), StatusCodes.Status201Created)]
[ProducesResponseType(typeof(void), StatusCodes.Status404NotFound)]
public Task<IActionResult> PostZipFile([FromBody] IFormFile zipFile)
{
}

In addition, I've tried using the following IOperationFilter based on this MVC 5
Swashbuckle code without success:

public class FormFileSchemaFilter : IOperationFilter


{
public void Apply(Operation operation, OperationFilterContext context)
{
if (context.ApiDescription.ParameterDescriptions.Any(x => x.Type ==
typeof(IFormFile)))
{
var bodyParameter =
operation.Parameters.OfType<BodyParameter>().First();
bodyParameter.In = "formData";
bodyParameter.Required = true;
bodyParameter.Schema.Type = "file";
}
}
}

=======solution========

Janak S. has provided an excellent solution for this. I believe it should produce
your desired results.
Solution

All credit goes to Janak!

My Example:

Controller

<xmp>
public async Task UploadFile(IFormFile filePayload)
{
var fileName = ContentDispositionHeaderValue
.Parse(filePayload.ContentDisposition)
.FileName
.Trim('"');
if (filePayload.Length > 0)
using (var fileStream = new
FileStream(Path.Combine($"{_config.GetValue("FileUploadPath")}", fileName),
FileMode.Create))
await filePayload.CopyToAsync(fileStream);
return new OkObjectResult("Success");
}
</xmp>

Operation Filter

<xmp>
public class FileOperationFilter : IOperationFilter
{
public void Apply(Operation operation, OperationFilterContext context)
{
if (context.ApiDescription.ParameterDescriptions.Any(x =>
x.ModelMetadata.ContainerType == typeof(IFormFile)))
{
operation.Parameters.Clear();
operation.Parameters.Add(new NonBodyParameter
{
Name = "FilePayload", // must match parameter name from
controller method
In = "formData",
Description = "Upload file.",
Required = true,
Type = "file"
});
operation.Consumes.Add("application/form-data");
}
}
}
</xmp>

Swagger config

<xmp>
services.AddSwaggerGen(c =>
{
c.OperationFilter();
});
</xmp>

You might also like