[티스토리] 파일 업로드 구현하기

https://www.tistory.com/oauth/authorize?client_id={client-id}&redirect_uri={redirect-uri}&response_type=token

<div>
  <textarea name="[##_rp_input_comment_##]" id="commentTextarea" placeholder="댓글을 입력해주세요."></textarea>
</div>
<div class="attach-wrapper">
  <label for="fileUpload" class="attach-btn">업로드</label>
  <input type="file" name="uploadedfile" id="fileUpload" style="display:none">
</div>

document.getElementById("fileUpload") && document.getElementById("fileUpload").addEventListener("change", (e) => {
    e.preventDefault();
 
    const input = document.getElementById("fileUpload");
    const data = new FormData();
    data.append("uploadedfile", input.files[0]);
 
    fetch(
        "https://www.tistory.com/apis/post/attach?access_token={access-token}&blogName={blog-name}&output=json",
        {
            method: "POST",
            body: data,
        }
    )
        .then((response) => {
            return response.json();
        })
        .then((response) => {
            const { tistory } = response;
 
            if (tistory.status === "200") {
                const { url } = tistory;
                const fileId = url.slice(
                    url.lastIndexOf("/") + 1,
                    url.length - 4
                );
                const newUrl = `https://t1.daumcdn.net/cfile/tistory/${fileId}?original`;
                // https 주소로 이미지 주소 변경
 
                const commentTextarea = document.getElementById(
                    "commentTextarea"
                ); // 본인 상황에 맞게 수정
 
                commentTextarea.value = `${
                    commentTextarea.value === ""
                        ? newUrl
                        : `${commentTextarea.value}\n${newUrl}`
                }`;
            } else {
                console.error(`오류 : ${tistory.status}`);
            }
            // 댓글 입력란에 쓴 내용이 없으면 입력란의 내용을 이미지 주소로 수정, 쓴 내용이 있으면 엔터 한 번 후 이미지 주소 입력
        });
});