Skip to content

Instantly share code, notes, and snippets.

@ibreathebsb
Last active August 8, 2024 18:47
Show Gist options
  • Save ibreathebsb/a104a9297d5df4c8ae944a4ed149bcf1 to your computer and use it in GitHub Desktop.
Save ibreathebsb/a104a9297d5df4c8ae944a4ed149bcf1 to your computer and use it in GitHub Desktop.
file upload from dataUrl with axios
// Note: only for modern browser
import axios from 'axios'
// helper function: generate a new file from base64 String
const dataURLtoFile = (dataurl, filename) => {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n) {
u8arr[n - 1] = bstr.charCodeAt(n - 1)
n -= 1 // to make eslint happy
}
return new File([u8arr], filename, { type: mime })
}
// generate file from base64 string
const file = dataURLtoFile('data:image/png;base64,iVBORw0KGgoAAAANSUhEU...')
// put file into form data
const data = new FormData()
data.append('img', file, file.name)
// now upload
const config = {
headers: { 'Content-Type': 'multipart/form-data' }
}
axios.post('/path/to/upload', data, config).then(response => {
console.log(response.data)
})
@nikita-fuchs
Copy link

This solution is heaven-sent ! Thank you very much !

@mscdo
Copy link

mscdo commented Apr 1, 2023

THANK YOU!!!!!!!!!! <3

@ducgiang2701
Copy link

if it is an array base64? can you help me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment