ngf-accept and drag and drop

[chriswong929]

When I have a div with both drag-and-drop and file select functionality, and I am also using ngf-accept, ngf-accept does not work properly.

For example, in the code demo (http://jsfiddle.net/18yao91v/), we have accept="image/*,application/pdf"
However, we are still able to drag and drop unaccepted file types into the div. Even though the file select modal restricts unaccepted file types, the drag and drop portion does not.

If, however, we are using ngf-accept="'image/*,application/pdf'"
Then the file select modal no longer restricts unaccepted file types anymore (we can file select a zip file). Specifically, it no longer denies the option to select an incorrect file type but if we try to upload a file of the wrong type, it actually does not complete the upload.

However, using ngf-accept instead of just accept will force drag and drop to no longer accept incorrect file types.

This can be reproduced by going to http://jsfiddle.net/18yao91v/ and changing the line accept="image/*,application/pdf" to ngf-accept="'image/*,application/pdf'"

[danialfarid]

ngf-accept is for filtering the files after selection or being dropped.
accept is only for the select popup and is browser specific.
There are notes for them in the readme file.

[marcelchastain]

@chriswong929 @danialfarid
I ran into the same issue and resolved it, though there might be a better solution.

Core of the problem is that the call to else if (upload.validate(...)) in upload.updateModel is completely ineffective, in that it always calls the callback (with $timeout(update())) whether it passes validation or not. I modified mine to explicitly check for invalids:

        if (noDelay) {
          update();
        } else if (upload.validate(files, ngModel, attr, scope, upload.attrGetter('ngfValidateLater', attr), function (validations) {
            var invalid = false;
            angular.forEach(validations, function(val) {
              if (!val.valid) {
                invalid = true;
              }
            });
            if (!invalid) {
              $timeout(function () {
                update();
              });
            }
          }));

I also think there's a nesting/logic error in validateSync that causes it to never add invalid items to ngModel.$ngfValidations. Here's my fix:

      function validateSync(name, validatorVal, fn) {
        if (files) {
          var dName = 'ngf' + name[0].toUpperCase() + name.substr(1);
          var i = files.length, valid = null;

          while (i--) {
            var file = files[i];
            var val = attrGetter(dName, {'$file': file});
            if (val == null) {
              val = validatorVal(attrGetter('ngfValidate') || {});
              valid = valid == null ? true : valid;

            }
            if (val != null) {
              if (!fn(file, val)) {
                file.$error = name;
                file.$errorParam = val;
                files.splice(i, 1);
                valid = false;
              }
            }
            // THE FIX: this is INSIDE the while loop. Buggy version had it outside.
            if (valid !== null) {
              ngModel.$ngfValidations.push({name: name, valid: valid});
            }
          }
        }

[danialfarid]

@marcelchastain for the first one the idea is that ngf-change and ng-model should be always updated even if there is validation issue so you would know what files are selected, to check the validation issue you can check it through the containing form or the $error property of the file itself and show the appropriate error to the user. Let's say if you want to show the size or type of the file in error to the user then you have to call update.

For the second one the reason it is outside the loop is that $ngfValidations are for the form input file validation and for the whole file select not individual files. So if any of the files have for example maxSize error then the form input will have the myForm.myFileInput.$error.maxSize set to true. But to check which files have specifically that issue you would check file.$error.

[danialfarid]

ngf-valid-only directive is added in version 8.0.1 which could be useful for your case.