Re-select same file Problem about angular-file HOT 29 CLOSED

For those of you that get here via the power of google. I had this issue where I would

1. select an image to upload
2. remove it
3. re-select it

and it wouldn't show up anymore until i selected a different image and came back.

This is my workaround. I remove the reference in the code to the image so angular/typescript treats it as empty. Then I target the elements inside the ngfDrop div using a ViewChild. Inside of there, he has an input of type 'file' that is holding the value of the image. Just set it to null and you are good to go.

@ViewChild('dragAndDrop') dragAndDrop: ElementRef;
removeFile() {
this.image = null;
// remove the image from the code and from the input
const label = this.dragAndDrop.nativeElement.childNodes[4];
const input = label.childNodes[1];
input.value = null;
}

from angular-file.

Thank you much for the input.

I think I will add both:

• [selectResetsFileElm]:Boolean = true
• (fileSelectStart) and (filesSelectStart)

I’ll aim to get this done late this week

from angular-file.

@AckerApple
honestly i think that last bit is a bit much, ask for a better report and leave off the rest, i do not think it helps really.
"Evidence points to ya'll are new and maybe making mistakes
You also both don't have github icons
You both dont have real names on github
You both have next to no repositories
Both have next to nill github activity
SO, prove me wrong. Give me more to work with. Update your github accounts to be less creepy to work with."
not helpfull to anyone.

from angular-file.

Sorry buddy but I do disagree. I’m pushing and asking for more of people.

I’m crude, often rude, and it’s for a reason. I’m so not the get along happy words type of person. I dig in, I’ll use evidence of lack of experience against an issue report.

Again, I apologize because I’m not conventional. I’m no Angular be nice to everyone reporting an issue. I’m a bear

from angular-file.

browser trying to be smart, not knowing what that button click was.... kind of an edge case , confusing for the human.....

from angular-file.

Hey peeps. The demo works.

I performed the following:

• On demo page under Select Files
  • Used "Multiple" to select 3 files
  • removed middle file, now 2 files
  • Used "Multiple" to select 1 file
  • I now have 3 files again
• On demo page under Select Files
  • Used "Single" to select 1 file 3 times
  • removed middle file, now 2 files
  • Used "Single" to select 1 file that was removed
  • I now have 3 files again

REFERENCES:

• Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)
• Demo page
• Demo Html reference to splice call

REASON I have trouble believing yall:

• Your issue reports are 2 sentences. Helps no one
• Evidence points to ya'll are new and maybe making mistakes
  • You also both don't have github icons
  • You both dont have real names on github
  • You both have next to no repositories
  • Both have next to nill github activity

SO, prove me wrong. Give me more to work with. Update your github accounts to be less creepy to work with.

Thank you kindly

from angular-file.

Another issue has comes that when i select a file and removed it. And try to re-select same file again then it not fired (fileschange) event.

from angular-file.

I see your point in trying to mimic the browser's native behaviour as closely as possible, so triggering events on each file selection without means of overriding might be too radical. On the other hand, this library does provide a sort of "enhanced" file input element, which in itself offers some added functionality compared to the browser's native input field, so I don't quite see the contradiction in altering the event behaviour. That being said, it wouldn't hurt to provide some means for the developer to distinguish between file selection event's that would have originated from the browser versus the ones that the library emits.

With that in mind, one option would perhaps be to always emit the event and attach some metadata to it explaining where the event originated (browser or lib). The developer can then decide which events to act upon based on that data.

A optional binding also sounds like a reasonable alternative... Intuitively it would feel right with a "fileSelectionEvents" binding (or similar), being either 'browser' or 'all'. I wouldn't expose the "file input reset" as a concept to the user of the library, since it's an internal implementation detail. The way it manifests itself to the developer is the triggering of events either when the browser decides, or on each file select regardless.

I haven't had time to dig any deeper into the code so I can't say which implementation would be more feasible or how the above solutions would affect the other use cases (drop zones etc). Thoughts?

from angular-file.

I am also facing same problem. Can you please help me to fix it ?

from angular-file.

Will review today

from angular-file.

I don't think i am doing a mistake. Sorry for that bug not explained properly. Please watch below video to understand the problem .
https://screencast-o-matic.com/watch/cFfrfubicS

from angular-file.

i can also see the bug.
have not yet looked at the code but it seems to block adding the same file if it had been added and then removed from the upload set.

as if the delete is not removing an internal reference to the file that the add is checking.

from angular-file.

Thank you for the video. I’ll see if I can replicate

from angular-file.

What's happening is a little complex so I must document it here first:

1. A browser file input maintains the last file selected
   1.1 Add file to input and fileName is seen until input.value is changed
2. A browser has built-in logic to avoid selecting the same file twice
3. angular-file never gets called to do anything when same file selected as input.value

Possible Fixes:

• After value selected, maybe null that value. I am uncertain of some side effects this may cause

from angular-file.

Fixed. Please acquire version 0.5.3

If satisfied, close issue.

Seeing past my perceived negativity to stay focused on your goal, is a skill of tolerance. Well done.

Special request. It's not that its creepy, thats just fun chat, but please consider having a legit github profile. If not for nothing else than I would like to better remember the faces of the people I work with.

I won't forget Denny thats fer dern sure. @figuerres, I appreciate you trying to put me in check, I do.

from angular-file.

Thanks to fix it.

from angular-file.

I’ll confirm today

from angular-file.

I am certainly NOT experiencing the same issue you are adding to your initial report.

To the demo page, I have now added (filesChange) to every file selector that reports the date of the last file selected.

Please record a new video and prove to me the filesChange is NOT working on the demo page where we can see that the "Last file selected at" does NOT change.

See attached image to reference new "Last file selected at" item

from angular-file.

Also, be sure you are on 0.5.3 and NOT 0.5.2 .... 0.5.2 does have the issue you mentioned but I published those back to back within an hour of eachother

from angular-file.

Its working. Sorry for error Reporting.
https://stackblitz.com/edit/angular-n7vmvw?file=app%2Fapp.component.html

from angular-file.

I'm experiencing the same problem that no filesChange event is fired when selecting the same file twice. I'm using version 0.5.4 and Chrome 66.0.3359.181. The stackblitz that @mohitpc posted (upgraded to 0.5.4) does not show the modal after selecting the same file a second time, demoing the issue.

My use case is that I want to open a modal right after the user has selected a file. If the user closes the modal and re-selects the same file, the event is not fired and nothing happens.

from angular-file.

This package operates as expected. If you supplied your code, I bet we’d fine you are actually fighting the way the browser works in respect to selecting the same file twice.

Supply some code. Not just copy paste, a plunker or something because again it’s not the code it’s the browsers choice not to fire a file pick event for a same file selection. You may just need to change your approach

from angular-file.

Feel free to use our demo page that I just used to prove it’s working as expected:

https://ackerapple.github.io/angular-file/

from angular-file.

Ok, I narrowed down the problem a bit more. The thing is I was trying to use the directive in a way that seems supported, but is probably actually not meant to be.

I need the user to only select one file, and I want to keep track of only one File in my component. So I'm tracking the file and fileChange bindings to only keep the last selected file in my component and use that. I set up a demo for this.

This works beautifully when the user selects different files each time, but as noticed, when the same file is selected twice there's no browser action. This is due to the fact that the clearing of the fileElem.value (ngf.directive.ts#L209) will never occur since the conditional preceding it (ngf.directive.ts#L206) will always be true.

Force-clearing the last selected file obviously doesn't help since it doesn't alter the File array.

So you probably never meant to have the directive being used as a track-one-file-only input, but it's not far fetched to have it support it.

Looking at the conditional on (L206) I was thinking what it's good for. You probably intend to prevent the user from uploading the same file twice? While this works for two consecutive selects of the same file, it doesn't work when the user selects two files alternatingly, which perhaps makes it somewhat useless.

Removing that conditional, i.e. having the this.fileElm.value = null be run regardless, the use case where we want to track only the last selected file would, in fact, be supported.

Now it's also clear to me that the correct way to use the directive in my case would be to manually clear the File[] array before each file selection, which would enable the nullification of the fileElem.value. I made a demo for that as well.

However, since I don't really see the point of the aforementioned conditional blocking the browser element's clearing, I'd be so bold as to suggest its removal. How do you feel about that?

from angular-file.

My first thought is that it's been forever and a day since I've come across an issue reporter as thorough and as detailed as myself. I much appreciate your efforts and in-fact am generally interested in you and your career.

So yeah I can 100% confirm your findings and your understanding of the choices I have made to respect the browser repeat selection.

However, I am conflicted to just override the browser logic. I would lean more towards a binding, even if defaulted to, this.resetFileElm after selection.

Please take a more professional moment and think globally.... what should we do? My vote is for a default binding of resetFileElm:boolean=true ..... OR is there a better way to be doing this?

I've awaited an experienced opinion such as yours.... Lets get it right cause this shits complicated

from angular-file.

I have reopened this issue as @bostrom has pointed out an edge case issue in which selecting files can still have unexpected results. Not major priority.

Suggested fix is to auto override browser choice to prevent firing file double selecting events

from angular-file.

The solution from @jamesg-gxg, solve my problem, but is a temporary solution.

from angular-file.

@jamesg-gxg Just wanted to say thank you for this workaround.
Small changes, I'm using "angular-fire": "1.0.2", so the childNodes changed a little bit. Hope it helps someone:

const label = this.dragAndDrop.nativeElement.childNodes[1];
const input = label.childNodes[1];
input.value = null;

Anyway, hope to see fix of this bug

from angular-file.

I have release stripe-angular 3.5.0 with the following changes related to this ticket:

## 3.5.0 - (2021-04-22)
- Close #27 regarding click to upload same file twice
  - ngOnChanges is listened to for when files or file is removed then file input elm cleared
- Dependencies updated
- Demo updated with clear buttons next to inputs (select one file, clear, select same file again)
- Added `(fileSelectStart)` output event

from angular-file.