Commit eecf89f3 authored by nano's avatar nano

avatar

parent d1332cc2
...@@ -6,7 +6,7 @@ import { FormattedMessage as Format } from 'react-intl'; ...@@ -6,7 +6,7 @@ import { FormattedMessage as Format } from 'react-intl';
const defaultAvatar = require('../../public/default_avatar.jpg'); const defaultAvatar = require('../../public/default_avatar.jpg');
function UserPanel({ dispatch, user, token }) { function UserPanel({ dispatch, user }) {
const { avatar } = user; const { avatar } = user;
const menu = ( const menu = (
<Menu trigger={['click']}> <Menu trigger={['click']}>
......
...@@ -17,6 +17,14 @@ export default { ...@@ -17,6 +17,14 @@ export default {
}, },
}; };
}, },
abort(state) {
return {
...state,
...{
isUpload: false,
},
};
},
getfile(state, action) { getfile(state, action) {
return { return {
...state, ...action.payload, ...state, ...action.payload,
......
...@@ -49,14 +49,21 @@ class Profiles extends React.Component { ...@@ -49,14 +49,21 @@ class Profiles extends React.Component {
}; };
onGetFile = (e) => { onGetFile = (e) => {
let files; let files = [];
if (e.dataTransfer) { if (e.dataTransfer) {
files = e.dataTransfer.files; files = e.dataTransfer.files;
} else if (e.target) { } else if (e.target) {
files = e.target.files; files = e.target.files;
} }
if (files.length <= 0) {
this.props.dispatch({ type: 'upload/abort' })
return
}
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
this.props.dispatch({ type: 'upload/start' })
this.props.dispatch({ type: 'upload/getfile', payload: { imageUrl: reader.result } }); this.props.dispatch({ type: 'upload/getfile', payload: { imageUrl: reader.result } });
}; };
reader.readAsDataURL(files[0]); reader.readAsDataURL(files[0]);
...@@ -69,13 +76,12 @@ class Profiles extends React.Component { ...@@ -69,13 +76,12 @@ class Profiles extends React.Component {
const { user: { id } } = this.props; const { user: { id } } = this.props;
this.cropper.getCroppedCanvas().toBlob((blob) => { this.cropper.getCroppedCanvas().toBlob((blob) => {
console.log(blob);
this.props.dispatch({ type: 'upload/upload', payload: { image: blob, user_id: id } }); this.props.dispatch({ type: 'upload/upload', payload: { image: blob, user_id: id } });
}); });
}; };
render() { render() {
const { dispatch, form, user, loading, imageUrl, isUpload } = this.props; const { form, user, loading, imageUrl, isUpload } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { name, avatar } = user; const { name, avatar } = user;
const { intl: { messages } } = this.context; const { intl: { messages } } = this.context;
...@@ -119,8 +125,8 @@ class Profiles extends React.Component { ...@@ -119,8 +125,8 @@ class Profiles extends React.Component {
<div style={{ display: !isUpload ? 'flex' : 'none', flexDirection: 'column' }}> <div style={{ display: !isUpload ? 'flex' : 'none', flexDirection: 'column' }}>
<img alt="avatar" src={avatar || imageUrl || defaultAvatar}/> <img alt="avatar" src={avatar || imageUrl || defaultAvatar}/>
<Button onClick={() => { dispatch({ type: 'upload/start' }); }}> <Button style={{ padding: '4px 0' }}>
<label> <label style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Icon type="plus"/><Format id="Change-Avatar"/> <Icon type="plus"/><Format id="Change-Avatar"/>
<input <input
type="file" onChange={this.onGetFile} ref={(file) => { type="file" onChange={this.onGetFile} ref={(file) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment