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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSON Editor multiple file upload (base64)</title>
<script src="../../../javascript/json-editor/jsoneditor.min.js"></script>
</head>
<body>
<h1>JSON Editor multiple file upload (base64)</h1>
<div>Upload multiple files simultaneously. Add multiple files in the upload dialog and new rows in the picture array will automatically be added. Description will not be overwritten for the current selected element.
</div>
<div id='editor_holder'></div>
<button id='submit'>Submit (console.log)</button>
<script>
// Initialize the editor with a JSON schema
var editor = new JSONEditor(document.getElementById('editor_holder'),{
"schema": {
"type": "object",
"title": "Car",
"properties": {
"pictures": {
"type": "array",
"title": "Pictures",
"items": {
"type": "object",
"title": "Image",
"format": "grid",
"properties": {
"file": {
"type": "string",
"title": "file",
"media": {
"binaryEncoding": "base64",
"type": "img/png"
},
"options": {
"grid_columns": 6,
"multiple": true,
}
},
"description": {
"type": "string",
"title": "Description",
"options": {
"grid_columns": 6
}
}
}
}
}
}
}
});
// Hook up the submit button to log to the console
document.getElementById('submit').addEventListener('click',function() {
// Get the value from the editor
console.log(editor.getValue());
});
</script>
</body>
</html>
|
