Uploaded files list is cleared everytime file-select is clicked.

[dejavu1987]

The file list is reset everytime the file-select is clicked,
resetModel(evt); // inside clickHandler()
I wanted to add files one after another to the field but whenever I click on file select the uploaded list is cleared. It would be nice if this is configurable through attributes.

[danialfarid]

The best is to add the selected files to another scope variable.
That allows you to have more control over selected files and allow the user to deletes the ones that are selected by mistake.
The actual input file element model value should be attached to what the element value is, which is the current selected files, so if you select another file the actual value of the file input will change and I believe the model value should be reflective of that value.

[chuan-su]

+1

[danialfarid]

Since version 5.0,0 you can use ngf-keep to keep adding the files to the same model

You can also play with ngf-reset-on-click and ngf-reset-model-on-click since version 5.0,0
but make sure you test on different browsers.

[dejavu1987]

Thanks Danial .. I ll check that out.

[gkohen]

@danialfarid first of all I wanted to thank you for this great component. A follow-up question on your comment: Are ngf-reset-on-click and ngf-reset-model-on-click actually implemented? I have three components pointing to the same ng-model (one preview div and two buttons with ngf-select)
When I wanted to remove the 'click' from the updateOn, so that resetModel will not run, the model was not updated when an image was selected in file dialog. I've used the following:
ng-model-options="{updateOn: 'change drop dropUrl paste select', allowInvalid: true, debounce: 0}"

[danialfarid]

@gkohen You should use ng-model-options for reset. use ng-model-options="{updateOn: 'change drop dropUrl paste'}

[gkohen]

@danialfarid, I've added these options in all the fields that have ngf-select. When I did, for some reason when selecting an image in the file dialog, the preview element stopped updating the image for the selected file. My md-model-options look as follows:
ng-model-options="{updateOn: 'change drop dropUrl paste', allowInvalid: true, debounce: 0}"
Funny thing is that even if I use the following, which should mimic the default behavior - the bad behavior persists:
ng-model-options="{updateOn: 'change drop dropUrl paste click', allowInvalid: true, debounce: 0}"

Removing the debounce does not seem to make a difference.

[danialfarid]

Could you create a jsfiddle? Do you have ng-model on that element?

[gkohen]

Here's the default behavior:
https://jsbin.com/nekeha/7/edit?html,css,js,output
Here's one with the suggested md-model-options:
https://jsbin.com/nekeha/9/edit?html,css,js,output

[danialfarid]

That's so weird it works on the demo page. Adding 'default' to the actions makes it work but it could be the md library that does something funny here.

[danialfarid]

By the way reset on click is the default behaviour in Chrome. So even if you remove the click it would still remove the file from the input if you click browse and then cancel the popup. So removing the click from updates would make it not behave the same cross browser.

[gkohen]

I'm fine with Chrome clearing out the content of the model if you do cancel (although it will be a nice workaround to have to preserve it using a watch). Is it a chrome default to clear it when the file dialog opens and you actually select rather than doing cancel? Also, are we sure that Angular Material might be causing it rather than the fact we're not dealing with a file type form element? Should I try to create a snippet without Angular Material and see if the issue persists?
Sorry for the long list of question, but I wanted to get a better idea how we can solve it for the users having the same issue.

[danialfarid]

When you actually select it won't clear it. It will just replace it.
I'm not too sure since those options seems to work on the demo page, so that's why I am saying it could be angular material.
I would suggest to just keep the default behaviour and deal with click by checking for null on file select. That would make it behave the same cross browser and a null check is not a big deal.

[gkohen]

Danial, maybe I mis-communicated. the issue I see in default behavior is the model clearing when you open the file dialog, not when I press cancel or select a file. How would checking for null when we select a file in the file dialog would help? Did you mean putting a callback on file select?

[danialfarid]

Since chrome removes the file when you open the dialog and close it, the model should be cleared to handle this case. If you select another file the model will be updated with the new file. If you want to keep the files that user selects you can use ngf-keep.

[gkohen]

At this point I made the following workaround:

1. Removed ng-model attribute.
2. Added an ngf-select handler which check when it's called that they were actual files being selected before updating a controller member. In my case only a single file can be selected at a time.
   ngf-keep in my case just kept accumulating files.