React: onChange event is not triggering in Mozilla and IE for type=file React js/Redux

[vignestion]

I am pretty new guy to react js.I am little bit confused why input type=file action is not working in Mozilla and IE it is working fine in Chrome.I don't why it is not working...Is this a bug

 import React from 'react';
        import {connect} from 'react-redux';
        import uuid from 'node-uuid'
        import * as headerAction from '../../Actions/headerActions';
        import * as uploadActions from '../../Actions/uploadActions';
        import * as notificationActions from '../../Actions/notificationActions';
        import shortid from 'shortid'

        class Header extends React.Component{
            static contextTypes = {
                router:React.PropTypes.object
            };

            constructor(props){
                super(props);

                this.Hovered = this.Hovered.bind(this);
                this.UnHovered = this.UnHovered.bind(this);


            }
            UnHovered(){
                this.props.toggleMenu(false);
            }
            uniqueNameAndId(){
                return uuid.v1().replace(/-/g, '');
            }
            //below function not triggered When onChange Event happen But file upload pops up
            handleFileUpload(e){
               //Not working
                 e.preventDefault();
                 this.props.setMainPostId(shortid.generate())

    //Upload for single File not working
                const reader = new FileReader();
               const file = e.target.files;
                console.log(file.length);
                reader.onload = () => {
                    console.log("Hello",file.name)
                };

                let file = e.target.files[0];
                reader.readAsDataURL(file);

        //Upload for Multiple files NOt working
                {/*if(file.length <= 5){*/}
                    {/*for(let i=0;i<file.length;i++){*/}
                //         const Reader = new FileReader();
                //         Reader.onload = () => {
                //             let pushData = {
                //                 postOwnerUsername:null,
                //                 id:this.uniqueNameAndId(),
                //                 name:this.uniqueNameAndId(),
                //                 caption:null,
                //                 blobData:Reader.result
                //             };
                //             console.log(pushData)
                //             this.props.pushtoReducer(pushData)
                //         };
                //         Reader.readAsDataURL(file[i])
                //     }
                //     this.props.removeUploadMenu(false)
                //     this.context.router.push('/upload');
                // }else{
                //     console.log('No Dude')
                //     this.props.popErrorNotification(true,"#FF5D5D","Current Max Photo 5")
                // }




            }
            loggedInMenu(){
                return(
                    <div>

                        <li>Explore</li>
                        <li>My uploads</li>
                        {this.props.toggle.removeUploadMenu ?
                            <li>
                                <label htmlFor="upload-photo">Upload</label>

                                <input onChange={this.handleFileUpload.bind(this)} id="upload-photo" type="file" multiple/>
                            </li>:
                            ""
                        }

                        <li>Profile</li>
                        <li><a href="/logout">Logout</a></li>
                    </div>
                )
            }
            loggedOutMenu(){
                return(
                    <div>
                        <li onClick={()=>this.props.toogleSignInOut(true)}>SignUp/SignIn</li>
                        <li>Explore</li>

                    </div>
                )
            }
            renderMenu(){
                return(
                    <div onMouseLeave={this.UnHovered}>
                        <div  className="dtcen">
                            <div className="dt">

                            </div>
                        </div>

                        <div className="dropdown">

                            {this.props.logInStatus.loginStatus ? this.loggedInMenu():this.loggedOutMenu()}


                        </div>
                    </div>
                )
            }
            Hovered(){

                this.props.toggleMenu(true);
            }
            render(){

               // console.log('From uuis',this.uniqueNameAndId())
                //console.log("Login Status",this.props.toggle.removeUploadMenu)

                return(

                    <header>
                        <div className="logo">
                            <p>Masklor </p>
                        </div>
                        <div className="navtoggle">
                            <div onMouseEnter={this.Hovered} className="triangle">
                                <p>Menu</p>
                            </div>

                            {this.props.toggle.menuToggle ? this.renderMenu() : ""}

                        </div>
                    </header>


                )
            }
        }

        const mapStateToProps = (state) => {
          return{
             toggle:state.toggle,
              logInStatus:state.logInStatus,
              photos:state.photoUpload
          }
        };

        const mapDispatchToProps = (dispatch) => {
            return{
                toggleMenu:bool => dispatch(headerAction.toggleStatus(bool)),
                toogleSignInOut:bool => dispatch(headerAction.toggleSignPop(bool)),
                pushtoReducer:object => dispatch(uploadActions.setPhotosState(object)),
                popErrorNotification:(bool,color,message) => dispatch(notificationActions.popUpNotification(bool,color,message)),
                removeUploadMenu:bool => dispatch(headerAction.removeUploadMenu(bool)),
                setMainPostId:id =>dispatch(uploadActions.setIdforMainPost(id))
            }
        }

        export default connect(mapStateToProps,mapDispatchToProps
)(Header)

[cristian-eriomenco]

Not trying to be a dick but: asdfasdftrytospotthisasdfasdf, if you know what I mean.

[aweary]

Thanks for the report @githubitsme! Could you provide a reduced example that reproduces the issue? You can use https://jsfiddle.net/reactjs/69z2wepo/ as a starting point. Unfortunately, it's hard to help debug when the example contains a lot of imports and integrations with other libraries like Redux.

@cristian-eriomenco please don't comment if you don't have anything to add, it's not helpful. Thanks!

[gaearon]

This will need a reproducing example.