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)
})
@gayatrikawade
Copy link

There is problem at line number 12
u8arr[n] = bstr.charCodeAt(n)

It must be
u8arr[n-1] = bstr.charCodeAt(n-1)

@resting
Copy link

resting commented Aug 15, 2018

@gayati thanks for that!

@silasrm
Copy link

silasrm commented Dec 24, 2018

Hi guys,

I try to use this dataURLtoFile function, but the final file is corrupted.
In my research, I find a solution:

getExportFile () {
    // helper function: generate a new file from base64 String
    const base64ToBlob = (dataurl) => {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1]
      const sliceSize = 1024;
      const byteChars = window.atob(arr[1]);
      const byteArrays = [];

      for (let offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        let slice = byteChars.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      return new Blob(byteArrays, {type: mime});
    }

    const getFilename = (dataUrl) => {
      const arr = dataUrl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];

      return Math.round(+new Date()/1000) + '.' + mime.split('/').pop();
    }

    const dataUrl = this.previewCanvas.toDataURL();
    const blob = base64ToBlob(dataUrl);
    blob.name = getFilename(dataUrl);

    // generate file from base64 string
    return blob;
  }

@mateatslc
Copy link

consider using fetch: https://stackoverflow.com/a/36183085

@ibreathebsb
Copy link
Author

There is problem at line number 12
u8arr[n] = bstr.charCodeAt(n)

It must be
u8arr[n-1] = bstr.charCodeAt(n-1)

thanks fixed!

@Bryan03122
Copy link

I have the error "TypeError: Cannot read properties of null (reading '1')" in this line const mime = arr[0].match(/:(.*?);/)[1] . Do you know why?

@ibreathebsb
Copy link
Author

@Bryan03122 check your base64 image data,it should has a “,” in it

@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