delete image

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -23,6 +23,7 @@ class ProfileImageSettings extends React.Component {
 
     this.imageRef = null;
     this.onSelectFile = this.onSelectFile.bind(this);
+    this.onClickDeleteBtn = this.onClickDeleteBtn.bind(this);
     this.hideModal = this.hideModal.bind(this);
     this.cancelModal = this.cancelModal.bind(this);
     this.onCropCompleted = this.onCropCompleted.bind(this);
@@ -60,7 +61,7 @@ class ProfileImageSettings extends React.Component {
     const { t, personalContainer } = this.props;
     try {
       await personalContainer.uploadAttachment(croppedImage);
-      toastSuccess(t('toaster.update_successed', { target: t('Upload Image') }));
+      toastSuccess(t('toaster.update_successed', { target: t('Current Image') }));
     }
     catch (err) {
       toastError(err);
@@ -68,6 +69,17 @@ class ProfileImageSettings extends React.Component {
     this.hideModal();
   }
 
+  async onClickDeleteBtn() {
+    const { t, personalContainer } = this.props;
+    try {
+      await personalContainer.deleteProfileImage();
+      toastSuccess(t('toaster.update_successed', { target: t('Current Image') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
   showModal() {
     this.setState({ show: true });
   }
@@ -82,7 +94,7 @@ class ProfileImageSettings extends React.Component {
 
   render() {
     const { t, personalContainer } = this.props;
-    const { uploadedPictureSrc, isGravatarEnabled } = personalContainer.state;
+    const { uploadedPictureSrc, isGravatarEnabled, isUploadedPicture } = personalContainer.state;
 
     return (
       <React.Fragment>
@@ -132,8 +144,7 @@ class ProfileImageSettings extends React.Component {
               </label>
               <div className="col-sm-8">
                 {uploadedPictureSrc && (<p><img src={uploadedPictureSrc} className="picture picture-lg img-circle" id="settingUserPicture" /></p>)}
-                {/* TODO GW-1218 create apiV3 for delete image */}
-                <button type="button" className="btn btn-danger">{ t('Delete Image') }</button>
+                {isUploadedPicture && <button type="button" className="btn btn-danger" onClick={this.onClickDeleteBtn}>{ t('Delete Image') }</button>}
               </div>
             </div>
             <div className="row">

src/client/js/services/PersonalContainer.js

@@ -5,6 +5,8 @@ import loggerFactory from '@alias/logger';
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:services:PersonalContainer');
 
+const DEFAULT_IMAGE = '/images/icons/user.svg';
+
 /**
  * Service container for personal settings page (PersonalSettings.jsx)
  * @extends {Container} unstated Container
@@ -24,6 +26,7 @@ export default class PersonalContainer extends Container {
       isEmailPublished: false,
       lang: 'en-US',
       isGravatarEnabled: false,
+      isUploadedPicture: false,
       uploadedPictureSrc: this.getUploadedPictureSrc(this.appContainer.currentUser),
       externalAccounts: [],
       isPasswordSet: false,
@@ -68,13 +71,15 @@ export default class PersonalContainer extends Container {
    */
   getUploadedPictureSrc(user) {
     if (user.image) {
+      this.setState({ isUploadedPicture: true });
       return user.image;
     }
     if (user.imageAttachment != null) {
+      this.setState({ isUploadedPicture: true });
       return user.imageAttachment.filePathProxied;
     }
 
-    return '/images/icons/user.svg';
+    return DEFAULT_IMAGE;
   }
 
   /**
@@ -188,7 +193,7 @@ export default class PersonalContainer extends Container {
       formData.append('file', file);
       formData.append('_csrf', this.appContainer.csrfToken);
       const response = await this.appContainer.apiPost('/attachments.uploadProfileImage', formData);
-      this.setState({ uploadedPictureSrc: response.attachment.filePathProxied });
+      this.setState({ isUploadedPicture: true, uploadedPictureSrc: response.attachment.filePathProxied });
     }
     catch (err) {
       this.setState({ retrieveError: err });
@@ -197,4 +202,19 @@ export default class PersonalContainer extends Container {
     }
   }
 
+  /**
+   * Delete image
+   */
+  async deleteProfileImage() {
+    try {
+      await this.appContainer.apiPost('/attachments.removeProfileImage', { _csrf: this.appContainer.csrfToken });
+      this.setState({ isUploadedPicture: false, uploadedPictureSrc: DEFAULT_IMAGE });
+    }
+    catch (err) {
+      this.setState({ retrieveError: err });
+      logger.error(err);
+      throw new Error('Failed to delete profile image');
+    }
+  }
+
 }