시작하기 전에

Imgur에서 앱을 추가하시고 클라이언트 ID를 발급받으셔야 합니다.
회원가입을 진행하셨으면 클라이언트 추가 페이지로 가주세요.

클라이언트 추가

Authorization callback URL은 API 키를 발급받을 때 쓰는 주소입니다.
그냥 운영하시는 웹사이트의 주소를 써넣으시면 됩니다만, 그냥 네이버 주소 같은 것 치셔도 작동은 합니다.

클라이언트 ID

성공적으로 클라이언트 추가를 마치시면 위 페이지가 나옵니다.
Client ID: 아래에 적힌 문자열을 복사해둬 주세요.
혹시 Client ID를 잊으시거나 클라이언트 설정을 변경하시려면 Applications 설정 페이지로 가시면 됩니다.

파일 업로드

<input type="file" name="image" id="upload">

일단 input 엘리먼트를 하나 생성해주세요.
앞으로 이 input의 변화를 감지해 파일을 업로드할 겁니다.

function uploadFile() {
    const fileInput = document.getElementById("upload");
    const upload = (file=> {
        if (file && file.size < 5000000) {
            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",
                },
                bodyformData,
            })
                .then((response=> response.json())
                .then((response=> {
                    console.log(response);
                    // do Something
                });
        } else {
            console.error("파일 용량 초과");
        }
    };

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

uploadFile();

<클라이언트 ID>를 본인의 클라이언트 ID로 변경해주세요.

이제 이미지를 선택해 Input의 파일이 변경될 때마다 Imgur에 업로드합니다.
console.log(response)는 응답이 어떤 형태로 오는지 참고하시라고 추가해뒀으니, 해당 코드와 아래 줄의 do Something을 수정하시면 됩니다.

{
    "data": {
        "id""vZhkDah",
        "title"null,
        "description"null,
        "datetime"1597929085,
        "type""image/jpeg",
        "animated"false,
        "width"256,
        "height"256,
        "size"18088,
        "views"0,
        "bandwidth"0,
        "vote"null,
        "favorite"false,
        "nsfw"null,
        "section"null,
        "account_url"null,
        "account_id"0,
        "is_ad"false,
        "in_most_viral"false,
        "has_sound"false,
        "tags": [],
        "ad_type"0,
        "ad_url""",
        "edited""0",
        "in_gallery"false,
        "deletehash""u92F6eMKNenMMKg",
        "name""",
        "link""https://i.imgur.com/vZhkDah.jpg"
    },
    "success"true,
    "status"200
}

응답 예시입니다.

각종 이벤트 추가

매번 Input을 클릭해 파일을 추가하는 건 번거로우니, 드래그 & 드랍이나 클립보드 복사 등의 이벤트를 추가해주시면 훨씬 편하게 이미지 업로드가 가능합니다.

아래에선 예시로 textarea를 하나 추가하고, 그 textarea에 각종 이벤트를 추가해서, 업로드가 성공적으로 완료되면 textarea에 이미지 링크를 추가하는 기능을 구현해보겠습니다.

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

html 구조입니다.
저는 개인적으로 input은 예쁘게 꾸미기 힘들어서 숨겨버리고 label을 꾸미는 방법을 선호합니다.

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",
                },
                bodyformData,
            })
                .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();

gif 이미지를 업로드하면 자동으로 mp4로 변환해주니, 움짤을 업로드하면 비디오 링크를 첨부하도록 해뒀습니다.


성공적으로 Imgur에 이미지 업로드를 마쳤습니다!
5MB가 넘는 파일은 첨부가 안 되고, Imgur 자체가 느리단 단점은 있지만, 간단한 서비스엔 요긴하게 써먹을 데가 많습니다.

profile

이메일은 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
    카카오페이 qr코드 모바일이시라면 클릭