ng-file-upload is accepting any file type when ngf-accept="'image/*'"

been uploading text files using this button, the check on the file type isn't working for me, the file is considered valid.

    <button ng-hide="uploading" class="btn centered" type="file"
ngf-select="uploadFiles($file, $invalidFiles)" accept="'image/*'"
ngf-max-size="4MB" ngf-accept="'image/*'">
  {{(boardingData.profile_pic_url) ? "Change Photo" : "Upload a Photo"}}
</button>

Solution

We use ng-file-upload fairly heavily in our app, but we do not use the ngf-accept directive. However, you don't need to use this to be able to filter the file type being passed in. Assuming you had the following <div> for dragging:

<div ngf-drop="" ng-model="files" class="some_class_here" ngf-allow-dir="false">

Then there would be a scoped variable in your controller called $scope.files. You can simply check the type attribute of $scope.files to see what the file type is. If you wanted to check for files beginning with image/, then you could use this:

if ($scope.files.startsWith("image/")) {
    console.log("You dragged an image file");
    // or whatever your logic is
}

You can handle the file type appropriately from your controller with this information. Note that not all files show up as having a type, which is something to also keep in mind.