{"id":28480,"date":"2022-07-25T10:12:00","date_gmt":"2022-07-25T10:12:00","guid":{"rendered":"http:\/\/how-the-formdata-browser-api-works"},"modified":"2025-11-06T16:22:37","modified_gmt":"2025-11-07T00:22:37","slug":"how-the-formdata-browser-api-works","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works","title":{"rendered":"How the JavaScript FormData API Works"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>At a high level, the Javascript <code>FormData<\/code> API allows developers to programmatically construct and send form data without relying on traditional form submissions or page reloads. It\u2019s especially useful for modern web applications that use JavaScript to handle user input dynamically, such as uploading files or submitting data asynchronously through fetch() or XMLHttpRequest. By mimicking the structure of an HTML form, <code>FormData<\/code> makes it simple to capture and transmit user data to a server while keeping the experience fast, interactive, and seamless.<\/p>\n<p>In this article, we\u2019ll discuss syntax, <code>FormData<\/code> API methods, usage, and offer some examples.<\/p>\n<h2><code>FormData<\/code> Syntax<\/h2>\n<p>The syntax for creating a <code>FormData<\/code> object is:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/javascript<\/span>\n<span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData() <span class=\"hljs-comment\">\/\/this creates an empty formData object<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>FormData()<\/code> accepts one argument; an HTML <code>form<\/code> element.<\/p>\n<h2>When You Should Use <code>FormData<\/code><\/h2>\n<p>The only time you would need to use <code>FormData<\/code> is when you\u2019re sending data to a server via a POST request.<\/p>\n<p>The <code>FormData<\/code> object has some very useful methods. In this section, we\u2019ll look at some of them.<\/p>\n<ul>\n<li>\n<p><code>.append(name, value, filename)<\/code> adds a value to an existing key in an object<\/p>\n<ul>\n<li>Example: <code>formData.append('first_name', 'Sammy');<\/code>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>.delete(name)<\/code> removes a key\/value pair from the FormData object. it accepts the key or name of the key as argument.<\/p>\n<ul>\n<li>Example: <code>formData.delete('first_name')<\/code>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>.entries()<\/code> returns an iterator that loops through the FormData object entries to get the list of key\/value pairs.<\/p>\n<ul>\n<li>Example:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\n<span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData()\nformData.append(<span class=\"hljs-string\">'first_name'<\/span>, <span class=\"hljs-string\">'Sammy'<\/span>);\nformData.append(<span class=\"hljs-string\">'nick_name'<\/span>, <span class=\"hljs-string\">'Honey Badger'<\/span>);\n    \n<span class=\"hljs-keyword\">for<\/span>(<span class=\"hljs-keyword\">const<\/span> entry <span class=\"hljs-keyword\">of<\/span> formData.entries()) {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${entry&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>, <span class=\"hljs-subst\">${entry&#91;<span class=\"hljs-number\">1<\/span>]}<\/span>`<\/span>);\n}\n    \n<span class=\"hljs-comment\">\/\/ Results<\/span>\n    \n<span class=\"hljs-comment\">\/\/ first_name, Sammy<\/span>\n<span class=\"hljs-comment\">\/\/ nick_name, Honey Badger<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.get(name)<\/code>: returns the first value of a key in the FormData object.\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\nformData.get(<span class=\"hljs-string\">'nick_name'<\/span>) \n<span class=\"hljs-comment\">\/\/returns 'Honey Badger'<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.getAll(name)<\/code>: returns an array of all the values associated with a key.\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\nformData.append(<span class=\"hljs-string\">'last_name'<\/span>, <span class=\"hljs-string\">'Messi'<\/span>);\nformData.append(<span class=\"hljs-string\">'last_name'<\/span>, <span class=\"hljs-string\">'Ronaldo'<\/span>);\n    \nformData.getAll(<span class=\"hljs-string\">'last_name'<\/span>)\n    \n<span class=\"hljs-comment\">\/\/ RESULT<\/span>\n    \n<span class=\"hljs-comment\">\/\/ &#91;'Messi', 'Ronaldo']<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.has(name)<\/code>: returns a boolean value if the FormData object has a certain key.\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\nformData.has(<span class=\"hljs-string\">'other_name'<\/span>) <span class=\"hljs-comment\">\/\/ false<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.keys()<\/code>: returns an iterator that loops through all the keys contained in the FormData object.\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\n<span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">const<\/span> key <span class=\"hljs-keyword\">of<\/span> formData.keys()) {\n    <span class=\"hljs-built_in\">console<\/span>.log(key);\n}\n    \n<span class=\"hljs-comment\">\/\/ first_name<\/span>\n<span class=\"hljs-comment\">\/\/ last_name<\/span>\n<span class=\"hljs-comment\">\/\/ nick_name<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.set(name, value, filename)<\/code>: adds a new value to an existing key. If the key\/value doesn\u2019t exist, it adds them. The filename argument is optional\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\nformData.set(<span class=\"hljs-string\">'last_name'<\/span>, <span class=\"hljs-string\">'Fati'<\/span>);\nformData.get(<span class=\"hljs-string\">'last_name'<\/span>); <span class=\"hljs-comment\">\/\/ \"Fati\"<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<code>.values<\/code>: returns an iterator that loops through all the values contained in the FormData object.\n<ul>\n<li>example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\n\n<span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">const<\/span> value <span class=\"hljs-keyword\">of<\/span> formData.values()) {\n      <span class=\"hljs-built_in\">console<\/span>.log(value);\n}\n    \n<span class=\"hljs-comment\">\/\/ Sammy<\/span>\n<span class=\"hljs-comment\">\/\/ Honey Badger<\/span>\n<span class=\"hljs-comment\">\/\/ Fati<\/span>\n<span class=\"hljs-comment\">\/\/ Messi<\/span>\n<span class=\"hljs-comment\">\/\/ Ronaldo<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we know the methods FormData provides us, let\u2019s go through some real-world samples.<\/p>\n<h2>Populating Data From an HTML Form<\/h2>\n<p>Let\u2019s see how FormData works with HTML forms. In this example we would display the key\/value of the HTML inputs in a list format.<\/p>\n<p>Let\u2019s see how FormData works with HTML forms. In this example we would display the key\/value of the HTML inputs in a list format. The demo is here on <a href=\"https:\/\/codesandbox.io\/embed\/pre-populate-form-data-ezmquc?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">Codesandbox.<\/a><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">&lt;!--HTML --!&gt;\n&lt;form id=<span class=\"hljs-string\">\"form\"<\/span>&gt;\n    &lt;input type=<span class=\"hljs-string\">\"text\"<\/span> name=<span class=\"hljs-string\">\"first_name\"<\/span> value=<span class=\"hljs-string\">\"Sammy\"<\/span>&gt;\n    &lt;input type=<span class=\"hljs-string\">\"text\"<\/span> name=<span class=\"hljs-string\">\"nick_name\"<\/span> value=<span class=\"hljs-string\">\"Honey Badger\"<\/span>&gt;\n    &lt;input type=<span class=\"hljs-string\">\"password\"<\/span> name=<span class=\"hljs-string\">\"password\"<\/span> value=<span class=\"hljs-string\">\"password123\"<\/span>&gt;\n&lt;\/form&gt;\n    \n&lt;pre id=<span class=\"hljs-string\">\"output\"<\/span>&gt;&lt;\/pre&gt;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\n<span class=\"hljs-keyword\">const<\/span> form = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"form\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData(form)\n <span class=\"hljs-keyword\">const<\/span> output = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"output\"<\/span>)\n    \n<span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">const<\/span> &#91;key, value] <span class=\"hljs-keyword\">of<\/span> formData) {\n    output.textContent = output.textContent + <span class=\"hljs-string\">`<span class=\"hljs-subst\">${key}<\/span>: <span class=\"hljs-subst\">${value}<\/span>\\\\n`<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_0C118F0EBE05589FAAE2C4FCF7711AB63D8FA3FD0667A8AA14984710759353E3_1657154644620_Screenshot+2022-07-06+at+12.17.05.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1812\" height=\"650\"\/><\/p>\n<h2>Sending Input Data to a Server<\/h2>\n<p>Let\u2019s work on a more realistic example.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/JavaScript<\/span>\n<span class=\"hljs-keyword\">const<\/span> submit = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n    <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData\n        formData.append(<span class=\"hljs-string\">'myFileData'<\/span>, <span class=\"hljs-built_in\">document<\/span>&#91;<span class=\"hljs-number\">0<\/span>])\n        <span class=\"hljs-keyword\">let<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">'\/upload'<\/span>, {\n            <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n            <span class=\"hljs-attr\">body<\/span>: formData,\n            <span class=\"hljs-attr\">headers<\/span>: {\n                <span class=\"hljs-string\">'Content-type'<\/span>: <span class=\"hljs-string\">'application\/json; charset=UTF-8'<\/span>,\n            },\n        });\n        <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> response.json();\n    \n        showMessage(result.message, response.status == <span class=\"hljs-number\">200<\/span> ? <span class=\"hljs-string\">'success'<\/span> : <span class=\"hljs-string\">'error'<\/span>);\n    \n    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n            showMessage(error.message, <span class=\"hljs-string\">'error'<\/span>);\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, we are uploading a file to the <code>upload<\/code> API endpoint. You can see how we made use of the <code>formData.append()<\/code> method to add the filename as value to the <code>myFileData<\/code> key.<\/p>\n<h2>Conclusion<\/h2>\n<p>The JavaScript <code>FormData<\/code> API web API object is constructed from the <code>FormData<\/code> Interface. The interface enables us to create key\/value pairs to represent our HTML form field values. In this article, we mentioned that the only time you will need to use the <code>FormData<\/code> object is when you\u2019re sending data to a server. We also outlined the <code>FormData<\/code> methods with appropriate examples and worked on some realistic examples where <code>FormData<\/code> was used.<\/p>\n<p>Was this article helpful? Discover how <a href=\"https:\/\/cloudinary.com\/developers\">Cloudinary helps developers<\/a> build more engaging and performant web and app experiences while saving tons of time and effort.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28481,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[145,177],"class_list":["post-28480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-html5","tag-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How the JavaScript FormData API Works<\/title>\n<meta name=\"description\" content=\"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How the JavaScript FormData API Works\" \/>\n<meta property=\"og:description\" content=\"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-25T10:12:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T00:22:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1812\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How the JavaScript FormData API Works\",\"datePublished\":\"2022-07-25T10:12:00+00:00\",\"dateModified\":\"2025-11-07T00:22:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA\",\"keywords\":[\"HTML5\",\"Javascript\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\",\"url\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\",\"name\":\"How the JavaScript FormData API Works\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA\",\"datePublished\":\"2022-07-25T10:12:00+00:00\",\"dateModified\":\"2025-11-07T00:22:37+00:00\",\"description\":\"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA\",\"width\":1812,\"height\":650,\"caption\":\"Image of screenshot of a form filled out using JavaScript FormData API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How the JavaScript FormData API Works\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How the JavaScript FormData API Works","description":"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works","og_locale":"en_US","og_type":"article","og_title":"How the JavaScript FormData API Works","og_description":"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.","og_url":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-25T10:12:00+00:00","article_modified_time":"2025-11-07T00:22:37+00:00","og_image":[{"width":1812,"height":650,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works"},"author":{"name":"","@id":""},"headline":"How the JavaScript FormData API Works","datePublished":"2022-07-25T10:12:00+00:00","dateModified":"2025-11-07T00:22:37+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","keywords":["HTML5","Javascript"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works","url":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works","name":"How the JavaScript FormData API Works","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","datePublished":"2022-07-25T10:12:00+00:00","dateModified":"2025-11-07T00:22:37+00:00","description":"In this article, you\u2019ll get a clear tutorial on how JavaScript FormData API works, including syntax, FormData API methods, usage, and real world examples.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","width":1812,"height":650,"caption":"Image of screenshot of a form filled out using JavaScript FormData API"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how-the-formdata-browser-api-works#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How the JavaScript FormData API Works"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924261\/Web_Assets\/blog\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b\/6185223273a10816896d576ae15d9f3dec2403a7-1812x650-1_284810c06b.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28480"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28480\/revisions"}],"predecessor-version":[{"id":39148,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28480\/revisions\/39148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28481"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}