ng-file-upload issue 1507

by Zoltan Boros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<body ng-app="formUploaderApp">
<div ng-controller="FormUploaderController">
    <form ng-submit="submitFormWithFiles()" name="myForm">
        <span>Field 1: </span>
        <input type="text" ng-model="form.field1" name="field1" required /><br />

        <span>Field 2: </span>
        <input type="text" ng-model="form.field2" name="field2" required />

        <div
            class="file-select-and-drop-area"
            ngf-select
            ngf-drop
            ng-model="files"
            ngf-multiple="true"
            ngf-keep="'distinct'"
            ngf-accept="'image/*'"
            ngf-pattern="'.jpg,.jpeg,.png,.gif'"
            ngf-drag-over-class="{ accept : 'dragover-accept', reject : 'dragover-accept'}">Click here to select images, or drop images here.</div>
        <img ng-repeat="file in files" ngf-src="file" class="preview" />
        <div>
            <span ng-click="reset()" class="button">Reset</span>
            <span ng-click="submitFormWithFiles()" class="button">Submit</span>
        </div>
    </form>
</div>
</body>

CSS

body {
    font-family: sans-serif;
}
input {
    margin: 0.25em 0;
}
.button {
    display: inline-block;
    margin: 0 0.5em;
    padding: 5px 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000000;
    background-color: #b0b0b0;
    cursor: pointer;
}
.file-select-and-drop-area {
    width: 200px;
    margin: 1em 0;
    padding: 10px 15px;
    border: 2px dashed #808080;
    cursor: pointer;
    text-align: center;
}
.file-select-and-drop-area.dragover-accept {
    border-color: #0000ff;
}
.file-select-and-drop-area.dragover-reject {
    border-color: #ff0000;
}
img.preview {
    margin: 5px;
    height: 100px;
}

JavaScript

var formUploaderApp = angular.module('formUploaderApp', ['ngFileUpload']);
formUploaderApp.controller('FormUploaderController', ['$scope', 'Upload', FormUploaderController]);

function FormUploaderController($scope, Upload)
{
    var reset = function()
    {
        $scope.form = {
            field1 : '',
            field2 : ''
        };
        $scope.files = undefined;
    };

    reset();
    $scope.requestInProgress = false;

    var responseHandler = function(response)
    {
        if (response.data == 'Ok.') {
            console.log('Ok.');
            reset();
        } else {
            console.log('Nok.');
        }
        $scope.requestInProgress = false;
    };

    $scope.submitFormWithFiles = function()
    {
        if ($scope.myForm.$invalid) {
            return;
        }
        if ($scope.requestInProgress) {
            return;
        }
        $scope.requestInProgress = true;

        //Upload.upload({
        //    'url'  : '/',
        //    'data' : {
        //        'form'  : $scope.form,
        //        'files' : $scope.files
        //    },
        //    'objectKey' : '[k]',
        //    'arrayKey' : '[i]'
        //}).then(responseHandler, responseHandler);
    };

    $scope.reset = function()
    {
        if ($scope.requestInProgress) {
            return;
        }
        reset();
    };
}