How are u converting the file in base64 format in frontend?

[Zafeeruddin]

I am trying to convert the file in the following way:

const handleFileChange =(e:ChangeEvent<HTMLInputElement>)=>{
    if(e.target.files){
      const file = e.target.files[0]
      if(file==null){
        return
      }
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload=(e)=>{
      const base64 = e.target?.result
      if(base64){
        setFile(base64)
      }
    }
  }
  }

But this throws following error at atob:

error DOMException { code: 5, name: 'InvalidCharacterError', message: "atob() called with invalid base64-encoded data. (Only whitespace, '+', '/', alphanumeric ASCII, and up to two terminal '=' signs when the input data length is divisible by 4 are allowed.)", stack: "InvalidCharacterError: atob() called with invalid base64-encoded data. (Only whitespace, '+', '/', alphanumeric ASCII, and up to two terminal '=' signs when the input data length is divisible by 4 are allowed.)\n" + ' at null.<anonymous> (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/src/routes/blog.ts:121:40)\n' + ' at async dispatch (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/hono/dist/compose.js:29:17)\n' + ' at null.<anonymous> (async file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/.wrangler/tmp/dev-9B3RX2/index.js:12824:3)\n' + ' at async dispatch (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/hono/dist/compose.js:29:17)\n' + ' at null.<anonymous> (async file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/.wrangler/tmp/dev-9B3RX2/index.js:12802:7)\n' + ' at async dispatch (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/hono/dist/compose.js:29:17)\n' + ' at async cors2 (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/hono/dist/middleware/cors/index.js:65:5)\n' + ' at async dispatch (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/hono/dist/compose.js:29:17)\n' + ' at null.<anonymous> (async file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/.wrangler/tmp/dev-9B3RX2/index.js:7471:25)\n' + ' at async jsonError (file:///C:/Users/dell/Desktop/Cohort/projects/medium/apps/backend/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:10)' } ╭