Zenn
👇

【C#】画像ファイルをS3からダウンロードするWebAPI

2023/06/23に公開
.NET
C#
Next.js
S3
#
ダウンロード
tech

はじめに

.NETのWebAPIで画像ファイルをダウンロードして表示するのって、どうやって作るんだっけ？となりました。
簡単に検証したので、フロントエンド・バックエンド両方の実装を掲載します。

概要

S3から画像をダウンロードして表示します。

  • フロントエンド
    Next.jsで実装しています。axiosを使用してバックエンドAPIから画像ファイルをGETします。
  • バックエンド
    .NET6で実装しています。S3から画像ファイルをダウンロードし、フロントエンドへ返します。

フロントエンドの実装例

axiosを使用してバックエンドAPIから画像ファイルをダウンロードします。responseTypeにarraybufferを指定しています。
ダウンロードした画像をimgタグに設定します。

index.tsx
import axios from "axios";
import type { NextPage } from "next";
import { useEffect, useRef } from "react";

const Home: NextPage = () => {
  const imgRef = useRef<HTMLImageElement>(null);

  const downloadImg = async () => {
    // 画像ファイルをダウンロードする　"arraybuffer"を指定する
    const res = await axios.get("http://localhost:5217/MyDownload", {
      params: {
        key: "gazo.jpg",
      },
      responseType: "arraybuffer",
    });

    const contentType = res.headers["content-type"];
    const blob = new Blob([res.data], { type: contentType });
    const url = window.URL || window.webkitURL;
    const img = imgRef.current;
    if (img != null) {
      // blobのURLを作成してimgタグに設定
      img.src = url.createObjectURL(blob);
    }
  };

  useEffect(() => {
    downloadImg();
  }, []);

  return (
    <>
      <img ref={imgRef} />
    </>
  );
};

export default Home;

バックエンドの実装例

コントローラはFileオブジェクトを返却します。FileオブジェクトにはResponseStreamとContentTypeを設定しています。
S3へのアクセスはAWSSDKを使用しています。

MyUploadController.cs
using Amazon.S3;
using Amazon.S3.Model;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;

namespace MyUploadApi.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class MyDownloadController : ControllerBase
    {
        public MyDownloadController(){}

        [EnableCors("CorsPolicy")]
        [HttpGet(Name = "MyDownload")]
        public async Task<IActionResult> MyDownload([FromQuery] string key)
        {
            try
            {
                // S3から取得
                var client = new AmazonS3Client();
                var response = await client.GetObjectAsync(new GetObjectRequest
                {
                    BucketName = "somebucketname",
                    Key = key,
                });

                return File(response.ResponseStream, response.Headers.ContentType);
            }
            catch (AmazonS3Exception)
            {
                // バケットやオブジェクトが存在しない
                return NotFound();
            }
            catch (Exception)
            {
                // TODO: エラー原因をログに出すこと
                throw;
            }
        }
    }
}

まとめ

ファイルのダウンロードをするフロントエンド・バックエンドの実装でした。
どなたかの参考になれば幸いです。

ファイルをアップロードしてS3に保存するWebAPI

アップロードするAPIの作り方は下記にまとめています。
https://zenn.dev/junnuj/articles/e024a44c2a752b

Discussion