Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@gayatrikawade gayatrikawade commented Aug 4, 2018

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

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

@resting

This comment has been minimized.

Copy link

@resting resting commented Aug 15, 2018

@gayati thanks for that!

@silasrm

This comment has been minimized.

Copy link

@silasrm 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

This comment has been minimized.

Copy link

@mateatslc mateatslc commented Apr 23, 2020

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

@ibreathebsb

This comment has been minimized.

Copy link
Owner Author

@ibreathebsb ibreathebsb commented Apr 24, 2020

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

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

thanks fixed!

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