[안드로이드] Firebase Storage 이미지 업로드 part1

이번 시간에는 Firebase를 통해서 이미지를 업로드하는

방법을 알아보겠습니다. 

간단하게 설명하자면 Firebase의 Storage에 이미지를

업로드하고, 이미지가 저장된 주소를 Realtime Database에

저장합니다.

나중에 불러오기 위해서는 Realtime Database의

링크 주소를 불러서 이미지를 가져옵니다. 

먼저 Realtime Database 설정을 해야 하기 때문에 모르시면

아래 링크를 보시고 따라하시면 됩니다. 

2022.03.09 - [안드로이드] - [안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part1

[안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part

---

목차

1. 실행 화면

2. 파이어베이스 스토리지 생성

3. 라이브러리 등록

4. 모델 클래스 만들기

5. 메인 화면 구성 activity_main.xml

6. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 파이어베이스 스토리지 생성

https://console.firebase.google.com/

Storage에 들어가서 스토리지를 하나 만듭니다. 

스토리지 만들고 들어가시면 Rules탭이 있습니다. 

들어가서 allow read, write: if false라고 돼있는 부분을

true로 바꾸셔야 읽고, 쓰기가 가능해집니다. 

 

3. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

implementation 'com.google.firebase:firebase-storage'

 

setting.gradle

repositories 괄호 안에 아래 코드를 넣어주시면 됩니다.

maven { url 'https://jitpack.io' }

 

 

4. 모델 클래스 만들기

클래스명: Model

- 설명 -

 이미지주소를 담을 그릇입니다. 

2021.12.31 - [안드로이드] - [안드로이드 스튜디오] 자바 클래스 생성하는 방법

[안드로이드 스튜디오] 자바 클래스 생성하는 방법

public class Model {

    private String imageUrl;

    Model(){

    }

    public Model(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }
}

 

5. 메인 화면 구성 activity_main.xml

 - 설명 - 

1. 이미지뷰를 클릭하면  파일 매니저가 뜹니다.

2. 업로드버튼을 누르면 이미지를 데이터베이스에 저장합니다. 

3. 저장하는 동안 프로그래스 바가 돌아갑니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:src="@drawable/ic_add_photo" />

    <ProgressBar
        android:id="@+id/progress_View"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/upload_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="15dp"
        android:text="UPLOAD"
        android:textSize="20sp" />

</LinearLayout>

아이콘 res -> drawable

ic_add_photo.xml

0.00MB

 

6. 메인 코드 구현 MainActivity.java

 - 설명 - 

 1. StorageReference를 통해 Storage에 이미지를 저장합니다.

 2. DatabaseReference를 통해 Realtime Database에 이미지 경로를 저장합니다.

 3. getFileExtension()메소드는 파일 타입을 가져오는 기능을 합니다. 

 4. activityResult를 통해 선택한 이미지를 이미지 뷰에 보여줍니다. 

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private ProgressBar progressBar;
    private final DatabaseReference root = FirebaseDatabase.getInstance().getReference("Image");
    private final StorageReference reference = FirebaseStorage.getInstance().getReference();

    private Uri imageUri;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //컴포넌트 객체에 담기
        Button uploadBtn = findViewById(R.id.upload_btn);
        progressBar = findViewById(R.id.progress_View);
        imageView = findViewById(R.id.image_view);

        //프로그래스바 숨기기
        progressBar.setVisibility(View.INVISIBLE);

        //이미지 클릭 이벤트
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent galleryIntent = new Intent();
                galleryIntent.setAction(Intent.ACTION_GET_CONTENT);
                galleryIntent.setType("image/");
                activityResult.launch(galleryIntent);
            }
        });

        //업로드버튼 클릭 이벤트
        uploadBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //선택한 이미지가 있다면
                if (imageUri != null) {

                    uploadToFirebase(imageUri);

                } else {
                    Toast.makeText(MainActivity.this, "사진을 선택해주세요.", Toast.LENGTH_SHORT).show();
                }
            }
        });

    } // onCreate

    //사진 가져오기
    ActivityResultLauncher<Intent> activityResult = 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();

                        imageView.setImageURI(imageUri);
                    }
                }
            });

    //파이어베이스 이미지 업로드
    private void uploadToFirebase(Uri uri) {

        StorageReference fileRef = reference.child(System.currentTimeMillis() + "." + getFileExtension(uri));

        fileRef.putFile(uri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {

                fileRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {

                        //이미지 모델에 담기
                        Model model = new Model(uri.toString());

                        //키로 아이디 생성
                        String modelId = root.push().getKey();

                        //데이터 넣기
                        root.child(modelId).setValue(model);

                        //프로그래스바 숨김
                        progressBar.setVisibility(View.INVISIBLE);

                        Toast.makeText(MainActivity.this, "업로드 성공", Toast.LENGTH_SHORT).show();

                        imageView.setImageResource(R.drawable.ic_add_photo);
                    }
                });

            }
        }).addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onProgress(@NonNull UploadTask.TaskSnapshot snapshot) {

                //프로그래스바 보여주기
                progressBar.setVisibility(View.VISIBLE);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {

                //프로그래스바 숨김
                progressBar.setVisibility(View.INVISIBLE);
                Toast.makeText(MainActivity.this, "업로드 실패", Toast.LENGTH_SHORT).show();
            }
        });
    }

    //파일타입 가져오기
    private String getFileExtension(Uri uri) {

        ContentResolver cr = getContentResolver();
        MimeTypeMap mime = MimeTypeMap.getSingleton();

        return mime.getExtensionFromMimeType(cr.getType(uri));
    }
}

2022.03.12 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 등록하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 등록하는 방법

2022.03.13 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 리스트 보는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 리스트 보는 방법

2022.03.14 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 수정하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 수정하는 방법

2022.03.15 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 삭제하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 삭제하는 방법