I have a function that allows me to pass file content, name, and type and the function will automatically save it. It works great for text based documents, but now I'm trying to have it save other files, like an image file. Somewhere along the line its getting corrupted and isn't working.
function write(text, filename, mime){
var file = new Blob([text], {type:mime}), a = document.createElement('a');
// Download in IE
if(window.navigator.msSaveBlob) window.navigator.msSaveBlob(file, filename);
// Download in compliant browsers
else{
var url = URL.createObjectURL(file);
a.href = url, a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
window.URL.revokeObjectURL(url);}, 0);}}
write('Plain text', 'demo.txt', 'text/plain');
write(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAIAAADkY5E+AAAAD0lEQVR42mNg0AthoDMGAE1BDruZMRqXAAAAAElFTkSuQmCC'), 'demo.png', 'image/png');
A Binary Large Object ( BLOB ) is a MySQL data type that can store binary data such as images, multimedia, and PDF files.
Inside the DownloadFile JavaScript function, the URL of the File is passed as parameter to the GET call of the JavaScript XmlHttpRequest call. Then inside the onload event handler, the received Byte Array (Binary Data) is converted to BLOB object and the File is downloaded in Browser. //Set the File URL.
FileSaver.js a very powerfull js script to save any type of blob file.
Import it then use it like that:
saveAs(new Blob([file], {type:mime}),filename);
Are you fetching the file using ajax? if so, you should set
XmlHttpRequest.responseType
to 'arraybuffer'
or 'blob'
(default is ''
and that will not work with binaries or blob data).
Working example (using arraybuffer) (Fiddle):
var xhr = new XMLHttpRequest();
var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';
xhr.responseType = 'arraybuffer'; //Set the response type to arraybuffer so xhr.response returns ArrayBuffer
xhr.open('GET', url , true);
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
//When request is done
//xhr.response will be an ArrayBuffer
var file = new Blob([xhr.response], {type:'image/jpeg'});
saveAs(file, 'image.jpeg');
}
};
xhr.send(); //Request is sent
Working example 2 (using blob) (Fiddle):
var xhr = new XMLHttpRequest();
var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';
xhr.responseType = 'blob'; //Set the response type to blob so xhr.response returns a blob
xhr.open('GET', url , true);
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
//When request is done
//xhr.response will be a Blob ready to save
saveAs(xhr.response, 'image.jpeg');
}
};
xhr.send(); //Request is sent
I recommend FileSaver.js to save the blobs as files.
Useful links:
XmlHttpRequest Standard
XmlHttpRequest Standard (responseType attribute)
MDN Docs (XmlHttpRequest)
MDN Docs (ArrayBuffer)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With