POST file (and form data) using Fiddler
I was recently trying to upload a file to a locally developed Node.js API using Fiddler to test some upload functionality. Now uploading a file on its own is trivial in Fiddler, thanks to the ‘Upload file…’ link in the composer window. However, I wanted to add some additional POST data to the request and this stumped me for a while on the exact syntax that fiddler wanted.
When you choose a file from the ‘Upload file…’ link you’ll notice that fiddler replaces your body content with something similar to the following:
|
1 2 3 4 5 6 |
---------------------------acebdf13572468 Content-Disposition: form-data; name="fieldNameHere"; filename="Panthera.jpg" Content-Type: image/jpeg <@INCLUDE *C:\Users\leejones\Pictures\Panthera.jpg*@> ---------------------------acebdf13572468— |
I tried all combinations of prepending and appending form data but my node.js app was receiving none of it. Eventually I stumbled on the solution which is not at all obvious. You need to repeat the Content-Disposition sections for each form field you want to upload:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
---------------------------acebdf13572468 Content-Disposition: form-data; name="field1"; value ---------------------------acebdf13572468 Content-Disposition: form-data; name="field2"; value2 ---------------------------acebdf13572468 Content-Disposition: form-data; name="fieldNameHere"; filename="Panthera.jpg" Content-Type: image/jpeg <@INCLUDE *C:\Users\leejones\Pictures\Panthera.jpg*@> ---------------------------acebdf13572468— |
The other thing I forgot to do was change the automatically generated name=”fieldNameHere” to the actual parameter name that my node.js app was expecting.
Once these niggles had been fixed, it worked like a charm.
I'm a gadget loving code-junkie who loves to program, create websites and try out new stuff. Married, with two young daughters I am also a keen marathon runner and fitness enthusiast.