ng-file-upload file.$valid is undefined

Question

I'm trying to implement file uploading using the Angular [ng-file-upload[(https://github.com/danialfarid/ng-file-upload) directive. I've followed the docs as closely as possible. I want the user to be able to fill in a form, attach an image, and hit the submit button. When that occurs, I then want to send the file and form input fields as json to the server.

When I run my check to see if image.$valid is true, I get an error ``. I'm not sure what I'm missing here.

Here is my controller:

var app = angular.module('myApp', ['ngAnimate','ui.bootstrap', 'ngFileUpload']);

app.controller('NewPostQuestionCtrl', ['$scope', '$http', 'Upload', function($scope, $http, Upload) {
    $scope.image = {};
    $scope.form = {};
    $scope.postQuestion = {
        token: $scope.token,
        employer_id: $scope.employer_id,
        question: $scope.question,
        published: $scope.published
    };

    $scope.submit = function(postQuestionAttributes, image) {
        console.log(postQuestionAttributes.$valid)
        console.log(image.$valid)
        if (image && image.$valid && !image.$error && postQuestionAttributes.$valid) {
            $scope.upload(image, postQuestionAttributes);
        }
    };

    $scope.upload = function(file, postQuestionAttributes) {
        Upload.upload({
            url: 'cms/posts',
            fields: postQuestionAttributes,
            file: image
        }).progress(function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
        }).success(function (data, status, headers, config) {
            console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
        }).error(function (data, status, headers, config) {
            console.log('error status: ' + status);
        })
    };
}]);

Here is my form:

<form accept-charset="UTF-8" name="form.postQuestionForm" ng-submit="submit(postQuestion, image)" class="new_post_item" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="postQuestion.token" ng-init="postQuestion.token='<%= form_authenticity_token %>'">
    <input name="employer_id" type="hidden" ng-model="postQuestion.employer_id" ng-init="postQuestion.employer_id='<%= current_employer.id %>'">

    <div class="form-group">
        <label>Question</label>
        <textarea class="question-textbox" name="question" ng-model="postQuestion.question" required></textarea>
    </div>

    <div class="form-group">
        <label>Image</label>
        <div class="button" ngf-select ng-model="image" name="image" ngf-pattern="image/*" accept="image/*" ngf-max-size="150KB" required>Select</div>
    </div>

    <div class="form-group">
        <label>Publish Question</label>
        <select class="" name="published" ng-model="postQuestion.published" required>
            <option value="true">Publish</option>
            <option value="false">Don't Publish</option>
        </select>
    </div>

    <input class="submit-btn" name="commit" type="submit" value="Publish Post" ng-disabled="form.postQuestion.$invalid">
</form>

Answer 1

$valid is for the form element not the file, so you can have $scope.form.image.$valid but the file itself would just have the $error related to that individual file. So in your submit code check for $scope.postQuestionForm.image.$valid instead of image.$valid.

But they are all seems redundant checks so in your case checking the validity of the form itself which would mean the all the elements in the form are valid would be enough:

$scope.submit = function(postQuestionAttributes, image) {
    if ($scope.postQuestionForm.$valid) {
        $scope.upload(image, postQuestionAttributes);
    }
};