Azure Functions で 複数ファイルをアップロードする

目次

検証環境

• Azure Functions v3
• Postman
• Chrome
• Edge (Chromium)

サーバーサイド

クライアントからは、multipart/form-data 形式で POST してもらう想定。

[FunctionName("Upload")]
public async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "post", Route = null)] HttpRequest req,
    ILogger log)
{
    log.LogInformation("C# HTTP trigger function processed a request.");

    // UserAgent を取得するキーは "User-Agent"
    log.LogInformation(req.Headers["User-Agent"][0]);

    var form = await req.ReadFormAsync();

    foreach (var file in form.Files)
    {
        log.LogInformation(file.FileName);
    }
    foreach (var kvp in form)
    {
        log.LogInformation($"{kvp.Key}({kvp.Value.Count}): {kvp.Value}");
    }

    return new OkObjectResult("OK");
}

クライアントサイド

webkitdirectory 属性

webkitdirectory 属性を使用すると、ファイルを選択する代わりにフォルダを選択できるようになる。送信されたファイルのファイル名は相対パス付きのため、ディレクトリのツリー構造の情報も取得できるようになる。

developer.mozilla.org

<form action="http://localhost:7071/api/Upload", method="POST", enctype="multipart/form-data">
    BaseDir: <input type="text" name=projectId/><br/>
    Folder: <input type="file" name="files" webkitdirectory multiple/><br/>
    <input type="submit" value="Submit"/>
    <input type="reset" value="Reset"/>
</form>

サーバーサイドの実行結果。
ファイル名が選択したフォルダを基点とした相対パスになっている。

[2021-02-26T17:46:19.298Z] C# HTTP trigger function processed a request.
[2021-02-26T17:46:19.320Z] Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
[2021-02-26T17:46:19.322Z] wallpapers/glanpalace1.jpg
[2021-02-26T17:46:19.322Z] wallpapers/photo1/aurora2.jpg
[2021-02-26T17:46:19.323Z] wallpapers/photo1/icelandlake2540.jpg
[2021-02-26T17:46:19.323Z] basedir/(1): wallpapers
[2021-02-26T17:46:19.325Z] Executed 'Upload' (Succeeded, Id=6a51b942-e294-401c-b344-b3395e53f9a5, Duration=140ms)

Postman

Postman では form-data のファイル選択でフォルダを選択することができない。そのため複数ファイルを選択する場合ツリー構造の情報は除外される。そもそもひとつの Key-Value には同じ階層のファイルしか含めることができない。階層が違うファイルは別のプロパティとして設定する必要がある。 特にツリー構造の情報が必要ない場合はファイルだけを、ツリー構造の情報が必要な場合は別途その情報を設定して送信する。

type は Text と File が選べる。File は1つでも複数でも選択できるようになっている。 File の Key-Value は複数定義すると1つの配列にまとめられて送信されるため、階層が違うファイルを選択する場合はそれぞれの階層に応じた Key-Value を増やせば一括で送信できる。

サーバーサイドの実行結果。

[2021-02-26T17:45:20.643Z] C# HTTP trigger function processed a request.
[2021-02-26T17:45:20.676Z] PostmanRuntime/7.26.5
[2021-02-26T17:45:20.676Z] glanpalace1.jpg
[2021-02-26T17:45:20.677Z] aurora2.jpg
[2021-02-26T17:45:20.677Z] icelandlake2540.jpg
[2021-02-26T17:45:20.678Z] basedir(1): wallpapers
[2021-02-26T17:45:20.679Z] filePaths(3): glanpalace1.jpg,photo1/aurora2.jpg,photo1/icelandlake2540.jpg
[2021-02-26T17:45:20.689Z] Executed 'Upload' (Succeeded, Id=5172d86a-1074-40bb-a3d7-f4c793d35157, Duration=265ms)