fileapi

How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?

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>

Reading multiple files with Javascript FileReader API one at a time

I came up with a solution myself which works. function readmultifiles(files) { var reader = new FileReader(); function readFile(index) { if( index >= files.length ) return; var file = files[index]; reader.onload = function(e) { // get file content var bin = e.target.result; // do sth with bin readFile(index+1) } reader.readAsBinaryString(file); } readFile(0); }

HTML5 File API downloading file from server and saving it in sandbox

I’m going to show you how to download files with the XMLHttpRequest Level 2 and save them with the FileSystem API or with the FileSaver interface. ##Downloading Files## To download a file you will use the XMLHttpRequest Level 2 (aka XHR2), which supports cross-origin requests, uploading progress events, and uploading/downloading of binary data. In the … Read more

Adding UTF-8 BOM to string/Blob

Prepend \ufeff to the string. See http://msdn.microsoft.com/en-us/library/ie/2yfce773(v=vs.94).aspx See discussion between @jeff-fischer and @casey for details on UTF-8 and UTF-16 and the BOM. What actually makes the above work is that the string \ufeff is always used to represent the BOM, regardless of UTF-8 or UTF-16 being used. See p.36 in The Unicode Standard 5.0, Chapter … Read more

restrict file upload selection to specific types

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead. <input type=”file” name=”pic” id=”pic” accept=”image/gif, image/jpeg” /> If you don’t have access to the backend have a look at a flash based solution like SWFUpload. See more on … Read more

Convert base64 png data to javascript file objects

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 … Read more