React: onChange ์ด๋ฒคํŠธ๊ฐ€ Mozilla ๋ฐ IE์—์„œ type=file React js/Redux์— ๋Œ€ํ•ด ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 12์›” 07์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๋‚˜๋Š” js์— ๋ฐ˜์‘ํ•˜๋Š” ๊ฝค ์ƒˆ๋กœ์šด ์‚ฌ๋žŒ์ž…๋‹ˆ๋‹ค. ์ž…๋ ฅ ์œ ํ˜•=ํŒŒ์ผ ์ž‘์—…์ด 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)
Unconfirmed

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ณด๊ณ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @githubitsme! ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ์ถ•์†Œ๋œ ์˜ˆ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? https://jsfiddle.net/reactjs/69z2wepo/ ๋ฅผ ์ถœ๋ฐœ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ ์˜ˆ์ œ์— ๋งŽ์€ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฐ Redux์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ํ†ตํ•ฉ์ด ํฌํ•จ๋œ ๊ฒฝ์šฐ ๋””๋ฒ„๊ทธ๋ฅผ ๋•๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

@cristian-eriomenco ์ถ”๊ฐ€ํ•  ๋‚ด์šฉ์ด ์—†์œผ๋ฉด ๋Œ“๊ธ€์„ ๋‹ฌ์ง€ ๋งˆ์„ธ์š”. ๋„์›€์ด ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”!

๋ชจ๋“  3 ๋Œ“๊ธ€

๊ฑฐ์‹œ๊ธฐ๊ฐ€ ๋˜๋ ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ asdfasdftrytospotthisasdfasdf, ๋‚ด ๋ง์„ ์•ˆ๋‹ค๋ฉด.

๋ณด๊ณ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @githubitsme! ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ์ถ•์†Œ๋œ ์˜ˆ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? https://jsfiddle.net/reactjs/69z2wepo/ ๋ฅผ ์ถœ๋ฐœ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ ์˜ˆ์ œ์— ๋งŽ์€ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฐ Redux์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ํ†ตํ•ฉ์ด ํฌํ•จ๋œ ๊ฒฝ์šฐ ๋””๋ฒ„๊ทธ๋ฅผ ๋•๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

@cristian-eriomenco ์ถ”๊ฐ€ํ•  ๋‚ด์šฉ์ด ์—†์œผ๋ฉด ๋Œ“๊ธ€์„ ๋‹ฌ์ง€ ๋งˆ์„ธ์š”. ๋„์›€์ด ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”!

์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์žฌํ˜„ ์˜ˆ์ œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰