integration with filestack for profile avatar image uploading - wip

jam-ui/src/components/profile/JKProfileAvatarUpload.js

@@ -1,58 +1,105 @@
-import React, { useEffect } from 'react'
-//import * as filestack from 'filestack-js';
+import React, { useEffect, useState } from 'react';
+import * as filestack from 'filestack-js';
 import { Button } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 import JKModalDialog from '../common/JKModalDialog';
 import JKProfileAvatar from './JKProfileAvatar';
 import { useAuth } from '../../context/UserAuth';
-import { getUserDetail } from '../../helpers/rest';
+import { getUserDetail, updateAvatar } from '../../helpers/rest';
 
-const JKProfileAvatarUpload = ({show, toggle}) => {
+const JKProfileAvatarUpload = ({ show, toggle }) => {
   const { t } = useTranslation('profile');
   const { currentUser } = useAuth();
+  const [userDetails, setUserDetails] = useState(null);
 
   useEffect(() => {
-    if(currentUser) {
-      console.log(currentUser.photo_url);
-      // getUserDetail(currentUser.id).then(response => {
-      //   console.log('_userDetails', response);
-      // });
+    if (currentUser) {
+      console.log('DEBUG', currentUser.id);
+      getUserDetail({ id: currentUser.id })
+        .then(response => {
+          if (response.ok) {
+            return response.json();
+          }
+        })
+        .then(data => {
+          setUserDetails(data);
+        })
+        .catch(error => {
+          console.error(error);
+        });
     }
   }, [currentUser]);
 
   const openFilePicker = () => {
-    // const client = filestack.init(window.gon.fp_apikey);
-    // client.picker({
-    //   accept: 'image/*',
-    //   maxFiles: 1,
-    //   onFileUploadFinished: (response) => {
-    //     console.log(response);
-    //   }
-    // }).open();
-  }
+    const client = filestack.init(window.gon.fp_apikey);
+    const options = {
+      accept: ['image/*'],
+      fromSources: ['local_file_system', 'facebook'],
+      maxFiles: 1,
+      imageMax: [88, 88],
+      imageMin: [200, 200],
+      transformations: {
+        crop: {
+          force: true // Ensures that the crop (and circle) is applied
+        }
+      },
+      storeTo: {
+        location: 's3',
+        path: `${window.gon.fp_upload_dir}/users/${currentUser.id}/`
+      },
+      onUploadDone: res => {
+        console.log('onUploadDone', res);
+        // Update the user photo_url
+        // updateUserPhotoUrl(currentUser.id, res.filesUploaded[0].url);
+        if (res.filesUploaded.length > 0) {
+          const opts = {
+            id: currentUser.id,
+            original_fpfile: userDetails.original_fpfile ? userDetails.original_fpfile : null,
+            cropped_fpfile: res.filesUploaded[0].url,
+            cropped_large_fpfile: null,
+            cropped_selection: null,
+          }
+          if(res.filesUploaded[0].cropped){
+            opts['crop_selection'] = {
+              x: res.filesUploaded[0].cropped.cropArea.position[0],
+              y: res.filesUploaded[0].cropped.cropArea.position[1],
+              w: res.filesUploaded[0].cropped.cropArea.size[0],
+              h: res.filesUploaded[0].cropped.cropArea.size[1],
+            };
+          }
+          updateAvatar(opts).then(response => {
+            if (response.ok) {
+              return response.json();
+            }
+          }).then(data => {
+            alert('Photo updated successfully');
+            console.log('DEBUG', data);
+          }).catch(error => {
+            console.error(error);
+          });
+        }
+      }
+    };
+    client.picker(options).open();
+  };
   return (
-    <JKModalDialog
-    show={show}
-    onToggle={toggle}
-    title={t('photo_modal.title', { ns: 'profile' })}
-    showFooter={true}
-  >
-    <div className='d-flex flex-column'>
-      <div className='d-flex justify-content-center'>
-        <JKProfileAvatar src={currentUser.photo_url} size="5xl" />
-      </div>
+    <JKModalDialog show={show} onToggle={toggle} title={t('photo_modal.title', { ns: 'profile' })} showFooter={true}>
+      <div className="d-flex flex-column">
+        <div className="d-flex justify-content-center">
+          <JKProfileAvatar src={currentUser.photo_url} size="5xl" />
+        </div>
 
-      <div className="d-flex justify-content-center mt-2">
-        <Button color="primary"  className="ml-2" onClick={openFilePicker}>
-          {t('photo_modal.upload', { ns: 'profile' })}
-        </Button>
-        <Button color="secondary" outline className="ml-2" onClick={() => {}}>
-          {t('photo_modal.delete', { ns: 'profile' })}
-        </Button>
+        <div className="d-flex justify-content-center mt-2">
+          <Button color="primary" className="ml-2" onClick={openFilePicker}>
+            {t('photo_modal.upload', { ns: 'profile' })}
+          </Button>
+          <Button color="secondary" outline className="ml-2" onClick={() => {}}>
+            {t('photo_modal.delete', { ns: 'profile' })}
+          </Button>
+        </div>
       </div>
-    </div>
-  </JKModalDialog>
-  )
-}
+    </JKModalDialog>
+  );
+};
 
-export default JKProfileAvatarUpload
+export default JKProfileAvatarUpload;

jam-ui/src/helpers/rest.js

@@ -542,3 +542,21 @@ export const deleteMixdown = id => {
       .catch(error => reject(error));
   });
 }
+
+export const updateAvatar = options => {
+  const { id, ...rest } = options;
+  const opts = {
+    original_fpfile: rest['original_fpfile'],
+    cropped_fpfile: rest['cropped_fpfile'],
+    cropped_large_fpfile: rest['cropped_large_fpfile'],
+    crop_selection: rest['crop_selection']
+  };
+  return new Promise((resolve, reject) => {
+    apiFetch(`/users/${id}/avatar`, {
+      method: 'POST',
+      body: JSON.stringify(opts)
+    })
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+}

web/app/assets/javascripts/react-components/stores/AvatarStore.js.coffee

@@ -73,6 +73,7 @@ rest = new context.JK.Rest()
       .fail(@app.ajaxError)
 
     afterImageUpload: (fpfile) ->
+      console.log("afterImageUploaded", typeof fpfile, fpfile)
       logger.debug("afterImageUploaded", typeof fpfile, fpfile)
       $.cookie('original_fpfile', JSON.stringify(fpfile));
 

web/app/controllers/api_users_controller.rb

@@ -626,6 +626,8 @@ class ApiUsersController < ApiController
     cropped_large_fpfile = params[:cropped_large_fpfile]
     crop_selection = params[:crop_selection]
 
+    debugger
+
     # public bucket to allow images to be available to public
     @user.update_avatar(original_fpfile, cropped_fpfile, cropped_large_fpfile, crop_selection, Rails.application.config.aws_bucket_public)
 

web/config/application.rb

@@ -103,7 +103,7 @@ if defined?(Bundler)
     config.rabbitmq_port = 5672
 
     # filepicker app configured to use S3 bucket jamkazam-dev
-    config.filepicker_rails.api_key = "Asx4wh6GSlmpAAzoM0Cunz"
+    config.filepicker_rails.api_key = "AoskPXootR5OS6iIGegL2z"
     config.filepicker_upload_dir = 'avatars'
     config.fp_secret = 'FTDL4TYDENBWZKK3UZCFIQWXS4'