POST file (and form data) using Fiddler

Posted by lee jones on Jun 16, 2015 in JavaScript, Other

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: ---------------------------acebdf13572468 Content-Disposition: form-data; name="fieldNameHere"; filename="Panthera.jpg" Content-Type: image/jpeg <@INCLUDE *C:\Users\leejones\Pictures\Panthera.jpg*@> ---------------------------acebdf13572468— 123456 ---------------------------acebdf13572468Content-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: ---------------------------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— 123456789101112 ---------------------------acebdf13572468Content-Disposition: form-data; name="field1"; value---------------------------acebdf13572468Content-Disposition: form-data; name="field2"; value2---------------------------acebdf13572468Content-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...