Storage of Avatar Images internally (as opposed to asking for URL)

[dmtrjsg]

Context

Ensure less friction and better experience for all users, since avatar image via URL come with many problems. Atlas team is building a simple back end service

• Create avatar upload service atlas#2885

And corresponding adjustments to the onboarding flow

• Avatar Image Can be Uploaded atlas#2884

Scope

• Update the membership creation and editing flows in favour of uploaded avatars
• Update the modal to Edit Membership
• Existing file uploader

Info

┆Issue is synchronized with this Asana task by Unito

[toiletgranny]

Alright, @dmtrjsg, designs for both the Create and Edit Membership dialogs can be found here: https://www.figma.com/file/GlgN8uBRtvtMJtiOsdtDF7/Pioneer-Design?node-id=10799%3A567889

Notes:

1. Naturally, I started off trying to re-use existing patterns and components in Pioneer, but the only component for uploading files that I have found ("Dropzone") felt excessive when put in the context of (a) uploading a single image file to be used as an avatar, and (b) inside of a dialog and not a full-page experience.
2. Because of the above, instead of using a "Dropzone" component, I went for a classic HTML file input type (styled). Hopefully, this won't take too much time to implement. Let me know if there's another component you feel we should try using here.
3. To an engineer implementing this: make sure not to miss the error & loading states designs.

[dmtrjsg]

@toiletgranny Agreed!

I guess preview is also not needed here, I bet you thought about it already.. Perhaps its safe to remove the drop zone variant by this time as Choose file is perfect :)

[dmtrjsg]

@toiletgranny can we pls add small preview in a circle pls for the avatar

[toiletgranny]

@dmtrjsg If we can spend a bit more time on this, then sure! I updated the designs, and here they are — https://www.figma.com/file/GlgN8uBRtvtMJtiOsdtDF7/Pioneer-Design?node-id=10804%3A577502

[dmtrjsg]

@kdembler is the backend built already? Is there a place where we could use it for our mirroring feature dev?

[kdembler]

Yep, yep, there is an instance at https://atlas-services.joystream.org/avatars

To upload you run a POST:

  const formData = new FormData()
  formData.append('file', croppedBlob, `upload.${croppedBlob.type === 'image/webp' ? 'webp' : 'jpg'}`)
  const response = await axios.post<{ fileName: string }>(AVATAR_SERVICE_URL, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })

As a response, you get back an object with single field called fileName that will give you the name of the uploaded file and then you can just request it with https://atlas-services.joystream.org/avatars/fileName

[dmtrjsg]

@WRadoslaw fyi:

Discussed the implication on the design of the Externally managed Pioneer which is unlikely to point to Atlas for Avatar Storage.

As a fallback scenario when the Backend URL is undefined for this module, the modal will still have Avatar URL variation.

[ivanturlakov]

Tested on https://dao-git-carthage-joystream.vercel.app/
wss://3.92.226.32.nip.io/ws-rpc

@dmtrjsg Using different env parameters I was able to see only a fallback scenario

2022-09-29.12.46.28.mov

[dmtrjsg]

@ivanturlakov sorry to hear that, pls try to test on this instance: https://pioneer-2.vercel.app/

[ivanturlakov]

@dmtrjsg same results on https://pioneer-2.vercel.app/

[dmtrjsg]

Will need to sync up with @thesan to advise, thanks for trying will come back to you asap!

[dmtrjsg]

@ivanturlakov pls test this on Cartahge env, and we will update the config for env to include the avatar service now.

the env will be 44.201.112.198.nip.io

Will be ready in an hour

[ivanturlakov]

Tested on https://dao-git-carthage-joystream.vercel.app/
wss://44.201.112.198.nip.io/ws-rpc

✅ Creating via faucet
✅ Add Membership/New Member
✅ Edit Membership

If file size > 1M

img path: https://atlas-services.joystream.org/avatars/b3ebb15e-4366-4a13-86c6-a9b376e7eb22.jpeg

[dmtrjsg]

@WRadoslaw what's the max size we allow? We need to add to the validation error.
Max file size allowed is X mb.

[dmtrjsg]

Supreseded by

• Downscale images before uploading to Atlas Avatar Service #3657

So good to be released as is for the time being