【C#/ASP.NET】ファイルアップロードを扱うAPIを作り、Swaggerで動作確認する

概要

• ASP.NET Web APIでmultipart/form-dataでファイルアップロードを扱う方法の実装を示す。
• Swaggerを用いてファイルアップロードAPIの動作確認を行う手順を示す。

実現したいこと

(1)Swaggerから画像データをmultipart/form-dataで送信する。
(2)サーバサイドでmultipart/form-dataを解析し、画像情報をローカルに格納する。

動作確認環境

Visual Studio 2019
ASP.NET Webアプリケーション(.NET Framework4.6.2)
Nugetパッケージ
・Swashbuckle V5.6.0(swagger)
Internet Explore ver21H1

目次

[ファイルアップロードのWeb Apiを実装する](#ファイルアップロードを扱うWeb Apiを実装する)

• 1.ソリューションを作成する
• 2.Swaggerを設定する
• 3.WebApiを実装する
• 4.Swaggerで動作確認する。

ファイルアップロードを扱うWeb Apiを実装する

1.ソリューションを作成する

(1)ASP.NET Webアプリケーションを選択する。
ここでは[MultiPartServer]って名称で作っています。名前は任意です。
(2).NET Frameworkのバージョンを選択する。
　 今回は.NET Framework4.6.2を選択した。
(3)Web APIを選ぶ。

2.Swaggerを設定する

(1)Nugetパッケージをインストールする。

(2)プロジェクトのビルド設定を変更して、XMLファイルを出力するように変更する。
[ビルド]→[XMLドキュメントファイル]にチェックを入れる。

(3)「ソリューションエクスプローラ」で「App_Start直下」の[SwaggerConfig.cs]を開く。

(3)自動生成コードを下記のように修正する。

SwaggerConfig

using System.Web.Http;
using WebActivatorEx;
using MultiPartServer;
using Swashbuckle.Application;
using System.IO;

[assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]
namespace MultiPartServer
{
    public class SwaggerConfig
    {
        public static void Register()
        {
            var thisAssembly = typeof(SwaggerConfig).Assembly;

            GlobalConfiguration.Configuration
                .EnableSwagger(c =>
                    {
                        c.SingleApiVersion("v1", "MultiPartServer");
                        //XMLファイルを読込む
                        c.IncludeXmlComments(GetXmlCommentsPath());
                    })
                .EnableSwaggerUi(c =>
                    {
                    });
        }
        private static string GetXmlCommentsPath()
        {
#warning パスはXMLドキュメントファイルの設定に合わせて修正すること
            return Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "bin", "MultiPartServer.xml");
        }
    }
}

(4)Swagger UI画面用にフィルタ設定を適用する。
下記ソースを追加する。

UploadFileOperationFilter.cs

using System.Web.Http.Description;
using Swashbuckle.Swagger;

namespace MultiPartServer.Controllers
{
    /// <summary>
    /// Swagger　UI用ファイルアップロードフィルタ
    /// </summary>
    public class UploadFileOperationFilter : IOperationFilter
    {
        public void Apply( Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription )
        {
            operation.consumes.Add("multipart/form-data");
            operation.parameters = new[]
            {
                new Parameter()
                {
                    name = "File",
                    @in = "formData",
                    required = true,
                    //type=file設定は必須
                    type = "file",
                    description = "UploadFile"
                },
            };
        }
    }
}

3.WebApiを実装する

(1)「ソリューションエクスプローラ」で「Controllers」を選択する。
(2)「追加」→「Web API　コントローラクラス」を選択してファイルを追加する。

(3)追加したファイルを下記のように修正する。

using System;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.IO;
using System.Threading.Tasks;
using System.Web;
using Swashbuckle.Swagger.Annotations;

namespace MultiPartServer.Controllers
{
    /// <summary>
    /// ファイルアップロードのイベントハンドラ
    /// </summary>
    public class UploadController : ApiController
    {
        /// <summary>
        /// Postメソッド
        /// </summary>
        /// <returns>Httpステータスコード</returns>
        [SwaggerOperationFilter(typeof(UploadFileOperationFilter))]
        public async Task<IHttpActionResult> PostFile()
        {
            // multipart/form-data以外、サポート外のメディア種類(Http Status 415)を返す
            if(!Request.Content.IsMimeMultipartContent())
            {
                return StatusCode(HttpStatusCode.UnsupportedMediaType);
            }
            // multipart/form-dataを保存する場所を指定する
            var root = HttpContext.Current.Server.MapPath("~/App_Data");
            var provider = new MultipartFormDataStreamProvider(root);

            try
            {
                //データを読み取る
                await Request.Content.ReadAsMultipartAsync(provider);
                foreach(var file in provider.FileData)
                {
                    //ファイルに格納する
                    var fileInfo = new FileInfo(file.LocalFileName);
                }
            }
            catch(Exception e)
            {
                return InternalServerError(e);
            }
            return Ok();
        }
    }
}

ポイントはMultipartFormDataStreamProviderクラス。
アップロードされたmultipart/form-dataをファイルストリームとして読み込むことができる。

4.Swaggerで動作確認する。

(1)デバック実行する。
(2)URL欄に[/swagger]を追記して、Enterを押す。

※por番号はご自身の環境のものが表示されます。

(3)下記のようなSwagger UI画面が表示されることを確認する。

(4)UploadのPostメソッドのタブを開く。
(5)送信したいファイルを選択し、データを送信する。

　(5-a)送信したいファイルを[Value]の項目で選択する。
　今回は下記のような単純なテキストデータを送った。

Test.txt

ABCD

　(5-b)[Try it out]を押下する。

(6)Http応答を確認する。
ステータコードが200なら、問題なし。

(7)送信した画像情報が指定したフォルダに格納されていることを確認する。
(7-a)Visual Studioの「ソリューションエクスプローラ」で「App_Data」を選択する。
右クリックして、[エクスプローラでファルダを開く]を選択する。
　(7-b)開かれたエクスプローラにファイルが格納されていること。
　下記のように送信情報が変な名前のファイルが作成されている。
　
(7-c)テキストエディタで格納されたファイルを開く。
送信内容と一致してれば、問題なし。

サンプル実装のリンク

Gitに実装をアップしています。
リンク

参考

No	リンク	説明
1	ASP.NET Web Apiガイダンス	「ASP.NET Web API での HTML フォームデータの送信: ファイルのアップロードとマルチパート MIME」を参考にした。
2	MSDNコードギャラリー	参考 No1のソースコードのダウンロードリンクが切れており、Githubからガイダンスのソースを探したもの。
3	しばやんさんの雑記	記事「ASP.NET Web API でアップロードされたファイルを扱う方法を知らなかったので調べた」を参考にした。
4	@volpe28vさんの記事	Qiitaの記事「ASP .Net MVC 4 WebAPI のPOSTでマルチパートのファイルを送受信する」
5	TonyTonyKunさんの記事	「ファイルをアップロードする API の Swagger ドキュメントを書く」を参考にした。
6	How to upload multipart/form-data in web api 2	英語でmultipart/form-dataでファイルアップロードを扱う方法が記載されている。
7	MultipartFormDataStreamProviderクラス	MSDNのクラス仕様書
8	File Upload	Swagger file Upload