Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
File input to Blob example
div {
margin: 20px;
<h1>Convert file input to Blob</h1>
<label for="load-file">Load a file:</label>
<input type="file" id="load-file">
<label for="file-type">File type: </label>
<input type="text" id="file-type" value="image/png">
<button type="button" id="done-button">Convert to Blob (look in the console)</button>
<script src="//"></script>
<script src="//"></script>
(function ($) {
$('#done-button').on('click', function () {
var file = $('#load-file')[0].files[0];
var fileReader = new FileReader();
fileReader.onloadend = function (e) {
var arrayBuffer =;
var fileType = $('#file-type').val();
blobUtil.arrayBufferToBlob(arrayBuffer, fileType).then(function (blob) {
console.log('here is a blob', blob);
console.log('its size is', blob.size);
console.log('its type is', blob.type);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.