Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

multipart/form-data playground #4465

Merged
merged 9 commits into from Mar 15, 2022
Merged

multipart/form-data playground #4465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bd0ca27
adding toFormData test
carpben Apr 17, 2021
2d13996
adding toFormData
carpben Apr 17, 2021
3509fe0
Merge branch 'master' into master
jasonsaayman Dec 23, 2021
04cf64b
Merge pull request #1 from axios/master
carpben Jan 23, 2022
68f20ae
merge from axios/axios
carpben Feb 6, 2022
87ae921
initial multipart-FormData playground
carpben Feb 12, 2022
cbb125f
formdata playground title
carpben Feb 12, 2022
9d5616e
Fix examples/postMultipartFormData/server.js to the examples/**/serve…
carpben Feb 12, 2022
b4c794c
Merge branch 'master' into formData-playground
jasonsaayman Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
131 changes: 131 additions & 0 deletions examples/postMultipartFormData/index.html
View file
Open in desktop
@@ -0,0 +1,131 @@
<!doctype html>
<html>
<head>
<title>axios - post example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<style>
.postSubmission {
margin-top: 40px;

/* white-space: pre-line; */
}
.checkNetwork {
margin-bottom: 10px;
}
.text-strong {
font-weight: 700;
}
.hidden {
display: none;
}
</style>

</head>
<body class="container">
<h1>Post multipart/form-data</h1>

<form role="form" class="form" onsubmit="return false;">
<div class="form-group">
<label for="data">someString</label>
<input id="someString" type="text"></input>
</div>
<div class="form-group">
<label for="data">someNumber</label>
<input id="someNumber" type="number"></input>
</div>
<div class="form-group">
<label for="data">someSamllFile</label>
<input id="someSamllFile" type="file"></input>
</div>
<div class="form-group">
<label for="data">nested.someString</label>
<input id="nested.someString" type="text"></input>
</div>
<div>
<input type="radio" name="format" value="formData"
checked>
<label for="huey">Pass to Axios as FormData</label>
</div>
<div>
<input type="radio" name="format" value="json"
checked>
<label for="huey">Pass to Axios as json. Let Axios convert to form data</label>
</div>
<button id="post" type="button" class="btn btn-primary">POST</button>
</form>

<div class="postSubmission">

<div id="checkNetwork" class="checkNetwork hidden">
<span class="text-strong">Check devtools to see details of request sent, and content of FormData. </span><br/>
In Chromium check: devtools -> network tab -> request to "server" -> payload tab
</div>


<div id="errorOutput" class="text-danger">
</div>

</div>

<script src="/axios.min.js"></script>
<script>
(function () {

document.getElementById('post').onclick = function () {
document.getElementById("checkNetwork").classList.remove("hidden")

var someString = document.getElementById('someString').value;
var someNumber = document.getElementById('someNumber').valueAsNumber;
var files = Array.from(document.getElementById('someSamllFile').files)
var nestedString = document.getElementById('nested.someString').value;
var passAsFormData = document.querySelector('input[name="format"]:checked').value==="formData";

var data = passAsFormData? new FormData() : {}

function addValueToData(key, val, isValDefined){
if (!isValDefined){
return
}

if(passAsFormData){
data.append(key, val)
} else {

var keys = key.split(".")
if (keys.length===1){
data[key] = val
} else {
data[keys[0]]={
[keys[1]]: val
}
}
}

}

addValueToData("someString", someString, someString.length)
addValueToData("someNumber", someNumber, !isNaN(someNumber))
if (files.length){
addValueToData("someSmallFile", files[0], true)
}
addValueToData("nested.someString", nestedString, nestedString.length)

var errorOutput = document.getElementById("errorOutput")

axios({
url: '/postMultipartFormData/server',
data: data,
method: "post",
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (res) {
errorOutput.innerHTML = "";
})
.catch(function (err) {
errorOutput.innerHTML = err.message;
});
};
})();
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions examples/postMultipartFormData/server.js
View file
Open in desktop
@@ -0,0 +1,13 @@
module.exports = function (req, res) {

req.on('data', function (chunk) {
});

req.on('end', function () {
console.log('POST received');
res.writeHead(200, {
'Content-Type': 'text/json'
});
res.end();
});
};