This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4)
Given an <input type="file"> element having a files property containing File objects which inherit from Blob, is it possible to create a ArrayBuffer and convert the ArrayBuffer to a data URI from a Blob or File object without using FileReader?
Approaches have tried so far have been
create a mock
WebSocketwith.binaryTypeset to"arraybuffer", create aMessageEventwithevent.dataset toFileobject; result isFileobject atonmessagehandlerset prototype of
FiletoArrayBuffer,Uint8Array; result isUncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()set
FileatFormDataobject, attempt to post request body to<iframe>, admittedly not well-conceived; resultBad Requestat plnkr
Expected result: Convert Blob and File objects to TypedArray then to data URL, or directly to data URL
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method="get" entype="multipart/form-data" target="binaryFrame">
<input id="#avatar" type="file" name="file" />
<input type="submit" />
</form>
<iframe name="binaryFrame"></iframe>
<script>
var input = document.querySelector("input[type=file]");
input.addEventListener("change", handleFiles, true);
// see http://jsfiddle.net/adamboduch/JVfkt/
var sock = new WebSocket("ws://mock");
sock.binaryType = "arraybuffer";
sock.onerror = function(e) {
console.log("sock error", e); // ignore, here
}
sock.onmessage = function(e) {
console.log("socket message", e.data, e.data instanceof ArrayBuffer);
};
function handleFiles(evnet) {
var file = event.target.files[0];
sock.dispatchEvent(new MessageEvent("message", {
data: file
}));
var data = new FormData();
data.append("file", file);
document.forms[0].action = data;
}
</script>
</body>
</html>
See also Display image from blob using javascript and websockets , How can you encode a string to Base64 in JavaScript? ; interestingly ironic as am now asking similar Question https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob .slice() method , FileReader .readAsDataURL() method
Blobobjects (orFile) but doesn't support theFileReader. Does it really exists? aren't you looking the wrong way? (one workaround would be to upload the File somewhere and then refetch it with XHR but try to answer these first questions first)<input type="file">is supported at version 1.0 of safari,Blobat 5.1,FileReaderat 6.0;responseType"blob"and"arraybuffer"atXMLHttpRequeststate"Yes". Curious how raw data is actually stored, accessed withinBlobobject?var url = URL.createObjectURL(blob); var xhr = new XMLHttpRequest(); xhr.onload = function(){ rawData = this.response; } xhr.open('get', url) xhr.send();. Ps talking about early implementations, you can see that IE9 didn't support TypedArray, but still had one kind through canvas'imageDataobject.Blob, orinput.filesobject at 1.0-5.1? IfBlobis an object, the raw data is stored within object, yes? Another way to ask Question would be how to follow algorithm forFileReaderto create aFileReaderimplementation from scratch using steps in algorithm - without usingFileReader