[Back4app] RestAPI로 파일 업로드 하기

Backendless 서비스인 Back4app을 이번 프로젝트 개발에 적용하면서 Frontend에 더욱 집중할 수 있었는데 Back4app에서 제공하고 있는 기본 API로 이미지를 업로드 하는데 문제가 생겼습니다.

기본적으로 Back4app에서 제공하는 API Referrence가이드에서 파일업로드는 파일 타입("__type")과 파일명("name")만 적혀 있었습니다.

파일을 업로드 할때 파일명과 파일에 대한 바이너리로 전달하거나 바이너리를 Base64 형식으로 전달합니다. 해당 API가이드는 파일 이름에 대한 내용만 있지 파일에 대한 바이너리 또는 Base64 형식의 가이드는 제공하고 있지 않았습니다. 그래서 실제 업로드를 하다 보면 파일 이름만 있지 링크를 클릭했을 때 아래와 같이 아무 내용이 없습니다.

이럴 때 Back4app에서는 Cloud Code를 통해서 해결할 수 있습니다. Cloud Code는 Back4app에서 제공하고 있는 JavaScript 기반으로 Parse 함수를 사용하여 비즈니스 로직에 맞게 API를 만들 수 있는 기능입니다.

저는 이 기능을 통해서 파일을 전달하여 저장하는 방법을 택했습니다. Frontend에서 전달 파라미터는 기본적으로 텍스트 형태의 파일명과 파일에 대한 바이너리 코드를 Base64로 변환한 텍스트를 전달합니다.

Cloud Code는 Back4app에서 사용하는 Parse 라이브러리를 쓸 수 있는데 거기의 라이브러리 중 File은 Base64로도 처리할 수 있게 제공하고 있습니다. 아래코드는 제가 테스트한 코드입니다. 참고하셔서 사용하세요.

Parse.Cloud.define("createImg", async (req)=>{
  try{
    var UserResource =  Parse.Object.extend("userResouce");
    const name = 'gdhong';
    const fileName = "resume.pdf"
    const img64 = 'R0lGODlhSgJXAjAAMSH5BAEAAAAv...=='
    
    let file_data = {
       name:fileName,
       data: {base64: img64},
    }
    
    let parseFile = new Parse.File(name, {base64:img64});
    
    var d = new UserResource();
    d.set("username",name);
    d.set('file', parseFile)
    
    await d.save().then(data=>{
      object_id = data.id;
    }).catch(err=>{
        console.log({err});
    })
    return "ok"
  }catch(err){
    return {err}
  }
})