Preview image HTML & JavaScript

Question

I am working on an image uploader and I am currently trying to build up an image preview before the upload is done. I have this HTML code:

<input type="file" id="id_imatgeNewPeces"></input><br></br>
<img id="previewing" src="" />

Then I add a listener to the input like this:

document.getElementById('id_imatgeNewPeces').addEventListener('change', this.handleFileSelect, false);

And finally the function handleFileSelect:

handleFileSelect: function(oEvent) {
    var file = oEvent.target.files[0];

    if (!file.type.match('image.*')) {
        sap.m.MessageToast.show("El archivo seleccionado no es una Imagen");
    } else {

        var readerURL = new FileReader();

        readerURL.onload = function() {
            $('#previewing').attr('src', readerURL.result);
            $('#previewing').attr('width', '250px');
            $('#previewing').attr('height', '230px');
            return true;
        };

        readerURL.readAsDataURL(file);
    }
},

I don't know why when I select a file which is not an image it displays the message but when I do select an image when the method onload ends no image is displayed and in addition it seems that the listener has been lost because no further calls are done when if I select another image.

The funny thing is that if I place a breakpoint on line '$('#previewing').attr('height', '230px');' I can see the image but when I continue it disappears. In addition when the method onload ends the fileinput "resets" I mean that it says that it has no selected files.

Answer 1

Besides being a old question, I've found that your code is working as expected:

I just don't undestand why use a native addEventListener() when you are using jquery for DOM manipulation, being easily replaced by:

$("#id_imatgeNewPeces").change(handleFileSelect);

var handleFileSelect = function(oEvent) {
    var file = oEvent.target.files[0];

    if (!file.type.match('image.*')) {
        console.log("El archivo seleccionado no es una Imagen");
    } else {

        var readerURL = new FileReader();

        readerURL.onload = function() {
            $('#previewing').attr('src', readerURL.result);
            $('#previewing').attr('width', '250px');
            $('#previewing').attr('height', '230px');
            return true;
        };

        readerURL.readAsDataURL(file);
    }
};

$("#id_imatgeNewPeces").change(handleFileSelect);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="id_imatgeNewPeces">
<br/><br/>
<img id="previewing" src="" />