How to get values of input type file in angularjs?

Question

I am creating simple application in angularjs using slim framework. In that, I am creating form for some data like name, categories, currency and Image file etc. In this app, I am having trouble with input type file. I can get all the data of textbox or radio button etc but I can't get data of input type file. Below is the code for that.

index.html :- HTML file

<form method="POST" enctype="multipart/form-data" class="form account-form" name="form" ng-submit="creator(user)" role="form">
<input type="text" name="name" ng-model="user.name"  /> 

<input type="radio" name="category" ng-model="user.category" value="Science" >                                  
<input type="radio" name="category" ng-model="user.category" value="Engineerig" >

<input type="file" ng-model="user.image_file" name="image_file">
</form>

registerController.js :- Controller file

app.controller('CreatorController', function($scope,$rootScope,$location,$http,CreatorService,FlashService) {
    $scope.creator = function (user) {
      // alert("create");
        $scope.dataLoading = true;
         CreatorService.creator(user)
                .then(function (response) {   
                    if(response.data['message']){ 
                        FlashService.Success('Registration successful', true);
                        $location.path('/crete-page');
                    } else {
                        FlashService.Error('Registration failed');
                    }
                });
    }    
});

registerDB.php :- DB handler PHP file in slim framework dir

 <?php

function insertUser($data) {

    print_r($data); //Getting All data here from form but not getting File values
}
?>

possible duplicate of [ng-model for ](http://stackoverflow.com/questions/17063000/ng-model-for-input-type-file) — Anik Islam Abhi, Sep 11 '15 at 12:28

score 1 · Answer 1 · answered Sep 11 '15 at 12:59

If you want to send it to a server you can't just receive the file and send it, sometimes you have to transform it in a blob or something.

I found this fiddle

don't know if it works but you can try. (stupid stackoverflow makes me put code after a fiddle link, wtf!)

Or else you can use angular-file-upload, at least was what I used when I tried to do something like that. But I was using nodejs on the server and even on server I had to receive using another library specific for the situation. Dunno how it works with php.

GL!

score 0 · Answer 2 · answered Aug 04 '17 at 10:43

This may be old question but i came across same problem and this is how i fixed it.

add this code to registerController.js

function getPath() {
        $('#filePath ').on('change',function ()
        {
            var filePath = $(this).val();
            $scope.fileURL = filePath;
        });
    }
getPath();

$scope.fileURL will then hold the data/value for the input file. you can then set user.image_file to be this value "$scope.fileURL" and your html should be

<input id="filePath " type="file" ng-model="user.image_file" name="image_file">

hope this helps

How to get values of input type file in angularjs?

2 Answers2