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
+46 -49
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
var someString = document.getElementById('someString').value; const someString = document.getElementById('someString').value;
var someNumber = document.getElementById('someNumber').valueAsNumber; const someNumber = document.getElementById('someNumber').valueAsNumber;
var files = Array.from(document.getElementById('someSmallFile').files) const files = Array.from(document.getElementById('someSmallFile').files);
var nestedString = document.getElementById('nested.someString').value; const nestedString = document.getElementById('nested.someString').value;
var passAsFormData = document.querySelector('input[name="format"]:checked').value==="formData"; const passAsFormData = document.querySelector('input[name="format"]:checked').value === "formData";
var data = passAsFormData? new FormData() : {} const data = passAsFormData ? new FormData() : {};
function addValueToData(key, val, isValDefined){ // Helper to add value to FormData or plain object
if (!isValDefined){ function addValueToData(key, val, isValDefined) {
return if (!isValDefined) return;
}
if(passAsFormData){ if (passAsFormData) {
data.append(key, val) data.append(key, val);
} else { } 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;
}
}
}
var keys = key.split(".") addValueToData("someString", someString, someString.length > 0);
if (keys.length===1){ addValueToData("someNumber", someNumber, !isNaN(someNumber));
data[key] = val if (files.length) addValueToData("someSmallFile", files[0], true);
} else { addValueToData("nested.someString", nestedString, nestedString !== undefined && nestedString !== null);
data[keys[0]]={
[keys[1]]: val
}
}
}
} const errorOutput = document.getElementById("errorOutput");
addValueToData("someString", someString, someString.length) axios({
addValueToData("someNumber", someNumber, !isNaN(someNumber)) url: '/postMultipartFormData/server',
if (files.length){ data: data,
addValueToData("someSmallFile", files[0], true) method: "post",
} headers: passAsFormData ? { "Content-Type": "multipart/form-data" } : {},
addValueToData("nested.someString", nestedString, nestedString.length) })
.then(res => {
var errorOutput = document.getElementById("errorOutput") errorOutput.innerHTML = "Successfully posted!";
})
axios({ .catch(err => {
url: '/postMultipartFormData/server', console.error("Error posting data:", err);
data: data, errorOutput.innerHTML = `${err.message}`;
method: "post", });
headers: { "Content-Type": "multipart/form-data" }, };
}) })();
.then(function (res) { </script>
errorOutput.innerHTML = "";
})
.catch(function (err) {
errorOutput.innerHTML = err.message;
});
};
})();
</script>
</body> </body>
</html> </html>