Simplest, leanest implementation of FileReader API to grab a local image and display it?

Question

I'm trying to get my head around the FileReader API for the purposes of grabbing a local image and then displaying it on a webpage.

I have referred to MDN's collection of pages (Starting here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader) and also to Treehouse, but there appears initially a lot of complexity to wade through and I am keen to keep my function as light, as spare and as free from extraneous cruft as I can.

Essentially I want to deploy the simplest script possible, without making it too simple.

Here is the getLocalImage() function I have put together:

var body = document.getElementsByTagName('body')[0];
var fileInput = document.querySelector('input[type=file]');

function getLocalImage() {
    var image = document.createElement('img');

    var reader = new FileReader();

    var imageFile = fileInput.files[0];
    reader.readAsDataURL(imageFile);

    reader.onload = function(e) {
        image.src = reader.result;
    }

    body.appendChild(image);
}

fileInput.addEventListener('change',getLocalImage,false);

<input type="file" />

My questions are straightforward:

1. Can this script be any simpler than it is? (I'm sceptical, but I am keen to know).
2. More pertinently, is this script too simple? Have I omitted any best practices? (For instance, should I also be getting the dimensions of the local image and then setting them on the webpage?)

Answer 1

• You can define the accept attribute for the file picker, so that only images can be selected:

  <input type="file" accept="image/*" />

• In change callback you should check if the user have picked the file, or cleared the selection with cancel button.

• You can use URL.createObjectURL to create the image url from a selected file.

So here two options, once your sample refactored, with some performance measurements to see the comparison for the FileReader and the ObjectUrl.

function localImageSelected(event) {
    var files = event.target.files;
    if (files.length === 0) {
        return;
    } 
    var file = files[0];

    getImageSrcFromFile(file, function(src){
        var image = document.createElement('img');
        var now = performance.now();
        image.src = src;
        image.onload = function(){
            console.log('Image loaded in:', performance.now() - now);
        };
        document.body.appendChild(image);
    });     
}

function getImageSrcFromFile (file, cb) {
    var now = performance.now();
    var reader = new FileReader();
    reader.onload = function(e) {
        console.log('The url created in:', performance.now() - now);
        cb(reader.result);
    };
    reader.readAsDataURL(file);
}

document
    .querySelector('input[type=file]')
    .addEventListener('change', localImageSelected, false);

And with ObjectURL:

function localImageSelected(event) {
    var files = event.target.files;
    if (files.length === 0) {
        return;
    } 
    var file = files[0];

    var image = document.createElement('img');
    var url = getImageSrcFromFile(file);
    var now = performance.now();
    image.src = url;
    image.onload = function(){
        console.log('Image loaded in:', performance.now() - now);

        //I do it here, but note that the url is not more usable. 
        // Or you can remove this line, then extra KBs are in memory until the page reload, 
        // usually it is not critical
        URL.revokeObjectURL(url);
    };
    document.body.appendChild(image);
}

function getImageSrcFromFile (file) {
    var now = performance.now();
    var url = URL.createObjectURL(file);
    console.log('The url created in:', performance.now() - now);
    return url;
}

document
    .querySelector('input[type=file]')
    .addEventListener('change', localImageSelected, false);

I would prefer the ObjectURL, as it ~2x faster and consumes less memory, but you have to pay attention for revoking the url manually as the loaded image then stays in memory until the page reload. The datareader's base64 string is cleaned by the garbage collector, when it is not more needed.

Better comparison you can find here FileReader vs. window.URL.createObjectURL