How to place a multipart/related request using browser fetch api?

Question

My api server accepts multipart/related kinds of POST reqeust. But I find no resource which explains how to place one such request using browser fetch api. Almost all links tells how to use FormData , but the content type for form data is not multipart/related, which I seek. I need to upload a JSON along accompanied by various attachment files. How do I make such a fetch request ?

Is there any standard way to do this , like the FormData object ? Or I have to write it manually ?

This is how I expect my output to be

PUT /target/SpaghettiWithMeatballs?new_edits=false HTTP/1.1
Accept: application/json
Content-Length: 1030
Content-Type: multipart/related; boundary="864d690aeb91f25d469dec6851fb57f2"
Host: localhost:5984
User-Agent: CouchDB

--2fa48cba80d0cdba7829931fe8acce9d
Content-Type: application/json

{
    "_attachments": {
        "recipe.txt": {
            "content_type": "text/plain",
            "digest": "md5-R5CrCb6fX10Y46AqtNn0oQ==",
            "follows": true,
            "length": 87,
            "revpos": 7
        }
    },
    "_id": "SpaghettiWithMeatballs",
    "_rev": "7-474f12eb068c717243487a9505f6123b",
    "_revisions": {
        "ids": [
            "474f12eb068c717243487a9505f6123b",
            "5949cfcd437e3ee22d2d98a26d1a83bf",
            "00ecbbc54e2a171156ec345b77dfdf59",
            "fc997b62794a6268f2636a4a176efcd6",
            "3552c87351aadc1e4bea2461a1e8113a",
            "404838bc2862ce76c6ebed046f9eb542",
            "5defd9d813628cea6e98196eb0ee8594"
        ],
        "start": 7
    },
    "description": "An Italian-American delicious dish",
    "ingredients": [
        "spaghetti",
        "tomato sauce",
        "meatballs",
        "love"
    ],
    "name": "Spaghetti with meatballs"
}
--2fa48cba80d0cdba7829931fe8acce9d
Content-Disposition: attachment; filename="recipe.txt"
Content-Type: text/plain
Content-Length: 87

1. Cook spaghetti
2. Cook meetballs
3. Mix them
4. Add tomato sauce
5. ...
6. PROFIT!

--2fa48cba80d0cdba7829931fe8acce9d--

@TarunLalwani no I wanted to make use of Browser fetch Api, I am creating a lightweight lib. — Anurag Vohra, Feb 03 '21 at 08:55

score 3 · Answer 1 · answered Feb 07 '21 at 10:17

It seems that none of xhr, fetch and event axios (actually it can use different techniques under the hood) supports multipart/related out of the box.

I didn't find any direct specification description however, here you can find some related questions (Question 1, Question2) and researches.

So it seems that you should compile your request manually. Here you can find some explanation regarding how to do this.

How to place a multipart/related request using browser fetch api?

1 Answers1