JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<form>
  <input type="file" accept="image/*" name="selfie">
  <button type="submit">
    Submit
  </button>
</form>

JavaScript

const form = document.querySelector('form')

form.addEventListener('submit', async event => {
  event.preventDefault()

  const data = [...new FormData(event.target).entries()].reduce((obj, [key, value]) => {
    obj[key] = value
    return obj
  }, {})
  
  data.selfie = await new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.readAsDataURL(data.selfie)
  })

  console.log('data:', data)
  
  // then you can send this data off somewhere like this:
  const response = await fetch('https://example.com/my-endpoint', {
  	body: JSON.stringify(data),
    headers: {
    	'Accept': 'application/json',
    	'Content-Type': 'application/json'
    },
    method: 'POST'
  })
  
  const responseData = await response.json()

  console.log('responseData:', data)
})