upload file

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

@@ -48,10 +48,7 @@ class ImageCropModal extends React.Component {
           reject(new Error('Canvas is empty'));
           return;
         }
-        blob.name = fileName;
-        window.URL.revokeObjectURL(this.fileUrl);
-        this.fileUrl = window.URL.createObjectURL(blob);
-        resolve(this.fileUrl);
+        resolve(blob);
       }, 'image/jpeg');
     });
   }
@@ -59,8 +56,8 @@ class ImageCropModal extends React.Component {
   async crop() {
     // crop immages
     if (this.state.imageRef && this.state.crop.width && this.state.crop.height) {
-      const croppedImageUrl = await this.getCroppedImg(this.state.imageRef, this.state.crop, '/images/icons/user');
-      this.props.onCropCompleted(croppedImageUrl);
+      const croppedImage = await this.getCroppedImg(this.state.imageRef, this.state.crop, '/images/icons/user');
+      this.props.onCropCompleted(croppedImage);
     }
   }
 

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

@@ -56,11 +56,10 @@ class ProfileImageSettings extends React.Component {
     }
   }
 
-  async onCropCompleted(croppedImageUrl) {
+  async onCropCompleted(croppedImage) {
     const { t, personalContainer } = this.props;
-    personalContainer.setState({ croppedImageUrl });
     try {
-      await personalContainer.uploadAttachment(croppedImageUrl);
+      await personalContainer.uploadAttachment(croppedImage);
       toastSuccess(t('toaster.update_successed', { target: t('Upload Image') }));
     }
     catch (err) {

src/client/js/services/PersonalContainer.js

@@ -182,9 +182,13 @@ export default class PersonalContainer extends Container {
   /**
    * Upload image
    */
-  async uploadAttachment() {
+  async uploadAttachment(file) {
     try {
-      // TODO GW-1218 create api
+      const formData = new FormData();
+      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 });
     }
     catch (err) {
       this.setState({ retrieveError: err });