User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Use FormData() and send it to server using content-type: x-www-form-urlencoded or content-type: form-data. Something like these :

postFile('http://example.com/api/v1/users', 'input[type="file"].avatar')
  .then(data => console.log(data))

function postFile(url, fileSelector) {
  const formData = new FormData()
  const fileField = document.querySelector(fileSelector)

  formData.append('username', 'abc123')
  formData.append('avatar', fileField.files[0])

  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: formData  // Coordinate the body type with 'Content-Type'
  })
  .then(response => response.json())
  .catch(error => console.error(error))
}

Then inspect the request on network panel.

Actual results:

The result is expected actually, the file are on blob format and the username are sure there, see the photo in the attachment.

Expected results:

It would be much nicer if, the result are formatted with JSON like.

avatar: (file), // just hide the blob thing
username: 'abc123'
address: [
 { here: 'onhere' }
]

Something like that instead of showing the file blob, with all the other text request.

Honza, do we have other bugs for formatting form data responses? Seems like JSON-like formatting could help with displaying form-data more readable.

Another Useful STR

1. Open https://grove-foul-shroud.glitch.me/
2. Open the network panel
3. Browse and select an image file (i used png) in the example
4. Click the "Click Me" button
5. Select the request that show up in the network panel
6. Click on the "Request tab"

(In reply to :Harald Kirschner :digitarald from comment #1)

Honza, do we have other bugs for formatting form data responses? Seems like JSON-like formatting could help with displaying form-data more readable.

I know about the follow:

• Bug 1116060 - Network inspector shows the base64 encoded response body for response with content-type "application/x-www-form-urlencoded; charset=UTF-8".
• Bug 1622209 - Display response for multipart content type
• Bug 1555641 - Binary payload viewer
  • relates to any binary response

I like the idea of using an expandable tree (JSON like) to show form data

Whatever we do should also support binary data inspection (including Copy)
Note that multipart content type can also be displayed using an expandable tree (or like a list of messages? like SSE?)

Honza

I have to reproduce this – but it does seem that Network panel doesn't show FormData pretty format for this? If it does work, the Blob could be hidden in the JSON tree behind an expandable section.

(In reply to :Harald Kirschner :digitarald from comment #4)

I have to reproduce this – but it does seem that Network panel doesn't show FormData pretty format for this?

Correct

If it does work, the Blob could be hidden in the JSON tree behind an expandable section.

It would be great if the binary part of a response could be inspectable by planned Binary Viewer (see screenshot).

Honza