[Asp.net core] Firebase Storage에 사진 업로드&다운로드

사진은 안타깝게도 Firestore에 올릴 수 없습니다. (사진을 -> 바이트 배열 -> json으로 바꾸고 json 문자열을 그대로 올리면 될 것 같다는 생각을 해봤으나.. 시도는 안해봐서 모릅니다)

 

그래서 사진을 스토리지에 올려보기로 했습니다. 

이번 역시 코드는 간단한데.. 이 코드 쓰자고 하루정도는 날린 듯...ㅠ

 

스토리지를 쓰기 위해 저는 일단 아래의 패키지를 설치했습니다

 

사진 업로드하기

<input type="file" id="Image" name="Image" accept="image/*"/>

input을 이용해 파일을 받았습니다. 모든 이미지 형식을 허용하기 위해 accept="image/*"를 사용했습니다. 만일 'jpg나 png만 받고 싶다' 라고 하신다면

<input type="file" id="Image" name="Image" accept=".jpg, .png"/>

와 같이 확장자와 콤마(,)로 필터를 추가해줄 수 있습니다.

public async Task<string> UploadImage(IFormFile file) {
    var credential = GoogleCredential.GetApplicationDefault();
    var storage = StorageClient.Create(credential);

    string fileName = Guid.NewGuid().ToString();

    string path = "image/" + fileName;

    using(var stream = new MemoryStream()) {
        file.CopyTo(stream);
        var uploadObject = await storage.UploadObjectAsync(BucketName, path, null, stream);
    }

    return path;
}

input으로 받은 파일을 IFormFile 형태로 넘겨줍니다. 

fileName을 랜덤으로 하기 위해서 Guid를 썼습니다. 파일 이름을 그대로 넘겨도 되지만, 사진은 사진끼리 따로 폴더로 저장하고 싶어서 {폴더 이름}/{파일 이름}의 형태로 만들었습니다. 

stream은 챗gpt가 memorystream으로 알려줘서... 써봤는데 일단 작동하네요. UploadObjectAsync 메서드는 버킷 이름, 저장할 path, contentType, stream을 매개변수로 받는데, 

contentType은 그냥 몰라서 null을 집어넣었습니다. 

BucketName은 콘솔 창의 Storage창의 아래 사진과 같이 XXXX.appspot.com 형식의 이름이다. 

path는 나중에 다운받을 때 불러올 이름으로 쓰이므로 어딘가에(나는 firestore에) 고이 모셔놓는다.

bucket이름. 앞의 gs://는 버킷 이름에 들어가지 않도록 한다.

이렇게 잘 올라온다

 

 

올려봤다면 다운받아 페이지 상에서 보여줄 수 있어야 한다. 

 

다운받는 코드는 이렇게 작성했다.

public async Task<string> GetImage(string fileName) {
    var credential = GoogleCredential.GetApplicationDefault();
    var storage = StorageClient.Create(credential);

    MemoryStream stream = new MemoryStream();

    await storage.DownloadObjectAsync(BucketName, fileName, stream);
    byte[] bytes = stream.ToArray();
    string imageString = Convert.ToBase64String(bytes);

    return $"data:image/jpg;base64,{imageString}";
}

fileName은 아까 위해 업로드 하는 코드의 반환값이다. 이 파일 이름으로 파일을 다운받고, 바이트 -> base64로 변환 시킨다. 그 후 사진과 같이 리턴 시킨다. 이 리턴 값은 <img/>의 src 값에 넣어줄 예정이므로 ViewBag이건 ViewData건 Veiw로 넘겨준다. 

사진이 잘 나오는 것을 볼 수 있다.