Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including json-form-data with all npm packages installed. Try it out:

var jsonFormData = require("json-form-data")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

json-form-data v1.4.1

A library to convert javascript objects into form data.

json-form-data

A library to convert JavasScript objects into FormData.

Build Status BrowserStack Status

Features

  • Supports CommonJS and AMD module loaders
  • Converts nested objects and arrays
  • Compatible with legacy web browsers
  • Supports all primitive data types
  • Supports File and FileList data types
  • Skips null and undefined values
  • Good unit test coverage

Overview

This library converts a JSON object into FormData, allowing files and primitive data to be sent to a server in a single HTTP request.

Single Page Web Applications (SPA's) primarily use JSON formatted payloads. This causes problems when you need to send a file along with additional data, as files cannot be sent to a server in a JSON formatted payload.

This library addresses the limitations of similar libraries by allowing conversion of deeply nested JSON objects, better unit test coverage and exclusion of null and undefined values from the resulting FormData.

Usage

Input as JSON

var testObject = {
    prop1: 'test',
    prop2: 2,
    prop3: null,
    prop4: undefined,
    prop5: true,
    prop6: false,
    prop7: new File(['file content'], 'my_file.txt'),
    prop8: {
        prop1: 'test',
        prop2: 2,
        prop3: null,
        prop4: undefined,
        prop5: true,
        prop6: false,
        prop7: [
            'test', 
            2, 
            null, 
            undefined, 
            true, 
            false
        ]
    }
};

var options = {
    showLeafArrayIndexes: true
};

var formData = window.jsonToFormData(testObject, options);

Output as multipart/formdata

prop1
test

prop2
2

prop5
1

prop6
0

prop7
Content-Disposition: form-data; name="My File"; filename="my_file.txt"
Content-Type: text/plain

prop8[prop1]
test

prop8[prop2]
2

prop8[prop5]
1

prop8[prop6]
0

prop8[prop7][0]
test

prop8[prop7][1]
2

prop8[prop7][2]
1

prop8[prop7][3]
0

Options

OptionDefaultDescription
showLeafArrayIndexestrueShows or hides indexes for items in array leaf nodes.

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE10, IE11, Edgelatestlatestlatest

Contributors

Sponsors

BrowserStack Logo

We use BrowserStack to automate our regression tests to ensure compatibility with supported browsers.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free