Spectrum: Add cropping step while uploading profile photos

[mxstbr]

I just found https://github.com/ricardo-ch/react-easy-crop by @ricardo-ch which looks super simple—we should use it to add a step where you can crop your avatar and header image when editing them on user and community profiles!

[mackmmiller]

Can I try a swing at this? I'm really interested in getting involved with Spectrum.

[mxstbr]

Do it!

[titchimoto]

Hey @mxstbr @mackmmiller Just wondered if this was still being worked on? Would be happy to have a go at it, or assist where possible! :)

[mackmmiller]

@titchimoto, I've got a semi-working solution, but I'm having trouble with the styling. Maybe we can link up later and work it out?

[titchimoto]

Sure! :) Sounds good, let me know if there's anything I can do to (try!) help.

[THEozmic]

Would love to help too!

[cain]

Might give this a crack since no one has pushed anything :)

[THEozmic]

Okay. I do have a problem I'm currently facing: In the local set up, I am unable to modify my profile picture. Attempting to modify it just changes the displayed image to the default astronaut picture and in the settings page, it shows up as a broken image.

[brianlovin]

Oh now @THEozmic :/ I've seen this locally as well but just haven't dug in to investigate (since it's a local-only error). I believe it's because it's trying to upload the image to s3+imgix instead of just saving it locally + loading the upload locally from your machine.

[THEozmic]

Okay, I was thinking it might affect how this task is done, I'll try taking a closer look at things and let you know if it's a blocker.

[cain]

Looks like most websites use a modal to crop.

@brianlovin So the plugin requested by @mxstbr will crop the image on upload. But currently, no cropping is done on for the cover image.

The current cover banner on profile page changes the aspect ratio on responsiveness. So having one aspect ratio won't work well. Thoughts? :)

[jletey]

Is anyone currently working on this? I see that this hasn't had activity since August of last year. Would love to give this a try!

[brianlovin]

@johnletey I don't think so :)

[jletey]

@brianlovin I'll have a go at it then!

[orifmilod]

Any Update? I'll try to go and get this done. :)

[brianlovin]

No update yet @milad440550 :)

[orifmilod]

@brianlovin Ill do my best to get it done. 😄

[logeekal]

@milad440550 I am not sure, how are you progressing on this. I spend time on this a little and came up with a prototype. If you are progressing nicely, let me know and I will leave it alone. I have some questions regarding this feature to ask that may help you as well which I will ask below.

@brianlovin, @mxstbr I tried to implement a quick prototype using react-image-crop library which seems pretty good from accessibility perspective as well. Here is a small video for the same. Please let me know your feedback.

I have couple of questions, which may help whosoever doing this feature :

• What should be crop aspect ratio of profile and cover photo. in this demo it is 1.

• Any feedback regarding the text that should be on the modal?

• Logic for uploading profile photo and cover photo is duplicated and in my opinion should be deduplicated. Only difference is setting up of state variables. What do you think?

| | |
|---|---|

[orifmilod]

Hey @logeekal, I have progressed and came with a prototype same as you, but It needs some polishing, Ill try to make a PR by the end of tomorrow, and made one function instead of 2 functions setProfilePhoto and setCoverPhoto and set name attribute to CoverInput and PhotoInput component.

One question tho, when cropping the image, using the button, how do you refer to Cropper component?
In the documentation of cropperjs they are using ref attribute, and then when calling crop function it calls cropper reference this.refs.cropper.getCroppedCanvas().toDataURL() then set the cropped image.
But I don't know if that is ok to use ref attribute.

Also will accept any suggestion with improving the above code?
Thank you. 😄

[logeekal]

This is great. Its okay take your time for the PR no hurries. I will not move forward on this.

Although, I didn't use cropperjs but I think better way will be to pass a function from editform to Image Crop component and that function to take the copped image reference, even if it is through ref. But I think that ref should be used in crop component only that you are creating.

And It is awesome that you deduplicated the logic of SetProfilePhoto and SetCoverPhoto as it was bothering me as well.

Best of luck..

[orifmilod]

@brianlovin Hello Brian, I have fixed this issue and added the cropping step when uploading the image. It would be great if you take a look at and if it looks fine, you can merge it with the alpha branch. 😄