[Story] Upload file in the chat

[BenoitTallandier]

User story summary

Definition
Business case
Criteria
UI/UX Design
Notes
Related

Definition

Given I am a user
When I look to send an image in the chat from my gallery
Then I click on the paperclip icon 
And I click on "Photo or Video" to see my entire gallery
And I select images that I want to send
And I click  send on "add"
And images are in the input and I can add a message
And I send the message

Given I am a user
When I look to take a picture and send it to a channel
Then I click on the paperclip icon 
And I click on "Take a picture" to open my gallery
And I take the picture
And I click  send on "add"
And the image is in the input and I can add a message
And I send the message

Given I am a user
When I look to send a folder in the chat
Then I click on the paperclip icon 
And I click on "File" to see my files
And I select files that I want to send
And I click  send on "add"
And files are in the input and I can add a message
And I send the message

Given I am a user
When I look to send an attachment (file, image, or take a photo)
And I didn't give the right to Twake to do it
And I click on "take a picture", "Photo or video" or "file", 
Then the popup system appears saying to give access to the application
In the background of Twake, Twake popup appears to say that I have to give the right.
In this popup, I can click on cancel (to close the popup) or allow (that will open the system popup again).

Business case

• I can stop the upload of the file by clicking on the cross during the upload
• I can remove an attachment when I'm writing the message by clicking on the cross icon
• I can send a maximum of 10 files by messages
• I can send my message even if files are not uploaded

Flow

Criteria (Test case)

• [ ] When I click where I can take a picture, and I gave the authorization needed, the camera system opens
• [ ] When I click try to share an image, and I gave the authorization needed, the gallery popup opens,
• [ ] When I try to share a file, and I gave the authorization needed, the document popup opens (iCloud drive for iPhone)
• [ ] When I add an attachment, and I write a message, and I remove the attachment from the message, and I send the message, I don't send the attachment

UI UX Design

Design : https://www.figma.com/file/uLw3iWnOEGaRlJnfPz4Pv0/Twake.new?node-id=604%3A49280

Notes

Related

[huynguyennovem]

@BenoitTallandier, I have some questions here, pls help to answer:

1. Is user able to send a message which contains an uploading file?
2. Do we limit the number of file on a message?
3. As I see the new design here, there will be a separated screen for file uploading, right? If it does, it will conflict with your mockup on some screens. Pls help to make this to be consistent.

[BenoitTallandier]

Hi @huynguyennovem

1. We updated the design : File will be uploaded when the message is sent.
2. 10 files
3. Design updated :)

[huynguyennovem]

Hi @huynguyennovem

1. We updated the design : File will be uploaded when the message is sent.
2. 10 files
3. Design updated :)

Hi @BenoitTallandier, I would like to confirm again the first one.

1. As the design here: File Upload Flow (https://zpl.io/V1LrBkk): All files will be uploaded before user sends a message. So there is two steps here:
   • Step 1: Upload files (success -> add to list; fail -> error shown)
   • Step 2: Send message (with uploaded files)

Am I right about the upload flow?

[huynguyennovem]

Hi @BastiaanVanGaalen

1. About file uploading by this design: file-attachment-flow-4 (https://zpl.io/bP3o4jx) and Benoit's description here: "I can stop the upload of the file by clicking on the cross during the upload"

   I don't see UI for the case file is uploading (to see the cross icon for cancelling), can you add the design for this?

2. About file uploading by this design: file-attachment-flow-4 (https://zpl.io/bP3o4jx): Benoit has confirmed that these is 10 files maximum, not 20 files. Pls help to update this to the design.

3. About photo uploading by this design: photo-attachment-flow-2 (https://zpl.io/2j3nnO4): As my understanding, the preview image will be show after capturing by camera, then user can choose which one will be uploaded. Am I right? If so, what is the photo-attachment-flow-3 (https://zpl.io/254DD5r)?

[BenoitTallandier]

Hi @huynguyennovem

1. We updated the design : File will be uploaded when the message is sent.
2. 10 files
3. Design updated :)

Hi @BenoitTallandier, I would like to confirm again the first one.

1. As the design here: File Upload Flow (https://zpl.io/V1LrBkk): All files will be uploaded before user sends a message. So there is two steps here:

• Step 1: Upload files (success -> add to list; fail -> error shown)
• Step 2: Send message (with uploaded files)

Am I right about the upload flow?

Hi @huynguyennovem No, files are uploaded after your sent the message :

• Step 1 : you choose which files you want to send
• Step 2 : you write (or not) a message with attached files, and you send it
• Step 3 : files are uploaded after the message is sent (like here https://app.zeplin.io/project/5fd7afb0317dc8827d6a8fb5/screen/61b30b3ed6741039fbc48a66)

[huynguyennovem]

Hi @BenoitTallandier,

If there is a long file list, the user will get a sequence error messages in case they are all failed uploading for eg. So I don't think it's good for user, IMO.

I think you may misunderstood the "attached", "uploaded" and "sent" here. In fact, they will behave like this when combined with APIs:

• "attached" or "uploaded": The file is uploaded to server and then we get the response Success or Failure -> Notice to user when it failed. (API 1)
• "sent": Send a message with "attached"/"uploaded" files (API 2)

So as far as I can see the current design is more suitable for APIs than what you describe.

[BenoitTallandier]

About photo uploading by this design: photo-attachment-flow-2 (https://zpl.io/2j3nnO4): As my understanding, the preview image will be show after capturing by camera, then user can choose which one will be uploaded. Am I right? If so, what is the photo-attachment-flow-3 (https://zpl.io/254DD5r)?

3. I described the flow for uploading photo in the US :)

[BenoitTallandier]

If there is a long file list, the user will get a sequence error messages in case they are all failed uploading for eg. So I don't think it's good for user, IMO.

I doubled check, you're right about that. Let's upload files or images inside this popup : https://app.zeplin.io/project/5fd7afb0317dc8827d6a8fb5/screen/61b30b34db859f49de1af3a4.

[huynguyennovem]

About photo uploading by this design: photo-attachment-flow-2 (https://zpl.io/2j3nnO4): As my understanding, the preview image will be show after capturing by camera, then user can choose which one will be uploaded. Am I right? If so, what is the photo-attachment-flow-3 (https://zpl.io/254DD5r)?

3. I described the flow for uploading photo in the US :)

I double check US but I still don't see the desc about this. I think the photo-attachment-flow-2 is enough to understand what needs to be done. If not, what are the conditions to have photo-attachment-flow-3?

I assume that after the user selected some pictures taken in photo-attachment-flow-2, photo-attachment-flow-3 will be displayed. So what if user want to take more pictures?

[BenoitTallandier]

I double check US but I still don't see the desc about this. I think the photo-attachment-flow-2 is enough to understand what needs to be done. If not, what are the conditions to have photo-attachment-flow-3?

Forget the photo-attachment-flow-3 for now. The flow is photo-attachment-flow-2 > photo-attachment-flow-4

[huynguyennovem]

Hi @BenoitTallandier, after thinking again, I propose the flow like this. What do you think?

For more detail:

• Step 1: User can add more pics by (1) or (2). It will add photos to the list like in my mockup, corresponding to B and C.
• Step 2: User choose pics for uploading. After selecting at least one pic, a new button (Send X media) will be shown. The (1) and (2) button are still be kept due to user may want to add more pics.
• Step 3: User clicks on Send X media button, go to photo-attachment-flow-4 screen with captured/chosen pics for uploading.

And if user click on File, it will lead to photo-attachment-flow-4 screen as we understood. But there will be no captured/chosen pics. I got inspiration from referencing some similar apps.

p/s: sorry my mockup is not beautiful :)

[BenoitTallandier]

Thank you to share your ideas! 🙏

1. We choose to not implement the media (A,B,C, ...) option in order to save time. Is it long for you to implement this bare ?
2. I may not be enough clear on this "File" button. If we want to share an image, "photo or video" is a very good shortcut because we land directly inside the gallery (photo-attachment-flow-4). However, if we want to share a file stored the phone (and not the gallery), we need an other button driving to the file folder (in iOS, it's iCloud by default for example). So we need this button leading in the file-attachment-flow-3

IMO, if it's easy to build the 1, let's do it!! 🔥
For the 2, we need to follow the user story on that. :-)

[BenoitTallandier]

@huynguyennovem I updated the FLOW. Are we aligned with that? If yes, I'll ask Dmitry to update the design

[huynguyennovem]

@huynguyennovem I updated the FLOW. Are we aligned with that? If yes, I'll ask Dmitry to update the design

I agree with that. Very clear flow. Thanks!

[BenoitTallandier]

New design

https://www.figma.com/file/uLw3iWnOEGaRlJnfPz4Pv0/Twake.new?node-id=604%3A49280

Business case

• The workflow start from the "+" button left to the input
• I can upload a maximum of 10 files in a single message. So we can't select more that 10 images
• Images shown inside the channel view are the full images (not the thumbnail)
• In the input view, there is a horizontal scroll when I try to send more images/files that can be printed