Comments (10)
bug still exists in edge version.
Can be fixed by putting ngFileSelect outside of and using the for
attribute on label to relate it to the input.
example:
<label for="fileSelectId">
<!--Other contents here-->
</label>
<input id="fileSelectId" ngFileSelect type="file" class="hidden" />
from ngx-uploader.
Is this issue still present? Can you please check the new version on Edge and let me know? Thanks.
from ngx-uploader.
This issue is still present. Just use your demo page with the Edge browser.
from ngx-uploader.
Unfortunatelly I don't have access to any Windows machine at the moment but when I got a chance I'll try to resolve this.
from ngx-uploader.
I was able to resolve this problem in the earlier version of your component, but didn't have the time to submit a pull request. Sorry for that.
The problem, as far as i can remember, happens because you've used a label element in your example html to capture user's clicks. The label element bubbles up the click event to the container div element, which in case of Edge raises the click event of the contained elements (including the label element) back again. The label then bubbles up the event again, and so the cycle goes on forever.
Conclusion: If you remove the label, and design your file upload UI using div only, it solves the problem. Here is the final html i ended up with upon resolving the Edge browser issue (you'll have to adjust your css accordingly) :
<div class="file-upload upload-btn is-success" [ng-file-drop]="options" (onUpload)="handleMultipleUpload($event)">
<img src="./css/img/files-sm.svg" style="margin-bottom:20px" />
<br/> Click here or drag/drop you files in this box to upload
<input type="file" multiple [ng-file-select]="options" (onUpload)="handleMultipleUpload($event)">
</div>
<div class="progress">
<div class="progress-bar" [style.width]="multipleProgress + '%'"></div>
<span class="percent"><span class="number">{{ multipleProgress }}</span> %</span>
</div>
Hope this helps!
from ngx-uploader.
Here is a stackoverflow thread that talks about a similar issue i guess:
Label is the culprit. Don't catch me on my explanation above though if it turns out to be inaccurate as it's been some time since i troubleshoot this issue, but whatever explanation there may be, i surely remember that it was caused by the label! :)
from ngx-uploader.
@aghaasif thanks a lot for you comment. Basically its not the problem with the component but with the directive assigned to html
element.
from ngx-uploader.
@jkuri yes, the problem is not with your component, but it is related to your example. I'm sure most of the developers who'd use your component will copy paste the code from your examples, so i recommend you fix the bug in there before it ends up destroying planet earth :)
from ngx-uploader.
Haha, thats funny ;) will do it.
from ngx-uploader.
Any news regarding this? Problem still exits in Edge.
from ngx-uploader.
Related Issues (20)
- Update Peer Dependencies to Support Angular 9 HOT 3
- Angular v9 support HOT 1
- Upload Folder as Zip file
- ngx-uploader.com HOT 2
- Uploading multiple files with distinct/unique filenames
- graphql / apollo client support HOT 1
- .Rar files type detection
- Fix peer Warning for Angular 10.2.x
- Upload same file multiple times ignores subsequent upload HOT 3
- NgUploaderService Example
- No release since 2016/2017? HOT 3
- Importing NgxUploaderModule which does not have a ɵmod property
- Disallowing multiple file drop on a single file input
- Feat: Angular 13 Update | Enable Ivy HOT 5
- ngx-uploader - UploadInput event url with local proxy.conf
- Server reports an error when uploading a file, but output.type is showing as 'done' instead of 'rejected'
- Angular v16 does not support view engine - please switch to ivy HOT 1
- Not all response headers are returned
- Build Error HOT 1
- Uploading a bigger file than 4MB caused ERR_CONNECTION_RESET HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-uploader.