I want to let the user only upload *.txt file with the Angular JS File Upload Plugin (). I have the following problem:

Somehow, when I drag a .txt-file to the dropbox, the class of the dropbox div does not change to the accept-class (= "dragover") but will be the reject-class (= "dragover-err"). Does anybody see the error?

HTML:

<input id="upload" type="file" ng-model="files" ng-file-select="onFileSelect($files)" ng-accept="'.txt'">
<button ng-click="clickUpload()" class="button-file-upload">Datei hochladen</button>

<div ng-file-drop ng-model="files" class="drop-box"
        ng-multiple="false" allow-dir="false"
        ng-accept="'.txt'" ng-show="!fileUploadFinished"                 
        drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

<div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>

JS:

app.controller('fileUploadCtrl', function($rootScope, $scope, $upload) {
    $scope.fileUploadFinished = false;

    $scope.$watch('files', function () {
        $scope.onFileSelect($scope.files);
    });

    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'system/upload.php',
                method: 'POST',
                file: file
            }).progress(function(evt) { 
                 // progress bar ... 
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
            });
        }
    };
});

Edit: I adapted the fiddle by the creator of the plugin and added the accept and ng-class directives with the goal of getting a green border ONLY when you drag a txt-file. It still does not work. Anybody maybe knows the trick? /

I want to let the user only upload *.txt file with the Angular JS File Upload Plugin (https://github./danialfarid/angular-file-upload). I have the following problem:

Somehow, when I drag a .txt-file to the dropbox, the class of the dropbox div does not change to the accept-class (= "dragover") but will be the reject-class (= "dragover-err"). Does anybody see the error?

HTML:

<input id="upload" type="file" ng-model="files" ng-file-select="onFileSelect($files)" ng-accept="'.txt'">
<button ng-click="clickUpload()" class="button-file-upload">Datei hochladen</button>

<div ng-file-drop ng-model="files" class="drop-box"
        ng-multiple="false" allow-dir="false"
        ng-accept="'.txt'" ng-show="!fileUploadFinished"                 
        drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

<div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>

JS:

app.controller('fileUploadCtrl', function($rootScope, $scope, $upload) {
    $scope.fileUploadFinished = false;

    $scope.$watch('files', function () {
        $scope.onFileSelect($scope.files);
    });

    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'system/upload.php',
                method: 'POST',
                file: file
            }).progress(function(evt) { 
                 // progress bar ... 
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
            });
        }
    };
});

Edit: I adapted the fiddle by the creator of the plugin and added the accept and ng-class directives with the goal of getting a green border ONLY when you drag a txt-file. It still does not work. Anybody maybe knows the trick? http://jsfiddle/nmdcwf3w/166/

• javascript
• angularjs

3 Answers 3

Your code have a watch in it if you remove then your code will be working fine.

HTML

<div ng-app="myApp">
    <div ng-controller="fileUploadCtrl">


<div  ng-model="files" class="drop-box"
        ng-multiple="false" allow-dir="false"
        ng-accept="'.txt'" ng-show="!fileUploadFinished"                 
        drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

<div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
    </div>
    </div>

Js

var app = angular.module('myApp', ['angularFileUpload']);

app.controller('fileUploadCtrl', function($rootScope, $scope, $upload) {

     $scope.$watch('files', function () {
        $scope.onFileSelect($scope.files);
    });
    $scope.fileUploadFinished = false;
    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'system/upload.php',
                method: 'POST',
                file: file
            }).progress(function(evt) { 
                 // progress bar ... 
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
            });
        }
    };
});

Updated js link

write ng-file-select after ng-file-drop

Just replace div tag with below code in JSFIDDLE:

<div ng-file-drop  ng-file-select ng-model="files" class="drop-box" ng-multiple="false" allow-dir="false" ng-accept="'.txt'" ng-show="!fileUploadFinished" drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

I've had the same problem. It's because I forgot to add

ngf-pattern="'image/*'"