Axiosで外部ファイルをロードしてFileにする / Data URI schemeをFileにする

• 外部リソースをAxiosでロードしFileオブジェクトに変換する
• Data URI schemeをFileオブジェクトに変換する

uriToFile関数

import axios from 'axios'

function uriToFile(uri, fileName) {
  if (!uri) return Promise.resolve(null)
  return uri.startsWith('data:')
    ? convertDataUriToFile(uri, fileName)
    : loadUriToFile(uri, fileName)
}

function convertDataUriToFile(dataUri, fileName) {
  const byteString = atob(dataUri.split(',')[1])
  const mimeType = dataUri.match(/(:)([a-z/]+)(;)/)[2]

  const length = byteString.length
  const content = new Uint8Array(length)
  for (let i = 0; length > i; i++) {
    content[i] = byteString.charCodeAt(i)
  }

  return Promise.resolve(
    new File([content], fileName, {
      type: mimeType,
    })
  )
}

async function loadUriToFile(uri, fileName) {
  const response = await axios.get(uri, {
    responseType: 'blob',
  })
  return new File([response.data], fileName, {
    type: response.data.type,
  })
}

使い方

uriToFile('https://example.com/example.png')
  .then(file => ...)

uriToFile('data:image/png;base64,iVBORw0KGgoAAA...')
  .then(file => ...)