Vscode-restclient: POST multipart/form-data

[pablozoani]

• REST Client Version: v0.24
• VSCode Version: 1,52
• OS Version: Microsoft Windows 10 Home v10.0.19041

Steps to Reproduce:

1. Create the following request:

POST http://localhost:8080/products HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

headphones
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="price"

20
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="productImage"; filename="headphones.jpg"
Content-Type: image/jpeg

< ./headphones.jpg
----WebKitFormBoundary7MA4YWxkTrZu0gW

1. Create an express application with the following route:

import express from "express";
import multer from "multer";
const upload = multer({ dest: "uploads" });
express.Router().post("/products/", upload.single("productImage"), async (req, res, next) => {
        console.log(`Product Name: ${req.body.name}, Product Price: ${req.body.price}`);
        console.log(`Field name: ${req.file.fieldname}, File name: ${req.file.originalname}`);
});

Error:

Product Name: undefined, Product Price: undefined
{
  message: "Cannot read property 'fieldname' of undefined",
  error: TypeError: Cannot read property 'fieldname' of undefined
      at D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\src\api\routes\products.ts:28:45
      at Generator.next (<anonymous>)
      at D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\src\api\routes\products.ts:8:71
      at new Promise (<anonymous>)
      at __awaiter (D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\src\api\routes\products.ts:4:12)
      at D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\src\api\routes\products.ts:26:74
      at Layer.handle [as handle_request] (D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\node_modules\express\lib\router\layer.js:95:5)
      at next (D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\node_modules\express\lib\router\route.js:137:13)
      at Immediate._onImmediate (D:\Documentos (HDD)\JS\proyectos\ah-rest-api-node\node-rest-shop\node_modules\multer\lib\make-middleware.js:53:37)
      at processImmediate (node:internal/timers:465:21)
}

Without touching the code works as expected with postman, but I like more REST Client.

Generated HTTP Code from Postman

POST /products HTTP/1.1
Host: localhost:8080
Content-Length: 398
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

headphones
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="price"

20
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="productImage"; filename="/D:/Descargas/c-d-x-PDX_a_82obo-unsplash.jpg"
Content-Type: image/jpeg

(data)
----WebKitFormBoundary7MA4YWxkTrZu0gW

ctrl + click over ./headphones.jpg

cannot open file:///d%3A/Documentos%20%28HDD%29/JS/proyectos/ah-rest-api-node/node-rest-shop/scripts/api-client/headphones.jpg. Detail: File seems to be binary and cannot be opened as text

I have tried other variants for the image path: full path, urlencoded, .\, .\, etc.

Regards

[Huachao]

POST http://localhost:8080/products HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

headphones
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="price"

20
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="productImage"; filename="headphones.jpg"
Content-Type: image/jpeg

< ./headphones.jpg
----WebKitFormBoundary7MA4YWxkTrZu0gW

it seems that your request body doesn't follow the standard multipart form data syntax, since your boundary is ----WebKitFormBoundary7MA4YWxkTrZu0gW, your request body should be similar like following

POST http://localhost:8080/products HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

headphones
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="price"

20
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="productImage"; filename="headphones.jpg"
Content-Type: image/jpeg

< ./headphones.jpg
------WebKitFormBoundary7MA4YWxkTrZu0gW--

The main difference is that each boundary should add two more leading hyphens, and the last one also needs two more trailing hyphens.