Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° 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)
ΠΠ΅ ΠΏΡΡΠ°ΡΡΡ Π±ΡΡΡ ΠΌΡΠ΄Π°ΠΊΠΎΠΌ, Π½ΠΎ: asdfasdftrytospotthisasdfasdf, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΠΎ ΡΠ΅ΠΌ Ρ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΎΡΡΠ΅Ρ @githubitsme! ΠΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ https://jsfiddle.net/reactjs/69z2wepo/ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΡΠ΄Π½ΠΎ ΠΏΠΎΠΌΠΎΡΡ Π² ΠΎΡΠ»Π°Π΄ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΎΠ² ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΉ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Redux.
@cristian-eriomenco, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ΡΠ΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, ΡΡΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΎΡΡΠ΅Ρ @githubitsme! ΠΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ https://jsfiddle.net/reactjs/69z2wepo/ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΡΠ΄Π½ΠΎ ΠΏΠΎΠΌΠΎΡΡ Π² ΠΎΡΠ»Π°Π΄ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΎΠ² ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΉ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Redux.
@cristian-eriomenco, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ΡΠ΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, ΡΡΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!