Upload image in the client using Base64 strings

app.jsx

import { useState } from "react"

/**
 * Takes a file from the file browser and
 * converts into a base64 string
 * Shows an alert when the file type does not match
 * Function is outside so it can be portable
 * @param {Blob} file
 * @returns {Promise}
 */
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif"]
    if (!allowedTypes.includes(file.type)) {
      window.alert("Only jpg & png image files are allowed!")
      return
    }
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}

export default function App() {
  // thumb is the base64 converted string
  const [thumb, setThumb] = useState(undefined)

  // Handles the upload event
  const handleUpload = (event) => {
    getBase64(event.currentTarget.files[0]).then((imageData) => {
      return setThumb(imageData)
    })
  }

  return (
    <>
      <form>
        <label htmlFor="image">Upload the image</label>
        <input type="file" name="image" id="image" onChange={handleUpload} />
      </form>

      {/* shows the image when it's set in the state... */}
      {thumb && <img src={thumb} width={300} />}
    </>
  )
}