티스토리, Imgur API로 이미지 업로드 적용

 

1. 참고 사이트

Imgur API로 이미지 업로드하기

 

2. 클라이언트 ID를 발급

위 사이트를 방문하여 시작하기 전에 Imgur 에서 앱을 추가하고 클라이언트 ID를 발급받는다.

 

3. 이벤트 추가

<textarea name="textarea" id="myTextarea" cols="30" rows="10"></textarea>
<label for="upload">업로드</label>
<input type="file" id="upload" hidden/>

 

4. 스크립트 적용

function uploadFile() {
    const textarea = document.getElementById("myTextarea");
    const fileInput = document.getElementById("upload");

    const upload = (file) => {
        if (file && file.size < 5e6) {
            const formData = new FormData();

            formData.append("image", file);
            fetch("https://api.imgur.com/3/image", {
                method: "POST",
                headers: {
                    Authorization: "Client-ID <클라이언트 ID>",
                    Accept: "application/json",
                },
                body: formData,
            })
                .then((response) => response.json())
                .then((response) => {
                    if (response.success) {
                        const { data } = response;
                        textarea.value += `${textarea.value ? "\n" : ""}${
                            data.animated && data.mp4 ? data.mp4 : data.link
                        }`;
                    } else {
                        console.error("업로드 실패");
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        } else {
            console.error("파일 용량 초과");
        }
    };

    const handleDrop = (event) => {
        event.preventDefault();

        const { files } = event.dataTransfer;

        if (files.length) {
            upload(files[0]);
        }
    };

    const handlePaste = (event) => {
        event.preventDefault();

        const { files } = event.clipboardData;

        if (files.length) {
            upload(files[0]);
        }
    };

    const preventDefault = (event) => {
        event.preventDefault();
    };

    if (fileInput) {
        fileInput.addEventListener("change", () => {
            upload(fileInput.files[0]);
        });
    }

    if (textarea) {
        textarea.addEventListener("dragenter", preventDefault);
        textarea.addEventListener("dragleave", preventDefault);
        textarea.addEventListener("dragover", preventDefault);
        textarea.addEventListener("drop", handleDrop);
        textarea.addEventListener("paste", handlePaste);
    }
}

uploadFile();

 

5. 적용 모습

6. 사용방법

1번 클릭, 파일 탐색기가 실행, 원하는 이미지를 선택하면 댓글창에 이미지 경로 자동으로 입력.
2번 클릭, Imgur 업로드 사이트 열림, 원하는 이미지를 업로드하고 "이미지 주소 복사" 댓글창에 붙혀넣기
3번 클릭, youtube 사이트 열림, "동영상 URL 복사" 댓글창에 붙혀넣기.

 

이전글 참고 ^^

티스토리, 댓글에 링크 및 이미지 추가하기