[Breakpoint] #9 Allow to select local file on the Body Breakpoint

[NghiaTranUIT]

Description

⚠️ This ticket is for the Breakpoint v2 (After we release the #218) to Production. Please don't implement it for now.

It's important to allow the user to select a local file during the Breakpoint.

Video: ✅ See the video on Slack

Acceptance Criteria

• Able to select a local file to replace the current body. Works with Request or Response Breakpoint.
• Replace the Content-Type if need -> Show the alert
• The body is correctly updated with a local file
• Write Unit Tests for 3 following scenarios

How to test

1. Make a POST Request -> Create a on Request Breakpoint
2. Click on the Request Body Tab -> Select Local File

Scenario 1: Select a text-based file

1. Check if the mime type of the select file -> If it's different than the Content-Type of the Request or Response -> Show the alert

• YES: Change the Content-Type header -> Still replace the body
• NO: Don't change the Content-Type -> Still replace the body

2. Replace with a new body
3. Execute
4. Verify ✅ that the client gets new data

Scenario 2: Select an Image

1. Check if the mime type of the select file -> If it's different than the Content-Type of the Request or Response -> Show the alert

• YES: Change the Content-Type header -> Still replace the body
• NO: Don't change the Content-Type -> Still replace the body

2. Replace with a new body -> Show the Image preview
3. Execute
4. Verify ✅ that the client gets new data

Scenario 3: Select a non-text file (binary, pdf, ...)

1. Check if the mime type of the select file -> If it's different than the Content-Type of the Request or Response -> Show the alert

• YES: Change the Content-Type header -> Still replace the body
• NO: Don't change the Content-Type -> Still replace the body

2. Replace with a new body -> Show body
3. Execute
4. Verify ✅ that the client gets new data