인스타그램 클론 (사진 업로드)

- 사진을 업로드할 수 있는 기능을 추가

 

 

[1] 사진을 업로드할 수 있는 액티비티(여기서는 AddPhotoActivity라고 액티비티명을 정함) 생성

---

[2] [activity_add_photo.xml]

 

- 아래와 같이 사진을 업로드할 수 있는 액티비티를 구성해줌

 

사진 업로드 액티비티

---

[3] build.gradle(Module:app) 파일의 dependencies 에 아래와 같이 코드를 작성해줌

 

 

- 사진을 업로드할 수 있는 스토리지를 추가해주는 작업

---

[4] AddPhotoActivity.kt 코드 작성

 

package com.example.hyealsinstargram.navigation

import android.app.Activity
import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.example.hyealsinstargram.R
import com.google.firebase.storage.FirebaseStorage
import kotlinx.android.synthetic.main.activity_add_photo.*
import java.text.SimpleDateFormat
import java.util.*
import kotlin.math.PI

class AddPhotoActivity : AppCompatActivity() {
    var PICK_IMAGE_FROM_ALBUM = 0 // request code
    var storage: FirebaseStorage? = null
    var photoUri: Uri? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_add_photo)

        // Initiate storage
        storage = FirebaseStorage.getInstance()

        // Open the album
        var photoPickerIntent = Intent(Intent.ACTION_PICK)
        photoPickerIntent.type = "image/*"
        startActivityForResult(photoPickerIntent,PICK_IMAGE_FROM_ALBUM)

        // add image upload event
        addphoto_btn_upload.setOnClickListener {
            contentUpload()
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if(requestCode == PICK_IMAGE_FROM_ALBUM){
            if(resultCode == Activity.RESULT_OK){
                // This is path to the seleted image
                photoUri = data?.data
                addphoto_image.setImageURI(photoUri)
            }else{
                // Exit the addPhotoActivity if you leave the album without selecting it
                finish()
            }
        }
    }
    fun contentUpload(){
        // Make filename
        var timestamp = SimpleDateFormat("yyyyMMdd_HHmmss").format(Date())
        var imageFileName = "IMAGE_" + timestamp + "_.png"

        var storageRef = storage?.reference?.child("images")?.child(imageFileName)

        // File upload
        storageRef?.putFile(photoUri!!)?.addOnSuccessListener {
            Toast.makeText(this, getString(R.string.upload_success),Toast.LENGTH_LONG).show()
        }

    }
}

 

* 코드 설명

 

- storage: FirebaseStorage 타입의 변수

- photoUri: 이미지 uri를 담을 수 있는 변수

---

이 액티비티가 실행되자마자 화면을 오픈해주는 코드

- Intent.ACTION_PICK을 이용하면 선택된 이미지를 가져올 수 있음

- startActivityForResult를 이용해서 선택한 이미지 정보가 onActivityResult에 전달되도록 함

---

선택한 이미지를 받는 부분

- requestCode가 PICK_IMAGE_FROM_ALBUM이고, resultCode가 액티비티가 성공했을 때(=사진을 선택했을 때) 이미지의 경로가 넘어오게됨.

- 이 이미지 경로를 photoUri에 넣어줌

- 선택된 이미지를 addphoto_image에 표시해줌

 

- 실패했을 때 그냥 이 액티비티를 종료하도록 함

---

- 이미지의 이름이 중복 생성되지 않도록 날짜값을 이미지 파일명으로 지정해줌.

 

- var storageRef 에서 첫 번째 child에는 폴더명을 넣어주고, 두 번째 child에는 이미지 파일명을 넣어줌

- putFile에 이미지 파일의 uri를 넣어줘서 사진을 업로드할 수 있음. 

 

- 업로드에 성공했을때 업로드 성공을 알려주는 toast를 만들어줌.

---

- 버튼을 눌렀을 때 사진이 업로드되도록 기능을 추가함

---

[5] MainActivity.kt (사진 경로를 가져올 수 있는 권한을 요청하는 코드를 작성)

 

[MainActivity.kt]

 

- Oncreat 메소드에 아래와 같은 코드를 추가함

 

---

- onNavigationItemSelected 메소드에 아래와 같은 코드를 추가함

 

AddPhotoActivity를 호출할 수 있는 코드

- if식 안에 있는 코드: 외부 스토리지 경로를 가져올 수 있는 권한이 있는지 체크하는 부분

---

[6] AndroidManifest.xml에 아래와 같은 코드 추가 

 

---

[7] firebase에서 스토리지 사용을 허용함

---

프로젝트를 실행시켜서 로그인을 하면 아래와 같이 사진 파일에 대한 접근 권한 허가를 요청하는 창이 나옴

 

권한 허가 요청

---

그리고 아래에 빨간 동그라미로 표시한 아이콘을 누르면 앨범에서 사진을 업로드할 수 있음

 

사진 업로드

---

firebase의 storage에 들어가보면 성공적으로 사진이 업로드 됐음을 확인할 수 있음

 

firebase 사진 업로드 확인