WIP: add upload component to profile page

src/components/DrawerRouterContainer.jsx

@@ -14,10 +14,11 @@ const items = [
 ];
 
 const CustomDrawerItem = (props) => {
+    const { iconSvg, text, ...others } = props;
     return (
-        <DrawerItem {...props}>
-            <span className={'k-icon ' + props.iconSvg} />
-            <span className="k-item-text">{props.text}</span>
+        <DrawerItem {...others}>
+            <span className={'k-icon ' + iconSvg} />
+            <span className="k-item-text">{text}</span>
         </DrawerItem>
     );
 };
@@ -27,7 +28,7 @@ class DrawerRouterContainer extends React.Component {
         expanded: true,
         selectedId: items.findIndex(x => x.selected === true),
     }
-    
+
     handleClick = () => {
         this.setState((e) => ({expanded: !e.expanded}));
     }

src/components/Header.jsx

@@ -14,7 +14,7 @@ const Header = (props) => {
                 <div className="menu-button">
                     <span className={'k-icon hamburger-icon'} onClick={onButtonClick}/>
                 </div>
-                    
+
                 <div className="title">
                     <h1>Coffee Warehouse</h1>
                     <span className="vl"></span>
@@ -23,7 +23,7 @@ const Header = (props) => {
                 <div className="settings">
                     <span>Language</span>
                     <DropDownList data={[ "Eng", "Bg", "Gb" ]} defaultValue="Eng"/>
-                    <Avatar type='image' shape={'circle'}>
+                    <Avatar type={'image'} shape={'circle'}>
                         <img src={userAvatar} alt="user-avatar"/>
                     </Avatar>
                 </div>

src/components/form/Upload.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Upload as KendoUpload } from '@progress/kendo-react-upload';
+import { FieldWrapper } from '@progress/kendo-react-form';
+import { Label, Error, Hint } from '@progress/kendo-react-labels';
+import { Avatar } from '@progress/kendo-react-layout';
+
+export const Upload = (fieldRenderProps) => {
+    const {valid, value, id, optional, label, hint, validationMessage, visited, ...others} = fieldRenderProps;
+    const imgRef = React.useRef(null);
+    const hasImage = value && value.length > 0;
+    const showValidationMessage = visited && validationMessage;
+
+    const onChangeHandler = (event) => {
+        fieldRenderProps.onChange({ value: event.newState });
+    };
+    const onRemoveHandler = (event) => {
+        fieldRenderProps.onChange({ value: event.newState });
+    };
+
+    React.useEffect(
+        () => {
+            if (hasImage) {
+                var reader = new FileReader();
+
+                reader.onload = function(e) {
+                    imgRef.current.setAttribute('src', e.target.result)
+                }
+
+                reader.readAsDataURL(value[0].getRawFile());
+            }
+        },
+        [value, hasImage]
+    );
+
+    return (
+        <FieldWrapper>
+            <Label editorId={id} editorValid={valid} optional={optional}>
+                {label}
+                <Avatar style={{width: 100, height: 100}} shape={'circle'} type={hasImage ? 'image' : 'initials'}>
+                    {
+                        hasImage ?
+                            <img style={{width: 100, height: 100}} ref={imgRef} src={'#'} alt={'User Avatar'} /> :
+                            'AVATAR'
+                    }
+                </Avatar>
+            </Label>
+            <div className={'k-form-field-wrap'}>
+                <KendoUpload
+                    id={id}
+                    valid={valid}
+                    autoUpload={false}
+                    showActionButtons={false}
+                    multiple={false}
+                    files={value}
+                    onAdd={onChangeHandler}
+                    onRemove={onRemoveHandler}
+                    {...others}
+                />
+                {
+                    !showValidationMessage &&
+                    <Hint>{hint}</Hint>
+                }
+                {
+                    showValidationMessage &&
+                    <Error>{validationMessage}</Error>
+                }
+            </div>
+        </FieldWrapper>
+    );
+};

src/pages/Profile.jsx

@@ -7,6 +7,7 @@ import { Input } from './../components/form/Input';
 import { MaskedTextBox } from './../components/form/MaskedTextBox';
 import { DropDownList } from './../components/form/DropDownList';
 import { Editor } from './../components/form/Editor';
+import { Upload } from './../components/form/Upload';
 import { countries } from './../resources/countries';
 
 import { requiredValidator, emailValidator, phoneValidator, biographyValidator } from './../validators'
@@ -23,6 +24,13 @@ const Profile = () => {
                             onSubmit={handleSubmit}
                             render={(formRenderProps) => (
                                 <FormElement horizontal={true} style={{ maxWidth: 650 }}>
+                                    <Field
+                                        id={'avatar'}
+                                        name={'avatar'}
+                                        label={''}
+                                        validator={requiredValidator}
+                                        component={Upload}
+                                    />
                                     <Field
                                         id={'firstname'}
                                         name={'firstname'}