Angular JS ng file upload

Question

i'm using Angular's JS well known ng file upload directive (https://github.com/danialfarid/ng-file-upload) in a project i'm working on, but i'm having an issues regarding validations. I added the ngf-pattern directive, in order to prevent users from uploading certain file formats. This works well, and each invalid file is available in the $invalidFiles array. Is there anyway to clear this array?

I am using $invalidFiles array in order to detect when invalid file was used, and alert the user. The file is not displayed in the UI, and not added to my model, but still I cannot submit the form because the form is invalid. only after I add a valid file I can submit the form. Is there a way to detect invalid files but still be able to submit the form ?

Hope I was clear.. Thanks!

yes! you can find it here: jsfiddle.net/2vq88rfs/631 . if you add invalid file it won't be added to the model, it will be added to the error files array and the form will be invalid until a valid file will be added. I just want to be able to catch the error, but still submit the form (if before some valid files were already added). hope it helps.. — tsahnar
– tsahnar, Commented Apr 26, 2016 at 21:03
@tsahnar if you want to submit an invalid form then what is the point of knowing if the form is valid or not? — Sarantis Tofas
– Sarantis Tofas, Commented Apr 26, 2016 at 23:04

Sampath · Accepted Answer · 2016-04-26 21:58:51Z

1

Is this what you need : JsFiddle

$scope.submit = function() {
    alert('form is ready');
   }

answered Apr 26, 2016 at 21:58

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tsahnar Over a year ago

now you removed the condition that checks if the form is valid or not., so it misses the whole point

Sampath Over a year ago

You can still catch the errors and also form can be submitted no ? If not what do you need ?

kavare · Accepted Answer · 2016-04-26 22:36:20Z

0

Probably the thing you really need is ngf-change rather then ngf-select. Based on the documentation, the handler function you assign to ngf-change directive would be called whenever you select, drop, or cleared.

If the only thing you want to achieve is to allow form submission regardless it's valid or invalid, another approach would be leveraged on ng-model-options. There is an option called allowInvalid, by default it's false, set it to true would do the trick.

So in your example:

<button name="bla" multiple accept="image/*"              
        ngf-keep="true" 
        ng-model="myFiles" 
        ngf-pattern="'image/*'" 
        ngf-max-size="1MB"
        ngf-change="handleFiles($files, $invalidFiles)"
        ngf-model-options="{allowInvalid: true}">
  Select Files
</button>

Notice the last two directives we have changed here.

For full reference, you may check the official document at the section of Full reference - File select and drop

answered Apr 26, 2016 at 22:36

kavare

1,8162 gold badges19 silver badges27 bronze badges

1 Comment

kavare Over a year ago

@tsahnar no worry, feel free to vote it up if it works for you.

Collectives™ on Stack Overflow

Angular JS ng file upload

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related