Convert base64 png data to javascript file objects

by

Way 1: only works for dataURL, not for other types of url.

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

//Usage example:
var file = dataURLtoFile('data:image/png;base64,......', 'a.png');
console.log(file);

Way 2: works for any type of url, (http url, dataURL, blobURL, etc…)

//return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1];
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], filename, {type:mimeType});})
    );
}

//Usage example:
urltoFile('data:image/png;base64,......', 'a.png')
.then(function(file){
    console.log(file);
})

Both works in Chrome and Firefox.

More Related Contents:

  1. Creating a BLOB from a Base64 string in JavaScript
  2. How can you encode a string to Base64 in JavaScript?
  3. How to set File objects and length property at FileList object where the files are also reflected at FormData object?
  4. Blob from DataURL?
  5. Remember and Repopulate File Input [duplicate]
  6. Using JavaScript to display a Blob
  7. How to download a file without using element with download attribute or a server?
  8. Get Base64 encode file-data from Input Form
  9. Image convert to Base64
  10. Using raw image data from ajax request for data URI
  11. Convert binary data to base64 with javascript
  12. How can I set Image source with base64
  13. How to convert dataURL to file object in javascript?
  14. Save base64 string as PDF at client side with JavaScript
  15. play .wav sound file encoded in base64 with javascript
  16. Writing file to desktop using HTML5 FileSystem API
  17. Is there a way to set background-image as a base64 encoded image?
  18. React-Native: Convert image url to base64 string
  19. HEX to Base64 converter for JavaScript
  20. Decode Base64 to Hexadecimal string with javascript
  21. how to compress a base64 image to custom size
  22. Resize a Base-64 image in JavaScript without using canvas
  23. Adding UTF-8 BOM to string/Blob
  24. Get image width and height from the Base64 code in JavaScript
  25. Secure random token in Node.js
  26. Large file upload with WebSocket
  27. ReadFile in Base64 Nodejs
  28. Convert a string to base64 in JavaScript. btoa and atob are deprecated
  29. Reading multiple files with Javascript FileReader API one at a time
  30. How to get MIME-TYPE from Base 64 String?

Leave a Comment