[kotlin] 갤러리에서 사진 가져와서 multipart로 서버 통신하기

갤러리에서 사진을 가져와서 프로필 사진을 다시 서버로 보내기!

며칠동안 수많은 구글링과 디버깅 끝에 성공했다.

 

 

Postman API 명세서

헤더로 accesstoken을 받고, Body 값으로 File을 넣어줘야하는 API이다.

 

 

---

MyPageService.kt

 

interface MyPageService {
    @Multipart
    @POST("user/upload")
    fun postProfile(
        @Header("accesstoken") token: String,
        @Part file: MultipartBody.Part
    ): Call<ResponseMyPageProfile>
}

@Multipart 어노테이션을 꼭 붙여줘야한다. 

 

Multipart란?

Multipart는 HTTP를 통해 File을 Server로 전송하기 위해 사용되는 Content-type 이다. HTTP 프로토콜은 크게 Header와 Body로 구분이 되고 데이터는 Body에 들어가서 전송이 되는데, Body에 들어가는 데이터 타입을 명시해주는게 Content-type이다. 이때 타입으로 지정해주는 형태를 MIME 타입으로 지정해줄 수 있는데, Multipart(=multipart/form-data)는 MIME 타입 중 하나이다.

Multipart는 말 그대로 메시지(=파일)를 여러 파트로 나누어서 메세지를 전달하는 방식이다.

 

 

viewModel에서 코루틴을 사용하기 위해서 위의 코드 중 fun을 suspend fun으로 고쳐줬더니

<Registering an InstanceCreator with Gson for this type may fix this problem>

이런식의 오류가 떴고 해결방법으로 suspend를 지우라는 답변 때문에 멀티파트는 suspend 함수로 못 사용하나?라는 생각을 했지만

suspend fun을 쓰려면 리턴 타입도 Call<T> 에서 T로 같이 바꿔줘야했었던 실수였다.

 

 

즉 다음과 같다.

 

기본적으로 Call<ResponseMyPageProfile>를 사용했던 것과 달리 아래와 같이 CoroutineScope 에서 실행되는 suspend 함수로 지정하면 Retrofit Package를 이용하는 개발자는 return type에 Retrofit2에서 제공하는 Call<T>를 사용하지 않고 사용한다.

@Multipart
@POST("user/upload")
suspend fun postProfile(
    @Header("accesstoken") token: String,
    @Part file: MultipartBody.Part
): ResponseMyPageProfile

 

 

---

 

AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

저장소 관련 권한을 추가해준다.

 

 

---

MyPageViewModel.kt

fun requestMypageProfile(body: MultipartBody.Part) {
    RetrofitBuilder.mypageService.postProfile(
        SeeMeetSharedPreference.getToken(),
        body
    ).enqueue(object : Callback<ResponseMyPageProfile> {
        override fun onFailure(call: Call<ResponseMyPageProfile>, t: Throwable) {
            _profileStatus.value = 0
        }

        override fun onResponse(
            call: Call<ResponseMyPageProfile>,
            response: Response<ResponseMyPageProfile>
        ) {
            _profileStatus.value = 1
        }
    })
}

 

처음에 fun postProfile()로 했을 경우 이렇게 코루틴을 사용하지 않고 서버통신을 했다.

 

viewModelScope를 사용하려면 아래와 같이 코드를 바꿀 수 있다.

fun requestMypageProfile(body: MultipartBody.Part) = viewModelScope.launch(exceptionHandler) {
    RetrofitBuilder.mypageService.postProfile(
        SeeMeetSharedPreference.getToken(),
        body
    )
    _profileStatus.value = true
}

 

viewModelScope.launch(exceptionHandler)에서 exceptionHandler는 코루틴 예외처리 핸들러로 각각의 에러 상황을 처리할 수 있다. 

abstract class BaseViewModel(application: Application) : AndroidViewModel(application) {

    // 예외 난 거 저장하는 변수
    private val _fetchState = MutableLiveData<Pair<Throwable, FetchState>>()
    val fetchState : LiveData<Pair<Throwable, FetchState>>
        get() = _fetchState

    //코루틴 예외처리 핸들러
    protected val exceptionHandler = CoroutineExceptionHandler{ _, throwable ->
        throwable.printStackTrace()
        //각각의 에러 상황에서 값 설정. 400~500대 에러는 HttpException으로 처리 될 것.
        when(throwable){
            is UnknownHostException -> _fetchState.postValue(Pair(throwable, FetchState.BAD_INTERNET))
            is HttpException -> _fetchState.postValue(Pair(throwable, FetchState.PARSE_ERROR))
            is SocketException -> _fetchState.postValue(Pair(throwable, FetchState.WRONG_CONNECTION))
            else -> _fetchState.postValue(Pair(throwable, FetchState.FAIL))
        }
    }

    enum class FetchState {
        BAD_INTERNET, PARSE_ERROR, WRONG_CONNECTION, FAIL
    }

}

 

 

---

MyPageActivity.kt

viewModel.profileStatus.observe(this) {
    if (it) {
        CustomToast.createToast(this, "프로필 사진이 변경되었습니다")!!.show()
        SeeMeetSharedPreference.setUserProfile(currentImageUrl)
        binding.btnProfileEditOrSave.text = "프로필 사진 편집"
        binding.btnSelectImage.visibility = View.INVISIBLE
        binding.camera.visibility = View.INVISIBLE
        profile_position = DEFAULT
    }
}

profileStatus로 통신에 실패했는지 성공했는지를 받아온다.

 

//프로필 사진 변경하는 함수
private fun changeProfile() {
    // 사진이 똑같은 경우 서버 통신 안함
    if (SeeMeetSharedPreference.getUserProfile() == currentImageUrl) {
        binding.btnProfileEditOrSave.text = "프로필 사진 편집"
        binding.btnSelectImage.visibility = View.INVISIBLE
        binding.camera.visibility = View.INVISIBLE
        profile_position = DEFAULT
    }
    // 사진이 변경된 경우 서버 통신
    else {
        val url = currentImageUrl?.toUri()

        // File 객체를 만들어준다.
        val file = File(getPath(this, url!!))
        
        // File 객체를 RequestBody 객체로 변환한다.
        val requestFile =
            RequestBody.create("multipart/form-data".toMediaTypeOrNull(), file)
            
        // MultipartBody.Part로 바꿔준다.
        val body = MultipartBody.Part.createFormData("file", file.name, requestFile)
        
        // body는 MultipartBody.Part, 서버통신
        viewModel.requestMypageProfile(body = body)
    }
}

// 절대 경로 받아오기
fun getPath(context: Context, uri: Uri): String? {
    val isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT

    // DocumentProvider
    if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
        // ExternalStorageProvider
        if (isExternalStorageDocument(uri)) {
            val docId = DocumentsContract.getDocumentId(uri)
            val split = docId.split(":").toTypedArray()
            val type = split[0]
            if ("primary".equals(type, ignoreCase = true)) {
                return Environment.getExternalStorageDirectory().toString() + "/" + split[1]
            }
        } else if (isDownloadsDocument(uri)) {
            val id = DocumentsContract.getDocumentId(uri)
            val contentUri = ContentUris.withAppendedId(
                Uri.parse("content://downloads/public_downloads"), java.lang.Long.valueOf(id)
            )
            return getDataColumn(context, contentUri, null, null)
        } else if (isMediaDocument(uri)) {
            val docId = DocumentsContract.getDocumentId(uri)
            val split = docId.split(":").toTypedArray()
            val type = split[0]
            var contentUri: Uri? = null
            if ("image" == type) {
                contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI
            } else if ("video" == type) {
                contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI
            } else if ("audio" == type) {
                contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI
            }
            val selection = "_id=?"
            val selectionArgs = arrayOf(
                split[1]
            )
            return getDataColumn(context, contentUri, selection, selectionArgs)
        }
    } else if ("content".equals(uri.scheme, ignoreCase = true)) {

        // Return the remote address
        return if (isGooglePhotosUri(uri)) uri.lastPathSegment else getDataColumn(
            context,
            uri,
            null,
            null
        )
    } else if ("file".equals(uri.scheme, ignoreCase = true)) {
        return uri.path
    }
    return null
}

/**
 * Get the value of the data column for this Uri. This is useful for
 * MediaStore Uris, and other file-based ContentProviders.
 *
 * @param context The context.
 * @param uri The Uri to query.
 * @param selection (Optional) Filter used in the query.
 * @param selectionArgs (Optional) Selection arguments used in the query.
 * @return The value of the _data column, which is typically a file path.
 */
fun getDataColumn(
    context: Context, uri: Uri?, selection: String?,
    selectionArgs: Array<String>?
): String? {
    var cursor: Cursor? = null
    val column = "_data"
    val projection = arrayOf(
        column
    )
    try {
        cursor = context.contentResolver.query(
            uri!!, projection, selection, selectionArgs,
            null
        )
        if (cursor != null && cursor.moveToFirst()) {
            val index: Int = cursor.getColumnIndexOrThrow(column)
            return cursor.getString(index)
        }
    } finally {
        if (cursor != null) cursor.close()
    }
    return null
}

/**
 * @param uri The Uri to check.
 * @return Whether the Uri authority is ExternalStorageProvider.
 */
fun isExternalStorageDocument(uri: Uri): Boolean {
    return "com.android.externalstorage.documents" == uri.authority
}

/**
 * @param uri The Uri to check.
 * @return Whether the Uri authority is DownloadsProvider.
 */
fun isDownloadsDocument(uri: Uri): Boolean {
    return "com.android.providers.downloads.documents" == uri.authority
}

/**
 * @param uri The Uri to check.
 * @return Whether the Uri authority is MediaProvider.
 */
fun isMediaDocument(uri: Uri): Boolean {
    return "com.android.providers.media.documents" == uri.authority
}

/**
 * @param uri The Uri to check.
 * @return Whether the Uri authority is Google Photos.
 */
fun isGooglePhotosUri(uri: Uri): Boolean {
    return "com.google.android.apps.photos.content" == uri.authority
}

// 갤러리 들어가는 함수
private val OPEN_GALLERY = 1
private fun openGallery() {
    /* 권한 받기 */
    if (ContextCompat.checkSelfPermission(
            this,
            Manifest.permission.READ_EXTERNAL_STORAGE
        ) == PackageManager.PERMISSION_GRANTED
    ) {
        val intent = Intent(Intent.ACTION_GET_CONTENT)
        intent.setData(android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        intent.setType("image/*")
        startActivityForResult(intent, OPEN_GALLERY)
    } else {
        val permissions: Array<String> = arrayOf(
            Manifest.permission.READ_EXTERNAL_STORAGE
        )

        ActivityCompat.requestPermissions(this, permissions, 0)
    }
}

// 권한 관련 함수
override fun onRequestPermissionsResult(
    requestCode: Int,
    permissions: Array<out String>,
    grantResults: IntArray
) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults)

    when (requestCode) {
        0 -> {
            if (grantResults.isNotEmpty()) {
                var isAllGranted = true
                // 요청한 권한 허용/거부 상태 한번에 체크
                for (grant in grantResults) {
                    if (grant != PackageManager.PERMISSION_GRANTED) {
                        isAllGranted = false
                        break;
                    }
                }
                // 요청한 권한을 모두 허용했음.
                if (isAllGranted) {
                    // 다음 step으로 ~
                    val intent = Intent(Intent.ACTION_GET_CONTENT)
                    intent.setType("image/*")
                    startActivityForResult(intent, OPEN_GALLERY)
                }
                // 허용하지 않은 권한이 있음. 필수권한/선택권한 여부에 따라서 별도 처리를 해주어야 함.
                else {
                    if (!ActivityCompat.shouldShowRequestPermissionRationale(
                            this,
                            Manifest.permission.READ_EXTERNAL_STORAGE
                        )
                    ) {
                        // 다시 묻지 않기 체크하면서 권한 거부 되었음.
                        CustomToast.createToast(this@MyPageActivity, "스토리지에 접근 권한을 허가해주세요")
                            ?.show()
                    } else {
                        // 접근 권한 거부하였음.
                        CustomToast.createToast(this@MyPageActivity, "스토리지에 접근 권한을 허가해주세요")
                            ?.show()
                    }
                }
            }
        }
    }
}

@Override
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (resultCode == Activity.RESULT_OK) {
        if (requestCode == OPEN_GALLERY) {
            // 갤러리에서 이미지 가져온 경우
            currentImageUrl = data?.data.toString()
            try {
                Glide.with(this).load(data?.data).circleCrop()
                    .into(binding.ivMypageProfile)
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

 

ViewModel에서 코루틴을 사용할 때는 androidx-lifecycle에서 제공하는 viewModelScope를 많이 사용한다.

viewModelScope는 ViewModel의 extension property로 ViewModel이 destroy 될 때 자식 코루틴들을 자동으로 취소하는 기능을 제공한다.

 

Lifecycle-aware components define the following built-in scopes that you can use in your app.

A ViewModelScope is defined for each ViewModel in your app. Any coroutine launched in this scope is automatically canceled if the ViewModel is cleared. Coroutines are useful here for when you have work that needs to be done only if the ViewModel is active. For example, if you are computing some data for a layout, you should scope the work to the ViewModel so that if the ViewModel is cleared, the work is canceled automatically to avoid consuming resources.

You can access the CoroutineScope of a ViewModel through the viewModelScope property of the ViewModel, as shown in the following example:

class MyViewModel: ViewModel() {
    init {
        viewModelScope.launch {
            // Coroutine that will be canceled when the ViewModel is cleared.
        }
    }
}

 

 

 

---

Reference)

Retrofit 으로 파일 업로드 하기 | Jungwoon Blog

[안드로이드] 서버에 form data 로 데이터 전송하기.(MultiPart)

[Android] viewModelScope.launch() 간단하게 바꿔보기

수명 주기 인식 구성요소와 함께 Kotlin 코루틴 사용  |  Android 개발자  |  Android Developers

안드로이드 개발 (30) viewModelScope

ViewModel에서 Coroutine을 이용하는 방법 #ViewModel Scope