How to get a blob?
HTML:
<input type="file" onchange="previewFile()"> JavaScript:
function previewFile() { var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); // Get blob? console.log(file); } 3 Answers
As pointed in the comments, file is a blob:
file instanceof Blob; // true And you can get its content with the file reader API
var input = document.querySelector('input[type=file]'); var textarea = document.querySelector('textarea'); function readFile(event) { textarea.textContent = event.target.result; console.log(event.target.result); } function changeFile() { var file = input.files[0]; var reader = new FileReader(); reader.addEventListener('load', readFile); reader.readAsText(file); } input.addEventListener('change', changeFile);<input type="file"> <textarea rows="10" cols="50"></textarea>A file object is an instance of Blob but a blob object is not an instance of File
new File([], 'foo.txt').constructor.name === 'File' //true new File([], 'foo.txt') instanceof File // true new File([], 'foo.txt') instanceof Blob // true new Blob([]).constructor.name === 'Blob' //true new Blob([]) instanceof Blob //true new Blob([]) instanceof File // false new File([], 'foo.txt').constructor.name === new Blob([]).constructor.name //false If you must convert a file object to a blob object, you can create a new Blob object using the array buffer of the file. See the example below.
const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'}); //or const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.onload = function(e) { const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type }); console.log(blob); }; reader.readAsArrayBuffer(file); As pointed out by @bgh you can also use the arrayBuffer method of the File object. See the example below.
const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'}); //or const file = document.querySelector('input[type=file]').files[0]; file.arrayBuffer().then((arrayBuffer) => { const blob = new Blob([new Uint8Array(arrayBuffer)], {type: file.type }); console.log(blob); }); If your environment supports async/await you can use a one-liner like below
const fileToBlob = async (file) => new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type }); console.log(await fileToBlob(new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'}))); async function FileToString (file) { try { let res = await file.raw.text(); console.log(res); } catch (err) { throw err; } } 
