import { changeProfilePic, UPDATE_PROFILE_PIC, UPDATE_PROFILE_PIC_FAILURE, updateProfilePicFailure } from '../actions/settings'; import { Field, reduxForm } from 'redux-form'; import React, { Component } from 'react'; import FormField from '../components/FormField'; import LoadingSpinner from '../components/LoadingSpinner'; import PropTypes from 'prop-types'; class SettingsImg extends Component { constructor(props) { super(props); this.state = { mustBlock: false } this.handleSubmit = this.handleSubmit.bind(this); } base64(file, callback) { const fileObj = {} const readerOnload = e => { const base64 = btoa(e.target.result); fileObj.base64 = base64; callback(fileObj); } const reader = new FileReader(); reader.onload = readerOnload; fileObj.filetype = file.type; fileObj.size = file.size; fileObj.filename = file.name; reader.readAsBinaryString(file); } handleSubmit(values) { const { dispatch } = this.props; if (values.settingsImg.length > 0) { this.setState({ mustBlock: true }); this.base64(values.settingsImg[0], data => { if (data.filetype === 'image/jpeg' || data.filetype === 'image/png') { dispatch(changeProfilePic({encodedFile: data.base64 })) .then(response => { if (response.type === UPDATE_PROFILE_PIC || response.type === UPDATE_PROFILE_PIC_FAILURE) { const delay = response.type === UPDATE_PROFILE_PIC ? 1500 : response.type === UPDATE_PROFILE_PIC_FAILURE ? 200 : 50; setTimeout(() => this.setState({ mustBlock: false }), delay) } }); } else { dispatch(updateProfilePicFailure('Please upload a valid image file – png or jpg.')) .then(this.setState({ mustBlock: false })); } }); } } render() { const { mustBlock } = this.state; return (