[안드로이드] 파이어베이스 스토리지에 사진 올리기

https://github.com/lnjky/fashion_people

GitHub - lnjky/fashion_people: 패션 추천 어플

코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.

---

우선 사진을 올리기 위해 갤러리에 접근을 해야한다.

이는 아래의 링크를 통해 확인하면 된다.

https://loasd.tistory.com/76

[안드로이드] 갤러리에서 이미지 가져오기

---

어플리케이션을 통해 사진을 업로드하고 이를 출력하기 위해서 파이어스토리지를 사용해야 한다.

파이어스토리지 연결은 파이어베이스, 파이어스토어 연결과 같으므로 아래의 링크를 통해 확인하자.

https://loasd.tistory.com/40

[안드로이드] 파이어베이스 - 안드로이드 스튜디오 연결

 

인스턴스 생성을 이렇게 하면  된다.

    private FirebaseStorage mStorage = FirebaseStorage.getInstance();

우선 이 글에서는 사진을 올리는 방법에 대해서만 작성을 하고 다른 글을 통해 피드를 만드는 방법에 대해 작성하도록 하겠다.

 

우선 상단의 갤러리 접근 코드는 다음과 같다.

        iv_upload_image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent();
                intent.setType("image/*");
                intent.setAction(Intent.ACTION_GET_CONTENT);
                startActivityResult.launch(intent);
            }
        });
        
        
// OnCreate 밖        
    ActivityResultLauncher<Intent> startActivityResult = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(), new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
            if ( result.getResultCode() == RESULT_OK && result.getData() != null) {
                imageUri = result.getData().getData();
                try {
                    Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), imageUri);
                    iv_upload_image.setImageBitmap(bitmap);
                }
                catch (FileNotFoundException e) {
                    e.printStackTrace();
                }
                catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    });

iv_upload_image를 클릭하면 갤러리로 이동된다. 그리고 거기서 사진을 정하면 액티비티에 고른 사진이 뜬다.

실제로 만든 어플에서 일부분을 캡처해서 사진을 보면 이렇다.

이렇게 사진이 뜨고 그 후에 저장을 누르면 스토리지에 사진이 업로드되야 한다.

 

스토리지 사진 업로드 코드는 다음과 같다.

        btn_upload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //사진을 스토리지에 올리는 코드
                // 이미지 파일 경로 지정 (/item/사용자 documentId / IAMGE_DOCUMENTID_UPLOADID_.png)
                storageRef = mStorage.getReference().child("image").child(documentId).child(imageFileName);
                uploadTask = storageRef.putFile(imageUri); // 업로드할 파일과 업로드할 위치 설정
                //파일 업로드 시작
                uploadTask.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        //업로드 성공 시 이미지를 올린 url 가져오기
                        Log.d(TAG, "onSuccess: upload");
                        downloadUri(); // 업로드 성공 시 업로드한 파일 Uri 다운받기
                        storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                            @Override
                            public void onSuccess(Uri uri) {
                                url = uri.toString();
                                Log.d("uri : ", uri.toString());
                                finish();
                            }
                        }).addOnFailureListener(new OnFailureListener() {
                            @Override
                            public void onFailure(@NonNull Exception e) {

                            }
                        });
                    }
                }).addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                      //업로드 실패 시 동작
                        Log.d(TAG, "onFailure: upload");
                    }
                });

            }
        });

실제로 작성한 코드는 아니고 파이어스토리지에 올리는 코드만 작성해주었다.

uploadTask = storageRef.putFile(imageUri); // 업로드할 파일과 업로드할 위치 설정

putfile()에 원하는 이미지파일을 넣어주면 된다. 나는 위의 갤러리에서 가져온 이미지를 imageUri에 저장해주었기 때문에 이렇게 작성하였다.

만약 이미지를 저장한 변수의 이름이 IMAGEFILE이라면 

uploadTask = storageRef.putFile(IMAGEFILE); // 업로드할 파일과 업로드할 위치 설정

이렇게 작성해주면 된다.

 

여기서 storageRef는 저장 경로를 정해준건데 이어서 쓰면 너무 길게되어 이렇게 작성하였다.

storageRef = mStorage.getReference().child("image").child(documentId).child(imageFileName);

 

그리고 이전의 샘플코드들과 같이 onSuccess와 onFailure에는 각각 업로드에 성공했을 때, 실패했을 때의 동작들을 작성해주면 된다.

나는 대부분 onFailure에는 토스트메시지를 작성해주거나 아예 작성을 안했던것 같다.

 

코드를 입력하고 실행시킨 후 갤러리에서 사진을 갖고와서 저장버튼을 클릭하면 이렇게 파이어스토리지에 저장이 된다.

사진의 이름을 보면 조금 이상한 부분이 있다.

image - "사용자 documentID"로 사진을 저장하게 했는데 중간에 null이 뜬 이유는 코드작성에 실수가 생겨 null로 저장되었다.

storageRef = mStorage.getReference().child("image").child(documentId).child(imageFileName);

여기서 child(documentId)부분을 올바르게 수정해주면 된다.

(글을 작성할때까지 몰랐다)

 

또한 사진의 정보를 파이어스토어에 올리거나 사용하기 위해서 문자열 url에 저장해주었다.

url = uri.toString();

 

파이어베이스의 문서 스토리지에 올라와 있는 샘플코드는 다음과 같다.

Uri file = Uri.fromFile(new File("path/to/images/rivers.jpg"));
StorageReference riversRef = storageRef.child("images/"+file.getLastPathSegment());
uploadTask = riversRef.putFile(file);

// Register observers to listen for when the download is done or if it fails
uploadTask.addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle unsuccessful uploads
    }
}).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
    @Override
    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
        // taskSnapshot.getMetadata() contains file metadata such as size, content-type, etc.
        // ...
    }
});

putfile()에 원하는 이미지파일을 넣어주면 된다.

---

이 내용은 파이어베이스의 문서에도 등록되어 있다.

아래의 링크를 통해 확인 가능하다.

https://firebase.google.com/docs/storage/android/upload-files?hl=ko 

Android에서 Cloud Storage로 파일 업로드  |  Firebase용 Cloud Storage