File Dialogs
filedialog.htm (hint: right click, save as)
1<!--
2 Test/Development/Documentation page
3 - enable web server file access
4 - upload to web file path, e.g. /sd/dev/filedialog.htm
5 - open in framework by e.g. http://test1.local/#/dev/filedialog.htm
6-->
7
8<div class="filedialog" id="fileselect"/>
9
10<div class="panel panel-primary">
11 <div class="panel-heading">FileDialog Test</div>
12 <div class="panel-body">
13
14 <h2>Dynamic API</h2>
15
16 <p>
17 <button class="btn btn-default" id="action-load">Load</button>
18 <button class="btn btn-default" id="action-save">Save</button>
19 </p>
20 <pre id="log"/>
21
22 <h2>Data API</h2>
23
24 <div class="input-group">
25 <input type="text" class="form-control font-monospace" placeholder="Enter file name"
26 name="filename" id="input-filename" value="" autocapitalize="none" autocorrect="off"
27 autocomplete="section-demo" spellcheck="false">
28 <div class="input-group-btn">
29 <!-- use data-toggle="filedialog", data-target & data-input on the button: -->
30 <button type="button" class="btn btn-default" data-toggle="filedialog" data-target="#fd-api" data-input="#input-filename">Select</button>
31 </div>
32 </div>
33
34 <!-- This is the file dialog triggered by the button: -->
35 <div class="filedialog" id="fd-api" data-options='{
36 "title": "This is a data API dialog",
37 "path": "/sd/foo/",
38 "quicknav": ["/sd/", "/sd/foo/", "/sd/bar"]
39 }' />
40 <!-- …that's it, no JS code necessary.
41 Note: JSON syntax needs to be strict here, see JS console for errors.
42 -->
43
44 </div>
45</div>
46
47<script>
48
49// =======================================================================================
50// FileDialog is a Dialog with an embedded FileBrowser.
51//
52// The input object combines the dialog button and the file browser data.
53//
54// Options:
55// title: 'Select file', -- dialog title
56// submit: 'Select', -- label of submit button
57// select: 'f', -- 'f' = only files selectable (default), 'd' = only directories
58// onSubmit: null, -- callback function(input)
59// onCancel: null, -- callback function(input)
60//
61// …inherited from FileBrowser:
62// path: '',
63// quicknav: ['/sd/', '/store/'],
64// filter: null,
65// sortBy: null,
66// sortDir: 1,
67//
68// …inherited from Dialog:
69// backdrop: true,
70// keyboard: true,
71// transition: 'fade',
72// size: 'lg',
73// onUpdate: null,
74//
75
76// Init dialog:
77$("#fileselect").filedialog({
78 path: '/store/scripts/',
79 quicknav: ['/store/scripts/', '/store/events/', '/store/obd2ecu/'],
80});
81
82$('#action-load').on('click', function(){
83 $('#log').empty();
84 $("#fileselect").filedialog('show', {
85 title: "Load Script",
86 submit: "Load",
87 onSubmit: function(input) {
88 // This is called when the user doubleclicks an entry or presses Enter in a directory.
89 // Note: you need to check if input.file is valid (empty = directory selected).
90 if (input.file)
91 $('#log').text('Loading: "' + input.path + '"\n');
92 else
93 $('#log').text('Directory selection: "' + input.path + '"\n');
94 },
95 onCancel: function(input) {
96 // This is called when the user cancels or closes the dialog.
97 $('#log').text('Load cancelled\n');
98 },
99 });
100});
101
102$('#action-save').on('click', function(){
103 $('#log').empty();
104 $("#fileselect").filedialog('show', {
105 title: "Save Script",
106 submit: "Save",
107 onSubmit: function(input) {
108 if (input.file)
109 $('#log').text('Saving: "' + input.path + '"\n');
110 else
111 $('#log').text('Directory selection: "' + input.path + '"\n');
112 },
113 onCancel: function(input) {
114 $('#log').text('Save cancelled\n');
115 },
116 });
117});
118
119</script>