diff --git a/jam-ui/src/components/profile/JKProfileAvatarUpload.js b/jam-ui/src/components/profile/JKProfileAvatarUpload.js index f392f8ea0..731dd3015 100644 --- a/jam-ui/src/components/profile/JKProfileAvatarUpload.js +++ b/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 ( - -
-
- -
+ +
+
+ +
-
- - +
+ + +
-
- - ) -} + + ); +}; -export default JKProfileAvatarUpload \ No newline at end of file +export default JKProfileAvatarUpload; diff --git a/jam-ui/src/helpers/rest.js b/jam-ui/src/helpers/rest.js index d55daae85..66f246104 100644 --- a/jam-ui/src/helpers/rest.js +++ b/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)); + }); +} \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/stores/AvatarStore.js.coffee b/web/app/assets/javascripts/react-components/stores/AvatarStore.js.coffee index d0c2e693a..69b402334 100644 --- a/web/app/assets/javascripts/react-components/stores/AvatarStore.js.coffee +++ b/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)); diff --git a/web/app/controllers/api_users_controller.rb b/web/app/controllers/api_users_controller.rb index 1e4429dcd..f2ac2d0bd 100644 --- a/web/app/controllers/api_users_controller.rb +++ b/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) diff --git a/web/config/application.rb b/web/config/application.rb index e41a616d5..58c946957 100644 --- a/web/config/application.rb +++ b/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'