We Keep Coding

Excel binary data to fileReader

I have a binary string (from an REST API) that is the content of a Excel file.
PK\x03\x04\x14\x00\x06\00\x00\x00���N�0\x10E�H�C�-#\b5��\x12*Q>�ēƪc[�ii����\x10B�\x15j7�\x12��{2��h�nm���ƻR\f����U^\x1B7/���%�\x17\x19�rZY�\x14\x1B#1\x19__�f�\x00�q��R4D�AJ�\x1Ah\x15\x16>����V\x11�ƹ\f�Z�9����NV ...
What I want is to put this content in a FileReader object. I tried to convert the content to blob and to use readAsBinaryString but it doesn't work.
Maybe I missed something
However, when I use an input type=file, it's works with this example
$("#input").on("change", (e) => {
selectedFile = e.target.files[0];
});
let fileReader = new FileReader();
fileReader.readAsBinaryString(selectedFile);
fileReader.onload = (event)=>{
let data = event.target.result;
let workbook = XLSX.read(data,{type:"binary"});
}
What I would like is for selectedFile to reflect the binary string and not have to go through an input type=file
Thanks for your help

You can create a Blob object from the binary string, then create a File object from the Blob and finally, create a FileReader object from the File object.
var binaryString = "PK\x03\x04\x14\x00\x06\00\x00\x00���N�0\x10E�H�C�-#\b5��\x12*Q>�ēƪc[�ii����\x10B�\x15j7�\x12��{2��h�nm���ƻR\f����U^\x1B7/���%�\x17\x19�rZY�\x14\x1B#1\x19__�f�\x00�q��R4D�AJ�\x1Ah\x15\x16>����V\x11�ƹ\f�Z�9����NV ...";
// create a Blob object
var blob = new Blob([binaryString], { type: "application/vnd.ms-excel" });
// create a File object from the Blob
var file = new File([blob], "file.xlsx");
// create a FileReader object
var reader = new FileReader();
// use the readAsArrayBuffer method to read the file
reader.readAsArrayBuffer(file);
// when the reading is done, log the result
reader.onloadend = function () {
console.log(reader.result);
};

Error Converting Base64 data to File using JavaScript on Internet Explorer(0x800a01bd - JavaScript runtime error: Object doesn't support this action)

I am trying to convert base64 data to file using javascript on asp.net, but i am getting( 0x800a01bd - JavaScript runtime error: Object doesn't support this action) error on final stage while converting blob to file at final stage.
Here is my code:
function dataBaseURLtoFile(str) {
// extract content type and base64 payload from original string
var pos = str.indexOf(';base64,');
var type = str.substring(5, pos);
var b64 = str.substr(pos + 8);
// decode base64
var imageContent = atob(b64);
// create an ArrayBuffer and a view (as unsigned 8-bit)
var buffer = new ArrayBuffer(imageContent.length);
var view = new Uint8Array(buffer);
// fill the view, using the decoded base64
for (var n = 0; n < imageContent.length; n++) {
view[n] = imageContent.charCodeAt(n);
}
// convert ArrayBuffer to Blob
var blob = new Blob([buffer], { type: type });
//convert blob to file
var file = new File([blob], "name", { type: "image/jpeg", });
return file;
}

I try to check your code and found that issue is on line below.
var file = new File([blob], "name", { type: "image/jpeg", });
IE and Edge browser does not supports the File() constructor.
File.File() constructor
For IE and Edge browser you need to use any alternative way.
You can try to refer thread below may give you some helpful information about alternative ways.
Is there an alternative for File() constructor for Safari and IE?

How Might I Upload an Image Previously Stored in LocalStorage?

I have an html5 mobile web app (http://app.winetracker.co) and I'm working on feature that remembers user's state when they come back to the app in their browser (which always automatically refreshes in iOS safari). I'm storing the URL and form-field data via local storage. One of the form field data items is an file-input for images. I am successfully converting images to a base64 via canvas and storing it to localStorage.
function storeTheImage() {
var imgCanvas = document.getElementById('canvas-element'),
imgContext = imgCanvas.getContext("2d");
var img = document.getElementById('image-preview');
// Make sure canvas is as big as the picture BUT make it half size to the file size is small enough
imgCanvas.width = (img.width/4);
imgCanvas.height = (img.height/4);
// Draw image into canvas element
imgContext.drawImage(img, 0, 0, (img.width/4), (img.height/4));
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
window.localStorage.setItem("imageStore", imgAsDataURL);
$('.localstorage-output').html( window.localStorage.getItem('imageStore') );
}
catch (e) {
console.log("Storage failed: " + e);
}
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image-preview').attr('src', e.target.result);
storeTheImage();
}
reader.readAsDataURL(input.files[0]);
}
}
$('.file-input').on('change', function() {
readURL(this);
});
see this jsFiddle: https://jsfiddle.net/tonejac/ceLwh9qp/19/
How might I convert the localStore image dataURL string back to an image file so I can upload it to my server?

How might I convert the localStore image dataURL string back to an image file
See your fiddle, Javascript pane line 25.
// recompose image :
var imgRecomposed = document.createElement('img');
$('.image-recomposed').append(imgRecomposed);
imgRecomposed.src = window.localStorage.getItem('imageStore');
We create an image element and fill the src attibute with the data of the stored 'dataImage'.

In your Fiddle:
// Save image into localStorage
try {
window.localStorage.setItem("imageStore", imgAsDataURL);
$('.localstorage-output').html( window.localStorage.getItem('imageStore') );
}
catch (e) {
console.log("Storage failed: " + e);
}
Place any of the following in your try/catch:
$('#canvas-element').context.drawImage(imgAsDataURL);
$('#canvas-element').context.drawImage(imgAsDataURL, 0, 0);
$('#canvas-element').replace(imgAsDataURL);
This will place the stored image into the Canvas you have displayed.
It is already an 'image' - you can use it as the src for an element etc. Sending it to your server is depends on the environment you have - basically an Ajax POST or similar sending the base64 string?.

You will first have to convert this dataURL to a blob, then use a FormData object to send this blob as a file.
To convert the dataURL to a blob, I do use the function from this answer.
function upload(dataURI, url){
// convert our dataURI to blob
var blob = dataURItoBlob(dataURI);
// create a new FormData
var form = new FormData();
// append the blob as a file (accessible through e.g $_FILES['your_file'] in php and named "your_filename.extension")
form.append('your_file', blob, 'your_filename.'+blob.type.split('image/')[1]);
// create a new xhr
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
// send our FormData
xhr.send(form);
}
// from https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}
var savedIntoLocalStorage = 'data:image/png;base64,...=';
// execute the request
upload(savedIntoLocalStorage, 'http://yourserver.com/upload.php');

Converting a text XHR-Response to arraybuffer

I'm making an XHR request. At the time of making the request, I don't know whether the URL will return an image or not, so I'm setting xhr.responseType="text"
If the response returns with a Content-Type of image/png [or any other image MIME type], I'm making another request with xhr.responseType="arraybuffer". I then use the arraybuffer that's returned to render the image:
var uInt8Array = new Uint8Array(arraybuffer);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
//use this base64 string to render the image
Is there any way I can avoid making the second request?
I tried doing this -
var buf = new ArrayBuffer(responseText.length);
var bufView = new Uint8Array(buf);
for (var i=0, i<responseText.length; i++) {
bufView[i] = responseText.charCodeAt(i);
}
return buf;
but the responseText isn't the same as the data in the first code sample, and the resultant ArrayBuffer doesn't render the image correctly.

I had the same problem with a PDF being corrupted, but the handler is generic and handles text, JSON and files.
The easiest way to solve this is to do it the other way round: Always make the request with:
xhr.responseType = "blob";
Then when you want the response as text, just convert the binary data to text:
xhr.response.text().then(text => {
// do something
});
Having binary as the default return type I can just convert that to text where needed.

How to get the source of an image from upload form?

One of my first larger projects so please bear with me. I have a script which will help me resize an image and turn it into base64. This is how it begins:
var createImage = function (src) {
var deferred = $.Deferred();
var img = new Image();
img.onload = function() {
deferred.resolve(img);
};
img.src = src;
return deferred.promise();
};
And my question is to get the image source from the upload form to the script?
I've tried to stitch together (with help from other sources) a function with the Filereader API:
var createImageURL = function () {
var fileinput = document.getElementById('fileinput');
file = fileinput.files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (event) {
var blob = new Blob([event.target.result]);
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob);
}
return blobURL;
};
However this returns a GET error in the console.

Rather than going via Blob, convert your <input>'s File to an ObjectURL directly, saving yourself a lot of trouble by keeping your code synchronous and requiring fewer lines of code.
function inputToURL(inputElement) {
var file = inputElement.files[0];
return window.URL.createObjectURL(file);
}
var url = inputToURL(document.getElementById('fileinput'));
createImage(url);
This works because a File is a Blob per spec (as pointed out by Ray Nicholus)
It's not advised (as File inherits from Blob already) and highly unusual to want to convert between them, but not impossible. I'm including this so you can see how to structure FileReader code if you need it in future, not as a solution to your problem. To convert <input type="file" />'s first file to Blob, you would do
function fileToBlob(inputElement, callback) {
var fileReader = new FileReader();
fileReader.onload = function () {
callback(new Blob([this.result]));
}
fileReader.readAsArrayBuffer(inputElement.files[0]);
}
Where callback takes a Blob as it's first parameter. Remember that since the readAsArrayBuffer caused us to use a callback, we had to write this so it would work in an asynchronus environment.