Invalid file types are correctly not added to the model but turn the form invalid

[joaocmfcm]

So I have this snippet which actually works fine adding multiple files on multiple drags/selects, until I add an invalid file type. The invalid file type is not added to the model but will make the form invalid. The form becomes valid again when I add/append another valid file to the list. I tried put allowInvalid false, ngf-valid-only but none of them solve my problem. Always get the form.files.$error = {"pattern":true} when adding an invalid file.
How can I make these unsupported file types not turn the form invalid?

<div name="files" ngf-drop ngf-select ng-model="ui.files" class="drop-box"  
   ng-model-options="{allowInvalid: false}"
   ngf-drag-over-class="{accept:'dragover', reject: 'reject-dragover'}" 
   ngf-multiple="true" ngf-allow-dir="true"
   accept="{{ui.validFileTypes}}" ngf-keep="true" ngf-valid-only="true"
   ngf-change="filesChanged()"
   ngf-pattern="ui.validFileTypes" required>
</div>

[stevehealy]

Same problem here.

Need a way to stop invalid files being added to the model, and also keep the form valid.

[ccostel]

So is there a fix for this? I am encountering the same issue as OP.

[joaocmfcm]

Hi there,
I ended up with a simple solution using ngf-change and ngf-model-invalid on my file input:
ngf-model-invalid="invalidFiles" ngf-change="validateFile($invalidFiles)"

then, on the controller:

//UI method that is triggered when files are changed resetting the sendFaxForm validity
$scope.validateFile = function($invalidFiles){
   //https://github.com/danialfarid/ng-file-upload/issues/1593
  if($invalidFiles && $scope.sendFaxForm.files.$error.pattern){
     $scope.invalidFiles = [];
     $scope.sendFaxForm.files.$setValidity('pattern', true);
     ModalService.displayInfoModal(UtilsService.createModalMessage('INFO.INFO', null, 'INFO.SEND_FAX_INVALID_FILE_TYPE'));
   }
   $scope.ui.progress = 0;
};

Hope this helps you

[danialfarid]

You can use ngf-ignore-invalid="'pattern'" to achieve this since version 12.1.0

[stevehealy]

Thanks @danialfarid.
Do you have a list of parameters you can use with ngf-ignore-invalid ? I'm not sure exactly how it should be used - the docs don't explain completely.
I tried adding the line you pasted above but it didn't fix the issue for me. Maybe I need different parameters.

[danialfarid]

That is the name of the error which is specified on each validation directive.

[danialfarid]

You can test it on the demo page by removing accept and setting ngf-ignore-invalid to pattern

[jonathan-chin]

I was still having trouble with ngf-ignore-invalid. invalid files weren't being added but the form was still being set as invalid. I checked the source and found a logic typo.

#1685 should fix it

now, if there were a way to ignore invalid files (not validate them) but still give a message? I've tried other fixes in the forums but my form has other fields in it that I want to check.

[danialfarid]

@jonathan-chin ignore-invalid is there to ignore the validation so you it won't be validating those. If you want it to be validated you can just let it be validated and in the ngf-model-invalid check for the validations that you want to ignore.

[stevehealy]

@danialfarid How can I use ngf-ignore-invalid when I have a custom validation function using ngf-validate-async-fn?

I tried this, but it's not working...
ngf-ignore-invalid="'validateAsyncFn'"

[danialfarid]

That should work, What's the value of the file.$error in the case the validation fails?

[stevehealy]

When I print the error value for the content in ngf-model-invalid - it only says the following - "validateAsyncFn"

This is the full form error (validateAsyncFnis mentioned at the start and at the end):

{"validateAsyncFn":[{"$viewValue":[],"$modelValue":[],"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null,null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":false,"$dirty":true,"$valid":false,"$invalid":true,"$error":{"validateAsyncFn":true},"$name":"imageForm","$options":null,"$ngfValidations":[{"name":"maxHeight","valid":true},{"name":"minHeight","valid":true},{"name":"maxWidth","valid":true},{"name":"minWidth","valid":true},{"name":"dimensions","valid":true},{"name":"ratio","valid":true},{"name":"maxRatio","valid":true},{"name":"minRatio","valid":true},{"name":"maxDuration","valid":true},{"name":"minDuration","valid":true},{"name":"duration","valid":true},{"name":"validateAsyncFn","valid":false}]}]}

[danialfarid]

Can you create a jsfiddle or test it on the demo page?

[stevehealy]

@danialfarid Here you go - the button still becomes invalid if an image is used outside the specified dimensions.

http://jsfiddle.net/n0Ly4aax/7/

[danialfarid]

This is working as expected for me: http://jsfiddle.net/z08x4ubk/

[stevehealy]

@danialfarid I'm still seeing the same problem.

In your example, when I select an image with invalid dimensions - the form button still turns invalid - it is not ignoring validateAsyncFn.
(unlike maxSize, which does work)

[danialfarid]

@stevehealy fixed at 12.2.9

[stevehealy]

Verified. Many thanks.

[dimoreno]

@danialfarid How can I show my images thumbnail. for example I have this https://es.stackoverflow.com/questions/90609/error-al-mostrar-preview-de-imagen-en-angularjs
`

photo_camera Agrega imagen 1...

photo_camera Agrega imagen 2...

`
I want to show thumbnail of 2 images but always show in ng-model number 1
How can I fix that?