cloudinary에서 CldUploadWidget 없이 이미지 저장하기

개요

supabase의 storage대신 cloudinary라는 라이브러리를 사용하기로 했다. 이유는 무료이기 때문이다. cloudinary에서 제공되는 CldUploadWidget으로 사진, 동영상 등을 쉽게 업로드 할 수 있지만, 만들고 있는 사이트에는 어울리는 것 같지 않아서 기본 업로드 방식을 사용하되 cloundinary에 이미지만 저장 하기로 했다. supabase를 사용하지 않으니까 생각보다 빈자리가 컸다. 한번 사용 해보자.

 

 

설치

npm install next-cloudinary

 

 

env 설정하기

cloundinary를 사용하기 위해선 먼저 Cloud name이 필요하고, CldUploadWidget Upload Preset이 필요하다.

먼저 cloudinary Docs에서는 이렇게 설명되어 있다.

 

그러면 Cloud Name과 Upload Preset은 어디에 있는 걸까?

 

 

cloud name

cloudinary 로그인시 좌측 상단에서 바로 확인이 가능하다.

우리는 .env파일에 아래의 cloud Name을 사용해 주면 된다.

 

 

upload preset

CldUploadWidget 위젯을 사용하기 위해선 아래 코드와 같이 upload preset이라는 값이 필요한데

이것 또한 우리는 환경변수에 넣어줄거다.

import { CldUploadWidget } from 'next-cloudinary';
 
<CldUploadWidget uploadPreset="<Your Upload Preset>">
  {({ open }) => {
    return (
      <button onClick={() => open()}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

 

 

1. 왼쪽 하단 설정 클릭

 

2.설정 클릭시 나오는 아래 화면에서 Upload 클릭

 

3. Add Upload Preset 클릭

 

4. Upload Preset 생성

아래에서 작성한 Upload Preset name이 Upload Preset이 되며

브라우저에서 업로드 하려면 signing mode를 Unsigned로 변경 해줘야 한다.

 

 

 

 

CldUploadWidget 없이 이미지 저장 하기

위의 방법을 다 했다면 우리는 CldUploadWidget을 사용하여 업로드 할 수 있다. 아래의 코드와 함께.

import { CldUploadWidget } from 'next-cloudinary';
 
<CldUploadWidget uploadPreset="<Your Upload Preset>">
  {({ open }) => {
    return (
      <button onClick={() => open()}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

 

 

 

 

하지만 위와 같이 업로드 UI가 사이트와 어울리지 않는다면 기본 업로드 UI를 사용해서 업로드 해야한다.

방법을 확인해 보자.

 

 

1. formData 생성하기

export const uploadImage = async (image: File) => {

// 업로드 할 url 설정
  const url = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/upload`;
 
// formData 생성
 const formData = new FormData();
 
// file이라는 키에 image(사용자가 업로드할 이미지) 데이터 추가
  formData.append("file", image);
  
// upload_preset에 환경변수 upload_Rreset 추가
  formData.append(
    "upload_preset",
    process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET!
  );
// formData를 body에 담아서 POST 요청을 보냄(cloudinary에 업로드)
  const response = await fetch(url, {
    method: "POST",
    body: formData,
  });
  
  const data = await response.json();
  return data.url; // 업로드된 이미지 url 반환
};

 

 

 

2. cloudinary에 업로드된 이미지 데이터베이스에 업로드 하기

const profileUpdateHandle = async (e: React.FormEvent) => {

    e.preventDefault();
    
    const imageUrl = uploadImageFile ? await uploadImage(uploadImageFile as File) : null;
    
    const updateProfileData = {
      id: id,
      image: imageUrl,
      name: name,
    };
    
    //...upload code
    
  };

 

 

마무리

supabase의 storage를 사용했을 때는 중복되는 이미지 이름이 생기지 않도록 따로 랜덤 이름을 생성해서 업로드 해줘야 했지만, cloudinary는 알아서 랜덤 이름이 적용되서 편했다. 백엔드 서비스(?)를 바꾸면서 해야할 것들이 많아 졌다. 공부와 프로젝트,, 부지런히 해야겠다.