Add photo upload to registration page
Currently, avatar uploads take place after the first page of registration is complete. We'd like to move it inline.
Dan, can I ask you to have an initial look? There'll be two tricky bits:
1. Putting the avatar upload UI on this page. Check out the avatar upload tool built into BP (see https://commons.gc.cuny.edu/members/[username]/profile/change-avatar/). I think that it should be fairly portable - you just need to figure out what to enqueue, etc.
2. Figure out a way to store the avatar and associate it with a user. BP avatars are stored in wp-content/blogs.dir/1/files/avatars, in directories keyed by user IDs. (Use wp_upload_dir() to get the base path.) When a user registers, however, there is no user ID yet. BuddyPress used to do this by (a) using a hash of the signup key for temporary storage https://buddypress.trac.wordpress.org/browser/tags/1.2.7/bp-core/bp-core-signup.php?marks=171#L165, and then moving the file at the time of activation (when the user account is created) https://buddypress.trac.wordpress.org/browser/tags/1.2.7/bp-core/bp-core-signup.php?marks=228,233-234#L206. Something like this seems like a workable technique.
If it's not too much trouble, let's put as much of the logic as we can into a separate plugin, in case we want to release it.
Let me know if you need more pointers!
#1 Updated by Boone Gorges over 4 years ago
Hi Dan - Following up on your email here for posterity.
I think I identified two stumbling blocks in getting the avatar JS to work during registration.
1. The Backbone templates (the skeleton HTML markup that Backbone uses to build its elements) were not being loaded into the DOM. https://github.com/cuny-academic-commons/cac/commit/657b30dbca85b0ab557f611f092fd9a25c104201
2. Once the templates were loaded, the script was throwing another error because of an empty bp_params property in the script params. I've forced them to be non-empty during registration: https://github.com/cuny-academic-commons/cac/commit/7b492e4c5702baba31b4b4c71b29c19fa5b04498
I got as far as opening the file browser. Avatar uploads don't work, but I assume that this is because BP doesn't know where to store them (since the user ID is 0). Back to you :)
For the record, I don't think we should go to much trouble to support the non-Backbone versions of this for the time being. This requires multiple pageloads for cropping, which is going to be a nightmare. So I think that stuff like bp_core_add_jquery_cropper() will not be necessary, but I'll leave that for you to figure out.
#2 Updated by Boone Gorges over 4 years ago
Dan, could you let us know where this issue stands? Do you have a work in progress you could easily share? If there's something I could do to help get this across the finish line in the next three or four days, I'd be glad to do my best. Thanks in advance.
#3 Updated by Daniel Jones over 4 years ago
Sorry, Boone - I've made some progress here, but not enough.
I've pushed some changes to a branch here: https://github.com/cuny-academic-commons/cac/commit/79b03cc65889d0b655f4aabb22e480bf4b7a15b1
I've figured out a bunch of errors and have the avatar file successfully uploading to a temporary folder (ends up being blogs.dir/1/avatars/0). Note though, that I had to add a couple of action hooks to BuddyPress itself to allow the bp_avatar_upload and bp_avatar_set functions to run for a non-logged-in user. Not sure if there's a better way to handle that.
What I was about to start working on is how this all plays out when the user actually hits the submit button - if you could point me in the right direction on that, it'd be great. There's also some stying issues that need to get worked out.
#6 Updated by Boone Gorges over 4 years ago
Scratch that request, Dan. I had a look myself.
Ray, could I ask for you to do a sanity check on this, before I pass it along to the team for testing? No need for a code review (unless you want to know the awful details of what has to happen for this to work). Just pull the bp-avatar-on-register branch from GitHub and run it through a few local tests.
#9 Updated by Boone Gorges over 4 years ago
I just pulled into 1.12 and tried on LDV1, where it appears to be working.
Ray, it's possible that you have some permissions issues that make it impossible for the plugin to create the [upload_dir]/signup-avatars directory. Maybe try creating it manually (it'll live next to BP's avatars and group-avatars directories). Probably not worth a lot of bother, though, if it's working on the Commons setup :)
Could I still ask you to give it one run through on LDV1, though? I want to be sure I don't hand something totally broken to the gang. Thank you sir!
#12 Updated by Boone Gorges over 4 years ago
- File Peek 2017-10-16 21-06.gif Peek 2017-10-16 21-06.gif added
- Status changed from Assigned to Testing Required
This is ready for testing by the team. Here's what to do (on cdev/ldv1):
1. While logged out, visit https://commons.gc.cuny.edu/ and click Register
2. Fill in necessary registration data. For your convenience, I've created a non-CUNY signup code 'cac', which will let you use non-CUNY addresses. Protip: Gmail and other providers let you do the email@example.com trick, where test1 is an arbitrary string that goes to your main inbox but makes your address unique from WP's point of view.
3. Under 'Choose Profile Photo', follow the directions to upload and crop a photo. See attached gif for a sample of what you should see.
4. Complete the registration/activation process, and be sure that your avatar shows up after your first login.
The interface is not the best. The success message is just a message - it's not currently possible to display the cropped image inline. And there's no way to change the avatar you've added until after you've logged in. IMO, these are not dealbreakers, but they're aspects we can look into down the road, when we have more time to rethink BP's libraries for avatar upload (which are pretty inflexible).
I'm especially interested for feedback on how this process works across different platforms - different OS and browser combos - so please take careful notes of your platform when you report issues. It will be difficult to test mobile devices on cdev, so this is something we'll have to wing somewhat after release - but, in theory, it should support it well.