[Rest API] Cloudinary에서 제공하는 API를 이용해서 이미지 업로드하는 법

유저의 회원 정보를 받는 작업들을 하며 이미지 데이터 처리에 대한 궁금증이 있었다. 찾아보니 클라우디를 이용해서 이미지를 서버에 저장하지 않고 storage에 따로 저장할 수 있었고 특히 이 서비스가 미디어를 디바이스와 채널에 맞게 최적화할 수 있다는 장점이 있어 많이 쓰이고 있다는 것을 알게되었다. 

 

Cloudinary 

- 사용자 이미지 업로드, 저장, 관리 기능을 제공해주는 SaaS 업체 

- 사진의 Resizing & Transformation 기능 지원

- Filtering 적용 기능 지원 

 

https://cloudinary.com/console/c-6cfbb65d24dd26f703140f3aaed701/settings/upload?/ Unsigned 모드로 되어있는 preset을 만들어 사용할 것이다.

 

공식 문서를 살펴보면 사용법은 아래와 같다. 

 

If you want to implement your own upload functionality, Cloudinary provides a secure and comprehensive API for easily uploading assets from server-side code, directly from the browser or from a mobile application.

You can upload using the REST API directly within your custom code or take advantage of Cloudinary's SDKs, which wrap the REST API and simplify the implementation.

 

= 사용 방법은 두 가지가 있다. 

 

1) DIRECT CALL TO THE REST API  사용 

2) SDK 사용 : 다양한 기능들이 들어있는 키트같은 것

 

단지 회원이 프로필 사진을 올릴 수 있게 하고 싶었기 때문에, SDK가 무거운 느낌이 있어서 여기서 제공하는 Rest API에 POST를 요청하여 기능을 구현할 것이다.

 

using the REST API directly within your custom code 

https://api.cloudinary.com/v1_1/클라우드 이름/리소스 타입(image, raw, video, auto 중에 쓰면 된다.)/upload

 

post 요청은 보통 url과 함께 바디부분을 리퀘스트로 전송하게 된다. 바디 안에 제공해야 되는 데이터는 두 가지로 나뉘는데, authenticate request이면 file, api_key, timestamp, signature를 제공하면 되고 unauthenticated requests라면 file(사용자가 선택한 것), upload_preset(설정 페이지에서 만든 프리셋)을 명시하면 된다. 

 

const url = "https://api.cloudinary.com/v1_1/demo/image/upload"; // url은 api페이지에서 제공해준 것을 사용
const form = document.querySelector("form"); 

form.addEventListener("submit", (e) => { // form에서 submit이 되면,
  e.preventDefault();

  const files = document.querySelector("[type=file]").files;
  const formData = new FormData(); // formdata라는 오브젝트를 이용해서 post 요청으로 보낼 바디부분을 생성

  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    formData.append("file", file); // formdata의 구성 요소 1 : file 
    formData.append("upload_preset", "docs_upload_example_us_preset"); // formdata의 구성 요소 2 : upload_preset 

    fetch(url, { // fetch라는 네트워크 api를 이용해서 post method를 이용해서 보냅니다. 
      method: "POST",
      body: formData
    })
      .then((response) => {
        return response.text();
      })
      .then((data) => {
        document.getElementById("data").innerHTML += data;
      });
  }
});

// https://codesandbox.io/s/cld-form-unsigned-upload-0fvy8?from-embed=&file=/src/index.html

 

 

HTTP request를 보내면 요청에 대한 response가 오는데

200이면 성공

400이면 파라미터를 잘못 썼거나 잘못 요청된 것

401이면 권한이 X

403도 권한이 X

404는 원하는 정보를 찾을 수 없을 때 나타나는 에러 

420이면 런타임 오류?

500이면 서버 오류

 

• 200 - OK. Successful.
• 400 - Bad request. Invalid request parameters.
• 401 - Authorization required.
• 403 - Not allowed.
• 404 - Not found.
• 420 - Rate limited.
• 500 - Internal error. Contact support.

 

 

Ref.

- cloudinary 사이트 : https://cloudinary.com/

- docs : https://cloudinary.com/documentation/image_video_and_file_upload