file 속성 변경하기

문제발생

프로젝트 진행중, 폴더채로 파일을 보내는 작업을 해야했다

이를 위해 유저가 폴더를 선택하면, 그 폴더내의 모든 파일들을

formData에 append하는식으로 코드를 짰는데, 백엔드쪽에서

파일명에 파일경로까지 포함해서 와서 파일이 제대로 들어가지 않는다는 피드백이 왔다.

백엔드쪽의 로그를 살펴보니 file객체의 webkitRelativePath가 파일명으로 들어있었다.

해결

어떤 로직에의해 저런식으로 작동 되는진 모르겠지만.. 단일 파일로 보낼 경우엔

webkitRelativePath:'' 형태로 들어가있고 제대로

파일의 name속성을 읽어서 서버쪽에 저장이 되었다.

webkitRelativePath 속성은 폴더를 선택하면 자동으로

해당 파일의 경로가 들어가는 속성

그렇다면, file속성중 webkitRelativePath에 강제로 빈값을 넣어주면 되지 않겠는가?

다만 file객체는 읽기전용속성을 가지고 있기에 따로 편집이 불가능했고,

살짝 우회해서 새로운 파일객체를 만들어 복사하고, 해당속성만 커스텀해주는 식으로

코드를 진행했다

let formData = new FormData();


//폼데이터에 추가. uploadList는 files를 array화 시켜서 만든 유사배열
uploadList.forEach((v) => { 
  let tmp_copy = new File([v], `${v.name}`,{ type:v.type, webkitRelativePath:''});
  formData.append('files',tmp_copy);	
})