Download or view the files sent as multi-part Request (PNG, PDF) through network proxy tool?

Question

How to download or view the files sent as multi-part Request (e.g. PUT) via a software tool?

Is there any way to accomplish this with a specific tool like CharlesProxy on macOSX, to download and view files that were sent as a part of request (PUT multipart request)? I typically fix such issues by saving the file to sandbox via code changes. Ideally, need something that can be used by our QA and doesn't require any code modification.

Charles Proxy on macos is sufficient for the most dev/QA needs, such as:

• Throttle network
• Device debugging
• Download response data
• ...

However, there is no option present to view or download files in HTTP request in Charles Proxy 4.x:

Charles Proxy 4.x (and earlier) allows saving response files, example pdf in this screenshot:

Answer 1

This can be done by editing binary file manually. It's a bit tricky, but can save the file in multipart HTTP request, without any modification to project code.

Here are the steps (verified on Charles v4.2.8 and macOS v10.12.6):

1. Save request. Right click a recorded HTTP request (the one that send file), and click "Save Request...". This will save the whole HTTP request in binary format.

2. Inspect Hex representation of request. Left click that recorded HTTP request, and click "Hex" tab of "Request" panel. This will show the binary representation of request, together with some parsed text.

3. Edit the saved request. Open the saved request (step 1) with editor that support binary, such as Sublime Text. Then, remove all non-image binary code according to the result of step 2. Especially, remove every bytes before (and include) the first empty line (0d0a0d0a in macOS and Windows, 0a0a in Linux), and remove the tail bytes. For example, following screenshot indicates request bytes of step 2, the selected bytes would be deleted (please note the 0d0a bytes, as this experiment is taken on Mac): ...

4. Save image file. Save the file after step 3 is finished. Then, append filename extension according to the Content-Type value in step 2. In this experiment, the Content-Type is image/png, so .png is appended to the filename.

That's it. You can open the xxx.png file now. It's a pure image file.

Note: this experiment only contain 1 file, but the strategy works when there are multiple file upload in request.