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
Easiest way: a = new File([1,2,3], “file.txt”); b = new Blob([1,2,3]); c = “something else entirely”; a instanceof File > true b instanceof File > false c instanceof File > false
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
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
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
You have a File instance which is not an image. To get an image, use new Image(). The src needs to be an URL referencing to the selected File. You can use URL.createObjectURL to get an URL referencing to a Blob (a File is also a Blob): http://jsfiddle.net/t7mv6/86/. var ctx = document.getElementById(‘canvas’).getContext(‘2d’); var img = … 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
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
The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn’t have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this: new File([blob], “filename”)