{"id":12078,"date":"2022-08-02T10:32:00","date_gmt":"2022-08-02T07:32:00","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=12078"},"modified":"2024-02-23T20:43:43","modified_gmt":"2024-02-23T17:43:43","slug":"axios-multipart-form-data-sending-file-through-a-form-with-javascript","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/","title":{"rendered":"Axios Multipart Form Data- Sending File Through A Form With Javascript"},"content":{"rendered":"<p>You are looking for a way to send files through a form using <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">Javascript<\/a>? Axios Multipart Form Data is the answer! Have you ever wondered how to include files in a form? How to send file data using Javascript, or is it even possible? How can you use Axios to send file data? With this article, you will learn all about Axios Multipart Form Data and how to send files through a form with Javascript. <br>The problem of sending file data through a form is a common dilemma for web developers. It is essential to know how to do this to build dynamic web applications. In research studies, such as this one, it has been proven that having a clear understanding of how to upload files is essential. Mastering Axios Multipart Form Data is a game-changer in <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">developing business software<\/a>, as it enables the seamless integration of file uploads into web applications, enhancing functionality and user interaction capabilities.<\/p><p>By reading this article, you will have a better understanding of Axios Multipart Form Data and how to send files through a form using Javascript. You will learn how to send files using the Axios.post() method, and how to configure your Axios request. You will also learn how to include multiple files in your form. So, if you are ready to learn more about Axios Multipart Form Data, let&#8217;s get started!<\/p><p><iframe data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/CaQEXZJM2OBjB8\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p><h2 class=\"wp-block-heading\">What is Axios Multipart Form Data?<\/h2><p>Utilizing Axios Multipart Form Data is crucial for <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">business software development<\/a>, offering a streamlined approach to handling file uploads and ensuring efficient data transfer from client to server, thereby enhancing the overall functionality and user experience of web applications. Axios Multipart Form Data is a way to send files through a form using Javascript. It allows developers to include multiple files in a form, and to send them to the server using the axios.post() method. It is an efficient way to send files from the client to the server and is essential for web developers.<\/p><p>The <a href=\"https:\/\/flatlogic.com\/blog\/what-is-material-ui\/\">Multipart Form<\/a> Data encoding type can be used to include files in the form data before transferring it to the server for it to be processed. There are other types of encoding as follows-<\/p><ol class=\"wp-block-list\"><li><strong><code>application\/ x-www-form-urlencoded<\/code>: <\/strong>The data is encoded like a string of queries. It separates the key-value pairs (denoted by &#8216;=&#8217;) with signs like &#8216;&amp;&#8217;.<\/li><li><strong><code>text\/ plain<\/code>:<\/strong> Here, the data gets transferred just as the text itself. That means it doesn&#8217;t convert it to code for transferring. It is generally used to debug and not to produce anything.<\/li><li><strong><code>multipart\/ form-data<\/code>: <\/strong>It can include files in the form of data as stated above. Here the data is sent in the form of chunks where a character that does not appear in the content is used as a boundary symbol.<\/li><\/ol> <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><p>However, HTML Training is very beneficial to know more information on this exciting platform and enhance your career growth in this Programming &amp; Frameworks field.<\/p><p>We can include any of these in our HTML form tag through the attribute- &#8220;<code>enctype<\/code>&#8221; which is optional.&nbsp;<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>&lt;form action = \"\/path\/to\/api\" method = \"POST\" enctype = \"ENCTYPE_HERE\"&gt;&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>It is pretty much simple to use them, and, likely, we all have already encountered it with the HTML tag- <strong>&lt;form>.<\/strong> We generally omit the attribute because the default does its job alright. <\/p><h2 class=\"wp-block-heading\"><strong>Multipart Form data and <code>x-www-form-urlencoded<\/code><\/strong><\/h2><p>Multipart Form Data and <code>x-www-form-urlencoded<\/code> are the main two methods for sending the <a href=\"https:\/\/flatlogic.com\/blog\/material-ui-icons-in-react\/\">HTML data<\/a> to the server. The complete set of data is sent as a long string of queries as far as <code>x-www-form-urlencoded<\/code> is concerned. On the other hand, Multipart Form Data uses data chunks to transfer them. Still, there are some similarities between them which are as follows-<\/p><ol class=\"wp-block-list\"><li>Both of them are used to send form data as POST requests.<\/li><li>The multipart form system is mostly used for sending binary data (more specifically to upload files), while the <code>x-www-form-urlencoded<\/code> is mostly used for sending text data.<\/li><li>Both of them are required to be supported by the user agents, such as a browser.<\/li><li>A specific character not occurring in the entire content is used to separate each part by multipart form data. On the other hand, one big string of queries signifies all the name-value pairs as far as <code>x-www-form-urlencoded<\/code> is concerned. Here, &#8216;%&#8217; replaces the reserved and alphanumeric characters. And, &#8216;%20&#8217; replaces the hex value like space.<\/li><li>The more efficient one out of these two is multipart form data. This is because a character does not need to be replaced with three bytes as the URL encoding requires.&nbsp;&nbsp;<\/li><\/ol><h2 class=\"wp-block-heading\"><strong>Differences between Fetch and Axios<\/strong><\/h2><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>Axios<\/strong><\/td><td><strong>Fetch<\/strong><\/td><\/tr><tr><td>The request object has a URL in Axios.<\/td><td>The request object does not have any URL in Fetch.<\/td><\/tr><tr><td>There is built-in XSRF in Axios.<\/td><td>There is no built-in XSRF in Fetch.<\/td><\/tr><tr><td>We can install Axios easily as it is a third-party package.<\/td><td>The built-in package in most browsers is Fetch. Therefore there is no need to install it in most cases.<\/td><\/tr><tr><td>The data property is used by Axios.<\/td><td>The body property is used by Fetch.<\/td><\/tr><tr><td>The &#8216;200&#8217; status and &#8216;OK&#8217; statusText signify that Axios is right.<\/td><td>The OK property contained in the response object signifies that Fetch is right.<\/td><\/tr><tr><td>The object is contained in the data of Axios.<\/td><td>The body of Fetch is stringified.<\/td><\/tr><tr><td>The transformation of JSON data is automatic in Axios.<\/td><td>There is a process of two steps while handling the JSON data. One is for making the actual request, and the other is for calling the JSON method intentionally.<\/td><\/tr><tr><td>The HTTP requests can be intercepted by Axios.<\/td><td>The HTTP requests can&#8217;t be intercepted by Fetch as per the default setting.<\/td><\/tr><tr><td>The requests can be canceled and timed out in Axios.<\/td><td>The requests can&#8217;t be canceled and timed out in Axios.<\/td><\/tr><tr><td>Several browsers are supported by Axios.<\/td><td>Only Firefox 39+, Chrome 42+, Safari 10.1+, and Chrome 42+ are supported by Fetch. This is called backward compatibility.<\/td><\/tr><tr><td>There is built-in support for download progress in Axios.<\/td><td>The upload progress is not supported by Fetch.<\/td><\/tr><\/tbody><\/table><\/figure><p>Let us proceed with considering each step. From the process of sending the form data and files to <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/12\/Admin-NodeJS-Copy-1-600x450.png\"  data-excerpt=\"Due to the non-blocking nature of Node.js, different threads execute different callbacks that are first delegated to the event loop. NodeJS runtime is responsible for handling all of this.\" href=\"https:\/\/flatlogic.com\/blog\/multi-threading-and-multiple-process-in-node-js\/\">Node.js<\/a> (Express) using Axios to receiving it, we&#8217;ll focus on it all.<\/p><h2 class=\"wp-block-heading\"><strong>How to Install Axios?<\/strong><\/h2><p>It has become very typical now to send <a href=\"https:\/\/mindmajix.com\/jboss\/configuring-the-http-connector\">HTTP requests<\/a> using Axios instead of <strong>fetch(). <\/strong>For installing Axios in the projects of Node, the following code needs to be followed. <\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>$ npm install Axios# OR$ yarn add Axios<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>A different method is also there. The files can be directly downloaded to the local machine. And then the library can be easily included as given below-<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>&lt;script src = \"https:\/\/ unpkg.com\/ axios\/ dist\/ axios.min.js\"&gt;&lt;\/script&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\"><strong>How to set <code>enctype<\/code> up with HTML and Axios?<\/strong><\/h2><p>The encoding type needs to be set up for sending the multipart data form. And Axios provides several ways to achieve this. None can be considered better than the other since every one of them is equally efficient when setting up <code>enctype<\/code>.<\/p><p>The default global type of encoding can be set up using Axios as given below. It will make the type of encoding for all Axios requests to be of form-data type.<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>axios. defaults. headers. post ['Content-Type'] = 'multipart\/form-data';<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>In the second method, we can change the <strong>headers to define<\/strong> the kind of encoding for all separate requests. We can do this by using the following code:<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Axios.post (\"\/path\/to\/api\", data, {&nbsp;&nbsp;&nbsp;&nbsp;Headers: {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Content- Type\": \"multipart\/ form-data\",&nbsp;&nbsp;&nbsp;&nbsp;},});<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>The last method is probably the simplest of all. What we need to do is simply set the <strong><code>enctype<\/code> <\/strong>in a particular <strong>&lt;form&gt; <\/strong>tag. The encoding type of that form will be adopted by Axios by just typing the given commands:<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>&lt;form action = \"\/some-endpoint\" method = \"HTTP_METHOD\" enctype = \"multipart\/ form data\"&gt;&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\"><strong>Axios + Express<\/strong><\/h2><p>Let us build a two-input form. One is for submitting the user name and the other is for selecting a profile image:<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>&lt;form action = \"\/Update profile\" method = \"post\"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type = \"text\" name = \"username\" placeholder = \"Type the name here\" \/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type = \"file\" name = \"userPicture\" \/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type = \"submit\"&gt; submit &lt;\/button&gt;&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>If we do not use Axios, the default events will unfold. A POST request would be sent to the \/update profile endpoint when we click on the &#8220;submit&#8221; button. However, an event listener can be attached to the button to override the default settings. As the requests of Axios are asynchronous, the headers can be changed and the requests can be customized.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"243\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44-1024x243.png\" alt=\"\" class=\"wp-image-12181 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44-1024x243.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44-600x142.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44-768x182.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44-1536x365.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-28-at-16.53.44.png 1660w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/243;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><a href=\"https:\/\/www.codegrepper.com\/codeimages\/update-image-with-axios-form.png\">https:\/\/www.codegrepper.com\/codeimages\/update-image-with-axios-form.png<\/a><\/p><h2 class=\"wp-block-heading\"><strong>Express Backend<\/strong><\/h2><p>Express JS is the cleanest as well as simplest method for spinning up a REST API. It works as a boilerplate for the server setup and to handle requests. <\/p><p>Although Express is just as perfect software as possible, some middleware expansion just adds more delight to it. Therefore we can install numerous middlewares on its top for expanding its function.<\/p><p>The installation of Express through <strong><code>npm<\/code> <\/strong>is straightforward. The <strong><code>express-file upload<\/code> <\/strong>middleware can be used to handle file uploading. We can install it also easily through <strong><code>npm<\/code>:<\/strong><\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>$ npm install Express - file upload<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>For starting a server and defining an endpoint to update a profile, the following steps are to be followed:<\/p><p>The library is imported-<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Const express = require (\"express\");Var file upload = require (\"express-file upload\");<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>The app instance is created-<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>Const app = express();<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>The middleware is registered as well as set up<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>App.use (file upload());App.use (express.urlencoded({extended: true}));<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>The endpoint is requested-<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>App.post ( \" \/update profile\", (req, res) =&gt;&nbsp;{&nbsp;&nbsp;Let username = req.body.username;&nbsp;&nbsp;Let userpicture = req.files.userPicture;&nbsp;&nbsp;Res.send('&nbsp;&nbsp;&nbsp;&nbsp;The username goes like: ${username}&nbsp;&nbsp;&nbsp;&nbsp;The uploaded image shows like: ${userPicture.name}&nbsp;&nbsp;');});<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>And finally, the server is started.<\/p><p>The data that the form sends contains the request that the request handler passes. All data is contained in the setup fields like a username. The req object&#8217;s files field contains all the files. Therefore we can get them <strong><code>username<\/code> <\/strong>through <strong><code>the req.body.username<\/code> <\/strong>and the file that is uploaded through <strong><code>the req.files.user picture<\/code>.<\/strong><\/p><p>After the form is submitted through the HTML page, the API receives a request. The given output is produced in the console:<\/p><figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><code>The username goes like this: The_entered_nameThe uploaded image shows like: Uploaded_name_of_file<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p>All the information about the file kike its name, the type of encoding, and much more is returned if <strong><code>req.files.user picture<\/code> <\/strong>is logged in.<\/p><h2 class=\"wp-block-heading\"><strong>Concluding Remarks<\/strong><\/h2><p>The Multipart form data has improved the efficiency of uploading data tremendously. We can upload a single object as chunks of the content. This enables us to upload any part of the content independently in the order we want. Also, the failed part can be re-transmitted without affecting the other parts of the documents. Hence, it doesn&#8217;t let the processing slow down in any way.<\/p>","protected":false},"excerpt":{"rendered":"<p>Axios is an HTTP client based on a promise. It supports an easy and simple API to work and handle requests both on Node.js and browsers. Since Axios is frontend as well as backend software, it is very similar to sending a file with Axios both in Node.js and the browser. The most important job of client-side JavaScript is to make HTTP requests for fetching and saving data. And that makes Axios a very useful resource. Easy intercepting responses\/requests and canceling them is another major aspect of Axios.<\/p>\n","protected":false},"author":32,"featured_media":12180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Learn to upload files with Axios using multipart\/form-data in JavaScript\nCompare multipart\/form-data vs x-www-form-urlencoded and their use cases\nConfigure Axios headers or form enctype to send single or multiple files\nImplement an Express backend using express-fileupload to read req.body and req.files","flatlogic_facts":[{"text":"multipart\/form-data sends form data in parts with a boundary, enabling file uploads from browser forms","source":""},{"text":"x-www-form-urlencoded encodes form data as key=value pairs joined by & and percent-encodes reserved characters","source":""},{"text":"In Axios you can set axios.defaults.headers.post['Content-Type']='multipart\/form-data' to use form-data globally","source":""},{"text":"With express-fileupload, text fields are in req.body and uploaded files in req.files (e.g., req.files.userPicture)","source":""},{"text":"Setting enctype=\"multipart\/form-data\" on an HTML form enables file upload handling by the server","source":""}],"footnotes":""},"categories":[28],"tags":[101,130,54,125],"class_list":["post-12078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-api","tag-axios","tag-javascript","tag-node-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Axios Multipart Form Data- Sending File Through A Form With Javascript - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"By reading this article, you will understande Axios Multipart Form Data and how to send files through a form using Javascript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Axios Multipart Form Data- Sending File Through A Form With Javascript\" \/>\n<meta property=\"og:description\" content=\"By reading this article, you will understande Axios Multipart Form Data and how to send files through a form using Javascript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-02T07:32:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T17:43:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Korra Shailaja\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Korra Shailaja\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Axios Multipart Form Data- Sending File Through A Form With Javascript - Flatlogic Blog","description":"By reading this article, you will understande Axios Multipart Form Data and how to send files through a form using Javascript.","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:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Axios Multipart Form Data- Sending File Through A Form With Javascript","og_description":"By reading this article, you will understande Axios Multipart Form Data and how to send files through a form using Javascript.","og_url":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-08-02T07:32:00+00:00","article_modified_time":"2024-02-23T17:43:43+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png","type":"image\/png"}],"author":"Korra Shailaja","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Korra Shailaja","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/"},"author":{"name":"Korra Shailaja","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/9bedebee72b1c131c3a3413647822009"},"headline":"Axios Multipart Form Data- Sending File Through A Form With Javascript","datePublished":"2022-08-02T07:32:00+00:00","dateModified":"2024-02-23T17:43:43+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/"},"wordCount":1617,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png","keywords":["Api","Axios","Javascript","Node.js"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/","url":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/","name":"Axios Multipart Form Data- Sending File Through A Form With Javascript - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png","datePublished":"2022-08-02T07:32:00+00:00","dateModified":"2024-02-23T17:43:43+00:00","description":"By reading this article, you will understande Axios Multipart Form Data and how to send files through a form using Javascript.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/07\/Post-Dark-13-1.png","width":1080,"height":1080,"caption":"Sending File Through A Form With Axios"},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/axios-multipart-form-data-sending-file-through-a-form-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Axios Multipart Form Data- Sending File Through A Form With Javascript"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/9bedebee72b1c131c3a3413647822009","name":"Korra Shailaja","description":"Korra Shailaja is working as a Digital Marketing professional &amp; Content writer in MindMajix Online Training. I Have good experience in handling technical content writing and aspire to learn new things to grow professionally. I am an expert in delivering content on the market demanding technologies like Mulesoft Training, Dell Boomi Tutorial, Elasticsearch Course, Fortinet Course, PostgreSQL Training, Splunk, Success Factor, Denodo, etc.","url":"https:\/\/flatlogic.com\/blog\/author\/korra\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=12078"}],"version-history":[{"count":8,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12078\/revisions"}],"predecessor-version":[{"id":15117,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12078\/revisions\/15117"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/12180"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=12078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=12078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=12078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}