Menu
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 WebSocket with .binaryType set to "arraybuffer", create a MessageEvent with event.data set to File object; result is File object at onmessage handler
set prototype of File to ArrayBuffer, Uint8Array; result is Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(), Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()
set File at FormData object, attempt to post request body to <iframe>, admittedly not well-conceived; result Bad Request at 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
850
The readAsDataURL method is used to read the contents of the specified Blob or File . When the read operation is finished, the readyState becomes DONE , and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.
An ArrayBuffer is in the memory, available for manipulation. A Blob can be on disk, in cache memory, and other places not readily available.
arrayBuffer() The arrayBuffer() method in the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer .
I just put it here:
var input = document.querySelector("input[type=file]"); input.addEventListener("change", handleFiles, true); // for url window.URL = window.URL || window.webkitURL; function handleFiles(evnet) { var file = event.target.files[0]; document.querySelector('iframe') .setAttribute('src', window.URL.createObjectURL(file)); }<!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> </body> </html> 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