Image URL을 File object로 변경하기

image url을 file object로 변경하기 위해서 구글링을 해봤는데 생각보다 간단하게 했다.

export const convertURLtoFile = async (url: string) => {
  const response = await fetch(url);
  const data = await response.blob();
  const ext = url.split(".").pop(); // url 구조에 맞게 수정할 것
  const filename = url.split("/").pop(); // url 구조에 맞게 수정할 것
  const metadata = { type: `image/${ext}` };
  return new File([data], filename!, metadata);
};

위의 함수를 사용하면 File object로 변경된다.

filename, ext를 구하기 위해서 저렇게 한 이유는 url의 형태가 http://abc.com/filename.ext이기 때문에 split('/')을 사용해서 문자열을 분리하고, 마지막 요소를 가져오면 filename이 된다.
array.length-1을 이용해서 마지막 요소를 가져오면 변수가 1~2개가 증가해서 pop 메소드를 사용했다. 물론 undefined가 리턴되기 때문에 File 생성자에서 filename에 !를 사용해서 undefined가 되는 경우를 무시했다. url 자체가 잘못되는 경우가 없기 때문이다.