forked from json-editor/json-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
multiple_upload_base64.html
65 lines (61 loc) · 2.29 KB
/
multiple_upload_base64.html
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="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/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>