Append an image to form input via AngularJS

Question

I want to append an image to a form input-Tag by clicking on it. So we have a HTML-Form that looks like this:

<form name="upload">
   <input type="file" name="file"/>
</form>

On the Page there are severall images displayed. If i´m clicking on of the images, the following function is beeing called and gives it the $event-parameter (which works fine).

$scope.uploadTest = function(event){
        var file = event.target;
        var place = document.forms['upload'].files[0];
        place.appendChild(file);
    };

The function should take the event.target (which is an image) and appends it to the input formular dynamically. Can some help me? What am I doing wrong? I´ve tried it in any possible way, like appending the image to "document.forms['upload']" or "document.getElementById("file")", but nothing works for me. Thanks in advance

Answer 1

Ng input file is not allowed for use ng-model.

Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

Detail.

You can take file path and use with Jquery File Upload functions.

This will help you: File Upload using AngularJS