React: Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ onChange Π½Π΅ запускаСтся Π² Mozilla ΠΈ IE для type=file React js/Redux

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 7 Π΄Π΅ΠΊ. 2016  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: facebook/react

Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° js. Π― Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ смущСн, ΠΏΠΎΡ‡Π΅ΠΌΡƒ дСйствиС input type = file Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Mozilla, Π° IE ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Chrome. Π― Π½Π΅ понимаю, ΠΏΠΎΡ‡Π΅ΠΌΡƒ это Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ... Π­Ρ‚ΠΎ ошибка

 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)

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Бпасибо Π·Π° ΠΎΡ‚Ρ‡Π΅Ρ‚ @githubitsme! НС ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ привСсти ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ воспроизводит ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ? Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ https://jsfiddle.net/reactjs/69z2wepo/ Π² качСствС ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ. К соТалСнию, Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ содСрТит ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΎΠ² ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΉ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Redux.

@cristian-eriomenco, поТалуйста, Π½Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅, Ссли Π²Π°ΠΌ Π½Π΅Ρ‡Π΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, это бСсполСзно. Бпасибо!

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

НС ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π±Ρ‹Ρ‚ΡŒ ΠΌΡƒΠ΄Π°ΠΊΠΎΠΌ, Π½ΠΎ: asdfasdftrytospotthisasdfasdf, Ссли Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, ΠΎ Ρ‡Π΅ΠΌ я.

Бпасибо Π·Π° ΠΎΡ‚Ρ‡Π΅Ρ‚ @githubitsme! НС ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ привСсти ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ воспроизводит ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ? Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ https://jsfiddle.net/reactjs/69z2wepo/ Π² качСствС ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ. К соТалСнию, Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ содСрТит ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΎΠ² ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΉ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Redux.

@cristian-eriomenco, поТалуйста, Π½Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅, Ссли Π²Π°ΠΌ Π½Π΅Ρ‡Π΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, это бСсполСзно. Бпасибо!

Для этого понадобится воспроизводящий ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ