Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert data file to blob

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); } 
like image 875
Fulrus Avatar asked Nov 22 '15 13:11

Fulrus


People also ask

How do I create a Blob URL?

You can use URL. createObjectURL() to create Blob url. The URL. createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.

What is Blob in angular?

Binary Large Object(Blob) is an Object used to store or holding data in a browser. Blobs can be used to read then save data on disk. A Blob object has properties to represent the size and MIME type of stored file. This can be used as a normal file.

What is Blob in URL?

Blob URLs contain pseudo protocols that can create a temporary URL to audio and video files. This type of URL essentially acts as a fake source for the media on the website, so you can't download it directly. Instead, you have to use third-party conversion tools.


2 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 https://developer.mozilla.org/en/docs/Web/API/FileReader

Read more: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

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>
like image 199
rafaelcastrocouto Avatar answered Oct 07 '22 17:10

rafaelcastrocouto


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'}))); 
like image 24
Dipo Avatar answered Oct 07 '22 15:10

Dipo