Image selection and upload

[koke]

The user should be able insert or edit an image block, and use the media picker to select and upload an image. The image block should show progress while the image is uploading and an error if it fails.

@iamthomasbishop are there existing designs for the image upload progress and error states? I imagine we'd want to keep it close to what Aztec does, but checking just in case.

[iamthomasbishop]

are there existing designs for the image upload progress and error states? I imagine we'd want to keep it close to what Aztec does, but checking just in case.

Yes, and yes :) The picker might end up slightly different, but I think we should utilize the existing progress + error states that we have in Aztec. Here's a recent mockup of the flow – not final, but the general flow is accurate:

[koke]

From @etoledom:

The bridging part should be straightforward, and the native side is already done for Aztec. From previous tests I believe that the difficulty will be on extracting the code that handles the image selection and upload to be shared between Aztec and Gutenberg.
Estimation: one week time, in case we encounter unexpected problems (that’s highly possible).

1 week per platform

[hypest]

Subtasks

Android:

• Wire up the "Upload" button to the image picker
• Update image upload state in editor's UI

[marecar3]

Hey @iamthomasbishop, do you maybe have some idea about cancel button while media/image upload it's in the progress?

cc: @SergioEstevao @koke

[iamthomasbishop]

We can probably re-use the interaction model from Aztec.

In-Progress Upload

On iOS

If you tap on an image while it's uploading, you see an Action Sheet with the following:

• Title: Media Options
• Actions: Stop upload | Dismiss

On Android

If you tap on an image while it's uploading, you see a Simple Dialog with the following:

• Title: Stop uploading?
• Actions: No | Yes

I think in the future we could fine-tune this messaging, but let's leave that for now.

After Upload

Once an image is added to the canvas, tapping on the image itself should do the following:

On iOS

Tapping image shows an Action Sheet with the following:

• Title: Media Options
• Actions: Remove image | Edit | Dismiss

On Android

Tapping on the image shows individual Media Settings (Full-Screen Dialog), where the user can remove the image or edit it manually.

[marecar3]

Thanks @iamthomasbishop !

[marecar3]

What's missing :

• Image upload - failed/retry state
• Image upload - cancel action

[marecar3]

• Introduce media options sheet