파일 첨부
파일 첨부는 메시지 보내기와 같은 API를 사용합니다. 이 챕터에서 text 메시지와의 차이점과 구현 방법을 알아보겠습니다.
STEP 1
파일을 선택할 수 있는 File input를 준비합니다. 파일을 선택하면 onChangeFile() 함수를 호출하게 됩니다.
<form>
<input type="file" name="file" onchange="onChangeFile(this)" />
</form>
STEP 2
파일 객체로 URL호출하기.
onchange 이벤트가 일어나면 지정된 url에 file 객체가 전송됩니다. 'content-type'을 'multipart/form-data'로 설정하여야 하나 fetch()에선 설정하지 않아도 됩니다.
ajax, axios 사용시엔 헤더에 'content-type': 'multipart/form-data'를 지정해 주세요.
function onChangeFile(file) {
const url = "https://{API_HOST}/v1/group/channels/{channel_id}/messages";
fetch(url, {
method: "POST",
headers: {
"APP_ID": app_id,
"APP_API_KEY": app_key
},
body: {
type: "file",
user_id: "user_1",
file
}
})
.then((response) => response.json())
.then((data) => console.log(data));
}
STEP 3
응답
파일 업로드 후 응답으로 지금 생성된 다음과 같은 json 오브젝트가 반환됩니다. 파일 전송도 메시지 전송과 마찬가지로
메시지 보내기의 메시지 받기 챕터의 경우와 마찬가지로
send_message 이벤트 핸들러를 통해 응답이 옵니다.
Reponse
{
"user": {
"user_id": "user_1",
"name": "user_1",
"profile_url": "user_1.png",
"created_at": 1660024377478,
"updated_at": 1660115878576
},
"type": "file",
"file": {
"type": "image/jpeg",
"name": "33775c99e3bfd189971717537b559c4d.jpeg",
"url": "https://...",
"size": 37545
},
"created_at": 1660195205068,
"updated_at": 1660195205068,
"message_id": 16,
"channel_id": "channel_1"
}