re-reactify (only input tag)

src/client/js/app.jsx

@@ -40,7 +40,7 @@ import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import ExportPage from './components/Admin/Export/ExportPage';
 import GroupDeleteModal from './components/GroupDeleteModal/GroupDeleteModal';
-import ProfileImageForm from './components/ProfileImageForm';
+import ProfileImageUploader from './components/ProfileImageUploader';
 
 import AppContainer from './services/AppContainer';
 import PageContainer from './services/PageContainer';
@@ -97,7 +97,7 @@ let componentMappings = {
   'page-status-alert': <PageStatusAlert />,
   'save-page-controls': <SavePageControls />,
 
-  'profile-image-form': <ProfileImageForm />,
+  'profile-image-uploader': <ProfileImageUploader />,
 
   'user-created-list': <RecentCreated />,
   'user-draft-list': <MyDraftList />,

src/client/js/components/ProfileImageForm.jsx

@@ -1,123 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import AppContainer from '../services/AppContainer';
-import { createSubscribedElement } from './UnstatedUtils';
-
-class ProfileImageForm extends React.Component {
-
-  constructor(props) {
-    super(props);
-    const { appContainer } = this.props;
-    // const config = appContainer.getConfig();
-    const user = appContainer.findUser(appContainer.me);
-
-    this.state = {
-      isGravatarEnabled: user.isGravatarEnabled,
-    };
-  }
-
-  render() {
-
-    const t = this.props.t;
-
-    return (
-      <Fragment>
-        <div className="form-group col-md-2 col-sm-offset-1 col-sm-4">
-          <h4>
-            <div className="radio radio-primary">
-              <input
-                type="radio"
-                id="radioGravatar"
-                form="formImageType"
-                name="imagetypeForm[isGravatarEnabled]"
-                value={this.state.isGravatarEnabled}
-              />
-              <label htmlFor="radioGravatar">
-                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
-              </label>
-              <a href="https://gravatar.com/">
-                <small>
-                  <i className="icon-arrow-right-circle" aria-hidden="true"></i>
-                </small>
-              </a>
-            </div>
-          </h4>
-
-          <img src="{{ user|gravatar }}" width="64" />
-        </div>
-
-        <div className="form-group col-md-4 col-sm-7">
-          <h4>
-            <div className="radio radio-primary">
-              <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value={!this.state.isGravatarEnabled} />
-              <label htmlFor="radioUploadPicture">{t('Upload Image')}</label>
-            </div>
-          </h4>
-          <div className="form-group">
-            <div id="pictureUploadFormMessage"></div>
-            <label htmlFor="" className="col-sm-4 control-label">
-              {t('Current Image')}
-            </label>
-            <div className="col-sm-8">
-              <p>
-                <img src="{{ user|uploadedpicture }}" className="picture picture-lg img-circle" id="settingUserPicture" />
-                <br />
-              </p>
-              <p>
-                <form id="remove-attachment" action="/_api/attachments.removeProfileImage" method="post" className="form-horizontal">
-                  <input type="hidden" name="_csrf" value="{{ csrf() }}" />
-                  <button type="submit" className="btn btn-danger">
-                    {t('Delete Image')}
-                  </button>
-                </form>
-              </p>
-            </div>
-          </div>
-
-          <div className="form-group">
-            <label htmlFor="" className="col-sm-4 control-label">
-              {t('Upload new image')}
-            </label>
-            <div className="col-sm-8">
-              {/* {% if fileUploadService.getIsUploadable() %}
-              <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
-                <input type="hidden" name="_csrf" value="{{ csrf() }}">
-                <input type="file" name="profileImage" accept="image/*">
-                <div id="pictureUploadFormProgress" class="d-flex align-items-center">
-                </div>
-              </form>
-              {% else %} */}
-              {/* * { t('page_me.form_help.profile_image1') }<br>
-               * { t('page_me.form_help.profile_image2') }<br> */}
-              {/* {% endif %} */}
-            </div>
-          </div>
-        </div>
-
-        <div className="form-group">
-          <div className="col-sm-offset-4 col-sm-6">
-            <button type="submit" form="formImageType" className="btn btn-primary">
-              {t('Update')}
-            </button>
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
-}
-/**
- * Wrapper component for using unstated
- */
-const ProfileImageFormWrapper = (props) => {
-  return createSubscribedElement(ProfileImageForm, props, [AppContainer]);
-};
-
-ProfileImageForm.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
-
-export default withTranslation()(ProfileImageFormWrapper);

src/client/js/components/ProfileImageUploader.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import AppContainer from '../services/AppContainer';
+import { createSubscribedElement } from './UnstatedUtils';
+
+class ProfileImageUploader extends React.Component {
+
+  handleChangeFile(e) {
+    const image = e.target.files[0];
+    console.log(typeof image);
+  }
+
+  render() {
+    return <input type="file" name="profileImage" onChange={this.handleChangeFile} accept="image/*" />;
+  }
+
+}
+/**
+ * Wrapper component for using unstated
+ */
+const ProfileImageFormWrapper = (props) => {
+  return createSubscribedElement(ProfileImageUploader, props, [AppContainer]);
+};
+
+ProfileImageUploader.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(ProfileImageFormWrapper);

src/server/views/me/index.html

@@ -120,9 +120,7 @@
     <fieldset>
 
       <legend>{{ t('Set Profile Image') }}</legend>
-
-      <div id="profile-image-form"></div>
-<!--      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
+      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
         <h4>
           <div class="radio radio-primary">
             <input type="radio" id="radioGravatar" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
@@ -174,7 +172,7 @@
             {% if fileUploadService.getIsUploadable() %}
             <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
               <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <input type="file" name="profileImage" accept="image/*">
+              <div id="profile-image-uploader"></div>
               <div id="pictureUploadFormProgress" class="d-flex align-items-center">
               </div>
             </form>
@@ -191,7 +189,7 @@
         <div class="col-sm-offset-4 col-sm-6">
           <button type="submit" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
         </div>
-      </div> -->
+      </div>
 
     </fieldset>
   </div><!-- /.form-box -->