Why new FileReader is not working in Mozilla and Interner Explorer React/redux

Question

I am pretty new to React and redux.I am trying to write simple Image upload and get blob data for preview and upload.But my code is working in chrome But not in mozilla and Internet explorer I updated my mozilla yesterday.But I don't know why.I know there are lot of answer out ther but nothing worked for me

    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';

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);
        this.handleFileUpload = this.handleFileUpload.bind(this);

    }
    UnHovered(){
        this.props.toggleMenu(false);
    }
    uniqueNameAndId(){
        return uuid.v1().replace(/-/g, '');
    }
    handleFileUpload(e){
         e.preventDefault();
//Not working in Mozilla and Internet Explorer
         const file = e.target.files;
        console.log(file.length)//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} 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))
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)