mirrors/axios
2
0
Fork 0
mirror of https://github.com/tenrok/axios.git synced 2026-06-20 20:00:40 +03:00
Code Activity

refactor: form data handling in index.html (#7170)

Browse Source 
* Refactor form data handling in index.html

* Update examples/postMultipartFormData/index.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update examples/postMultipartFormData/index.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Jay <jasonsaayman@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Anchal Singh
2025-10-23 18:40:03 +05:30
committed by GitHub
parent 889f8ef8be
commit 46e1981d0f
1 changed files with 47 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/postMultipartFormData/index.html
+47 -50
View File
@@ -70,62 +70,59 @@
<script src="/axios.min.js"></script> <script src="/axios.min.js"></script>
<script> <script>
(function () { (function () {
document.getElementById('post').onclick = function () { document.getElementById('post').onclick = function () {
document.getElementById("checkNetwork").classList.remove("hidden") // Show network/loading indicator
document.getElementById("checkNetwork").classList.remove("hidden");
// Grab values from inputs
const someString = document.getElementById('someString').value;
const someNumber = document.getElementById('someNumber').valueAsNumber;
const files = Array.from(document.getElementById('someSmallFile').files);
const nestedString = document.getElementById('nested.someString').value;
const passAsFormData = document.querySelector('input[name="format"]:checked').value === "formData";
var someString = document.getElementById('someString').value; const data = passAsFormData ? new FormData() : {};
var someNumber = document.getElementById('someNumber').valueAsNumber;
var files = Array.from(document.getElementById('someSmallFile').files)
var nestedString = document.getElementById('nested.someString').value;
var passAsFormData = document.querySelector('input[name="format"]:checked').value==="formData";
var data = passAsFormData? new FormData() : {} // Helper to add value to FormData or plain object
function addValueToData(key, val, isValDefined) {
if (!isValDefined) return;
function addValueToData(key, val, isValDefined){ if (passAsFormData) {
if (!isValDefined){ data.append(key, val);
return } else {
} const keys = key.split(".");
if (keys.length === 1) {
data[key] = val;
} else {
// Preserve existing nested objects if any
data[keys[0]] = data[keys[0]] || {};
data[keys[0]][keys[1]] = val;
}
}
}
if(passAsFormData){ addValueToData("someString", someString, someString.length > 0);
data.append(key, val) addValueToData("someNumber", someNumber, !isNaN(someNumber));
} else { if (files.length) addValueToData("someSmallFile", files[0], true);
addValueToData("nested.someString", nestedString, nestedString !== undefined && nestedString !== null);
var keys = key.split(".") const errorOutput = document.getElementById("errorOutput");
if (keys.length===1){
data[key] = val
} else {
data[keys[0]]={
[keys[1]]: val
}
}
}
} axios({
url: '/postMultipartFormData/server',
addValueToData("someString", someString, someString.length) data: data,
addValueToData("someNumber", someNumber, !isNaN(someNumber)) method: "post",
if (files.length){ headers: passAsFormData ? { "Content-Type": "multipart/form-data" } : {},
addValueToData("someSmallFile", files[0], true) })
} .then(res => {
addValueToData("nested.someString", nestedString, nestedString.length) errorOutput.innerHTML = "Successfully posted!";
})
var errorOutput = document.getElementById("errorOutput") .catch(err => {
console.error("Error posting data:", err);
axios({ errorOutput.innerHTML = `${err.message}`;
url: '/postMultipartFormData/server', });
data: data, };
method: "post", })();
headers: { "Content-Type": "multipart/form-data" }, </script>
})
.then(function (res) {
errorOutput.innerHTML = "";
})
.catch(function (err) {
errorOutput.innerHTML = err.message;
});
};
})();
</script>
</body> </body>
</html> </html>