Project

General

Profile

Feature #8639

Add photo upload to registration page

Added by Boone Gorges about 2 years ago. Updated almost 2 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Registration
Target version:
Start date:
2017-08-31
Due date:
% Done:

0%

Estimated time:

Description

See https://chris0stein.github.io/commons-ux/registration/index.html

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!

Peek 2017-10-16 21-06.gif (1.18 MB) Peek 2017-10-16 21-06.gif Boone Gorges, 2017-10-16 10:11 PM

Related issues

Related to CUNY Academic Commons - Bug #8813: `cac_activity_secondary_avatar_enlarge()` can generate invalid avatar URLsResolved2017-10-16

History

#1 Updated by Boone Gorges almost 2 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 almost 2 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 almost 2 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.

#4 Updated by Boone Gorges almost 2 years ago

Thanks, Dan. Can you please try to cobble together some workable styling? I'll see if I can duct tape something for the server-side handling in the next day.

#5 Updated by Boone Gorges almost 2 years ago

  • Related to Bug #8813: `cac_activity_secondary_avatar_enlarge()` can generate invalid avatar URLs added

#6 Updated by Boone Gorges almost 2 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.

#7 Updated by Raymond Hoh almost 2 years ago

Hmm, I'm not able to successfully upload an image.

I get a generic "An error occurred. Please try again later." message after attempting to select a file for uploading. The AJAX call gives me a JSON object with success: false.

#8 Updated by Boone Gorges almost 2 years ago

Blurg. Back to the drawing board. Thanks for looking.

#9 Updated by Boone Gorges almost 2 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!

#10 Updated by Raymond Hoh almost 2 years ago

I think the issue could be with my Chromium 63 setup.

Works in Firefox 56.

#11 Updated by Boone Gorges almost 2 years ago

Cool, thanks, Ray. If it's a browser-specific issue, it could be something that I could debug with console output - if you get a chance to take a screenshot of the request payload and response, that'd be helpful.

#12 Updated by Boone Gorges almost 2 years ago

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 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.

#13 Updated by Stephen Real almost 2 years ago

This worked for me using Safari on my Mac.

#14 Updated by Boone Gorges almost 2 years ago

  • Status changed from Testing Required to Resolved

Also available in: Atom PDF