1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!doctype html>
<html>
<head>
<title>axios - post example</title>
<link rel="stylesheet" type="text/css" href="/javascript/bootstrap/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>
|
