Angular hide upload and show new upload plus image

Question

Intro

I have 3 upload buttons that hide the button just used and gives the option to upload a new pic with a new button (max 3 upload buttons).

I also have a small JavaScript function that shows the image selected (currently only the first button)

Question

How can I add the other two images into this script without repeating code, also is there a way to show file name not the image itself ?

My Code

    <script>
    document.getElementById("FirstImageID").onchange = function () {
        var reader = new FileReader();

        reader.onload = function (e) {
            // get loaded data and render thumbnail.
            document.getElementById("image").src = e.target.result;
        };

        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
    };
</script>


<div class="text-center">
    <h1 style=" color: blue;">What would you like to do?</h1>
</div>

<div class="form-group" ng-controller="mock-up-makerController">


    <div class="controls row center-text">
        <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageFirst()"
               ng-click=" showDiv1=true"
               ng-show="!showDiv1"/>

        <!--<input type="file" id="files" />-->


        <div ng-show="showDiv1">
            <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
                   onchange="angular.element(this).scope().insertImageSecond()"
                   ng-click=" showDiv2=true"
                   ng-show="!showDiv2"/>
        </div>

        <div ng-show="showDiv2">
        <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageThird()"/>
        </div>
    </div>

    <img id="image" />

</div>

Answer 1

First, the issue here is that you're binding an event one at a time to each of your inputs. You're using javascript event handler and you're also appending it to your HTML. I suggest you stick with html. You can pass event to that event handler.

onchange="onInputUploadChange(evt)"

you can accept it on your function and determine which is being used.

function onInputUploadChange(evt){
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };
    //get the file from event, if not possible, try THIS
    //This will only work if you have no multiselect which I'm assuming is true.
    var file = evt.target.files[0] ? evt.target.files[0] : $(this)[0].files[0];
    // read the image file as a data URL.
    reader.readAsDataURL();
}

As for your other question, you can get the name from file.fileName

Answer 2

You should create 1 universal function

function showThumb(event, appendTo) or just without event and attach every button which you want