FileReader load event sets the .result value asynchronously. To access the .result use load or loadend event. When a file has been selected at <input type=”file”> Choose File or Browse… UI, deleting file at local filesystem should not effect the File object at FileList returned by .files call. See 2.9.2. Transferable objects, 6.7.3 The DataTransfer … Read more
If you need to send it over ajax, then there’s no need to use a File object, only Blob and FormData objects are needed. As I sidenote, why don’t you just send the base64 string to the server over ajax and convert it to binary server-side, using PHP’s base64_decode for example? Anyway, the standard-compliant code … Read more
Yes, read the file as a data URL and pass that data URL to the src of an Image: http://jsfiddle.net/pimvdb/eD2Ez/2/. var fr = new FileReader; fr.onload = function() { // file is loaded var img = new Image; img.onload = function() { alert(img.width); // image is loaded; sizes are available }; img.src = fr.result; // … Read more
[Edit] As noted in comments above, while still on some UA implementations, readAsBinaryString method didn’t made its way to the specs and should not be used in production. Instead, use readAsArrayBuffer and loop through it’s buffer to get back the binary string : document.querySelector(‘input’).addEventListener(‘change’, function() { var reader = new FileReader(); reader.onload = function() { … Read more
The canvas element provides a toDataURL method which returns a data: URL that includes the base64-encoded image data in a given format. For example: var jpegUrl = canvas.toDataURL(“image/jpeg”); var pngUrl = canvas.toDataURL(); // PNG is the default Although the return value is not just the base64 encoded binary data, it’s a simple matter to trim … Read more
You can set webkitdirectory and allowdirs attributes at <input type=”file”> element; attach change, drop events to <input type=”file”> element; use .getFilesAndDirectories() at mozilla, .createReader(), .readEntries() at webkit, Array.prototype.reduce(), Promise, recursion. Note at firefox drop event does not list selection as a Directory, but a File object having size 0, thus dropping directory at firefox does … Read more
There are a number of ways of triggering a download. Following are a few: Use a form: <form method=”get” action=”mydoc.doc”> <button type=”submit”>Download</button> </form> Use javascript: <button type=”submit” onclick=”window.open(‘mydoc.doc’)”>Download</button>
Ok, you want to “Remember and Repopulate File Input“, “remember their choice and redisplay the file input with the file pre-selected on reload of the page“.. And in the comment to my previous answer you state that you’re not really open to alternatives: “Sorry but no Flash and Applets, just javscript and/or file input, possibly … Read more
User Matt has proposed the following code a year ago ( How to convert dataURL to file object in javascript? ) which might help you EDIT: As some commenters reported, BlobBuilder has been deprecated some time ago. This is the updated code: function dataURItoBlob(dataURI) { // convert base64 to raw binary data held in a … Read more
Modern solution: let blob = await fetch(url).then(r => r.blob()); The url can be an object url or a normal url.