Skip to content

Commit f356416

Browse files
author
Valerij Talagayev
committed
added extensions
1 parent 88a967a commit f356416

File tree

4 files changed

+85
-29
lines changed

4 files changed

+85
-29
lines changed

‎openmmdl/openmmdl_setup/templates/AmberOptions.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{% extends "layout.html" %}
22
{% block title %}Prepare Amber Files{% endblock %}
33

4-
{% macro fileinput(id, title="") %}
4+
{% macro fileinput(id, title="", accept="") %}
55
<div class="input-group om-filedrop" data-file-input="{{ id }}">
66
<label class="btn btn-default btn-file input-group-addon" >
7-
Browse... <input type="file" name="{{ id }}" id="{{ id }}" style="display: none" onchange="optionChanged()" />
7+
Browse... <input type="file" name="{{ id }}" id="{{ id }}" style="display: none" {% if accept %}accept="{{ accept }}"{% endif %} onchange="if (omValidateFileInput(this)) optionChanged()" />
88
</label>
99
<span id="{{ id }}_label" class="form-control om-filedrop-label" style="overflow: hidden; overflow-wrap: anywhere;" title="{{ title }}"></span>
1010
</div>
@@ -55,7 +55,7 @@
5555
<div class="row">
5656
<div class="col-lg-6" style="padding-left: 30px">
5757
<label for="protLabel"> Receptor File (.pdb) </label>
58-
{{ fileinput('protFile') }}
58+
{{ fileinput('protFile', accept='.pdb') }}
5959
</div>
6060

6161
<div class="col-lg-4" >
@@ -93,9 +93,9 @@
9393
<div id="dnaOptions">
9494
<div class="form-group">
9595
<div class="row">
96-
<div class="col-lg-4" style="padding-left: 30px">
96+
<div class="col-lg-6" style="padding-left: 30px">
9797
<label for="dnaFile"> Receptor File (.pdb) </label>
98-
{{ fileinput('dnaFile') }}
98+
{{ fileinput('dnaFile', accept='.pdb') }}
9999
</div>
100100

101101
<div class="col-lg-4">
@@ -126,9 +126,9 @@
126126
<div id="rnaOptions">
127127
<div class="form-group">
128128
<div class="row">
129-
<div class="col-lg-4" style="padding-left: 30px">
129+
<div class="col-lg-6" style="padding-left: 30px">
130130
<label for="rnaFile"> Receptor File (.pdb) </label>
131-
{{ fileinput('rnaFile') }}
131+
{{ fileinput('rnaFile', accept='.pdb') }}
132132
</div>
133133

134134
<div class="col-lg-4">
@@ -162,9 +162,9 @@
162162
<div id="carboOptions">
163163
<div class="form-group">
164164
<div class="row">
165-
<div class="col-lg-4" style="padding-left: 30px">
165+
<div class="col-lg-6" style="padding-left: 30px">
166166
<label for="carboFile"> Receptor File (.pdb) </label>
167-
{{ fileinput('carboFile') }}
167+
{{ fileinput('carboFile', accept='.pdb') }}
168168
</div>
169169

170170
<div class="col-lg-4">
@@ -205,7 +205,7 @@
205205
<div class="col-lg-6">
206206
<div class="form-group">
207207
<label for="nmLigFile1">PDB/SDF File</label>
208-
{{ fileinput('nmLigFile') }}
208+
{{ fileinput('nmLigFile', accept='.sdf,.pdb') }}
209209
</div>
210210

211211
<div class="form-group">
@@ -268,17 +268,17 @@
268268
<div class="col-lg-12">
269269
<div class="form-group">
270270
<label for="spLigFile1" class=" control-label col-md-3">PDB File</label>
271-
<div class="col-md-9" style="margin-bottom: 15px">{{ fileinput('spLigFile', 'As the special ligand usually comes with receptor from RCSB website, here we would ask the user to submit it only in pdb format.') }}</div>
271+
<div class="col-md-9" style="margin-bottom: 15px">{{ fileinput('spLigFile', 'As the special ligand usually comes with receptor from RCSB website, here we would ask the user to submit it only in pdb format.', accept='.pdb') }}</div>
272272
</div>
273273

274274
<div class="form-group">
275275
<label for="prepcFile1" class="control-label col-md-3">Prepc File</label>
276-
<div class="col-md-9" style="margin-bottom: 15px" >{{ fileinput('prepcFile') }}</div>
276+
<div class="col-md-9" style="margin-bottom: 15px" >{{ fileinput('prepcFile', accept='.prepc') }}</div>
277277
</div>
278278

279279
<div class="form-group">
280280
<label for="frcmodFile1" class="control-label col-md-3">Frcmod File</label>
281-
<div class="col-md-9" style="margin-bottom: 15px">{{ fileinput('frcmodFile') }}</div>
281+
<div class="col-md-9" style="margin-bottom: 15px">{{ fileinput('frcmodFile', accept='.frcmod') }}</div>
282282
</div>
283283
</div>
284284

‎openmmdl/openmmdl_setup/templates/configureAmberFiles.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{% extends "layout.html" %}
22

3-
{% macro fileinput(id) %}
3+
{% macro fileinput(id, accept="") %}
44
<div class="input-group om-filedrop" data-file-input="{{ id }}">
55
<label class="btn btn-default btn-file input-group-addon">
6-
Browse... <input type="file" name="{{ id }}" id="{{ id }}" style="display: none" {{'disabled' if disabled else ''}} onchange="optionChanged()" />
6+
Browse... <input type="file" name="{{ id }}" id="{{ id }}" style="display: none" {% if accept %}accept="{{ accept }}"{% endif %} {{'disabled' if disabled else ''}} onchange="if (omValidateFileInput(this)) optionChanged()" />
77
</label>
88
<span id="{{ id }}_label" class="form-control om-filedrop-label"></span>
99
</div>
@@ -29,11 +29,11 @@
2929
<div class="col-lg-12">
3030
<div class="form-group">
3131
<label for="prmtopFile" class="control-label col-md-2">Prmtop File</label>
32-
<div class="col-md-10">{{ fileinput('prmtopFile') }}</div>
32+
<div class="col-md-10">{{ fileinput('prmtopFile', accept='.prmtop') }}</div>
3333
</div>
3434
<div class="form-group">
3535
<label for="inpcrdFile" class="control-label col-md-2">Inpcrd File</label>
36-
<div class="col-md-10" >{{ fileinput('inpcrdFile') }}</div>
36+
<div class="col-md-10" >{{ fileinput('inpcrdFile', accept='.inpcrd') }}</div>
3737
</div>
3838
</div>
3939

‎openmmdl/openmmdl_setup/templates/configurePdbFile.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{% extends "layout.html" %}
22

3-
{% macro fileinput(id) %}
3+
{% macro fileinput(id, accept="") %}
44
<div class="input-group om-filedrop" data-file-input="{{ id }}">
55
<label class="btn btn-default btn-file input-group-addon">
66
<span title="Select File"style=" font-weight: 700;">Browse... </span>
7-
<input type="file" name="{{ id }}" id="{{ id }}" style="display: none" onchange="optionChanged()"/>
7+
<input type="file" name="{{ id }}" id="{{ id }}" style="display: none" {% if accept %}accept="{{ accept }}"{% endif %} onchange="if (omValidateFileInput(this)) optionChanged()"/>
88
</label>
99
<span id="{{ id }}_label" class="form-control om-filedrop-label"></span>
1010
</div>
@@ -21,7 +21,7 @@
2121
<form method="post" enctype="multipart/form-data" action="{{ url_for('configureFiles') }}" class="form-horizontal">
2222
<div class="form-group">
2323
<label for="filename" class="control-label col-md-2">PDB File</label>
24-
<div class="col-md-10">{{ fileinput('file') }}</div>
24+
<div class="col-md-10">{{ fileinput('file', accept='.pdb') }}</div>
2525
</div>
2626
<div class="form-group">
2727
<label for="forcefield" class="control-label col-md-2">Force Field</label>
@@ -45,7 +45,7 @@
4545
</p>
4646
<div class="form-group">
4747
<label for="filename" class="control-label col-md-2">Ligand File</label>
48-
<div class="col-md-10" title="The supported formats are SDF, MOL and MOL2"> {{fileinput('sdfFile') }}</div>
48+
<div class="col-md-10" title="The supported formats are SDF, MOL and MOL2"> {{ fileinput('sdfFile', accept='.sdf,.mol,.mol2') }}</div>
4949
</div>
5050
<div class="form-group">
5151
<label for="smallMoleculeForceField" class="control-label col-md-2">Small Molecule Force Field</label>

‎openmmdl/openmmdl_setup/templates/layout.html‎

Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,64 @@
9393
}
9494
</script>
9595

96+
<script>
97+
// File extension validation based on <input accept="..."> (works for Browse + drag&drop).
98+
function omParseAcceptExts(accept) {
99+
if (!accept) return [];
100+
return accept.split(',')
101+
.map(function(s){ return (s || '').trim().toLowerCase(); })
102+
.filter(function(s){ return s && s[0] === '.'; });
103+
}
104+
105+
function omNameMatchesExt(name, exts) {
106+
var n = (name || '').toLowerCase();
107+
for (var i = 0; i < exts.length; i++) {
108+
if (n.endsWith(exts[i])) return true;
109+
}
110+
return false;
111+
}
112+
113+
function omClearFileInput(input) {
114+
try { input.value = ''; } catch (e) {}
115+
// Clear label if present.
116+
var lbl = document.getElementById(input.id + "_label");
117+
if (lbl) lbl.textContent = "";
118+
}
119+
120+
// Called by onchange in templates. Return true if OK; false if rejected and cleared.
121+
function omValidateFileInput(input) {
122+
var allowed = omParseAcceptExts(input.getAttribute('accept'));
123+
if (!allowed.length) return true; // no restriction
124+
if (!input.files || input.files.length === 0) return true;
125+
126+
for (var i = 0; i < input.files.length; i++) {
127+
var f = input.files[i];
128+
if (!omNameMatchesExt(f.name, allowed)) {
129+
alert("Invalid file type: " + f.name + "\nAllowed: " + allowed.join(', '));
130+
omClearFileInput(input);
131+
return false;
132+
}
133+
}
134+
return true;
135+
}
136+
137+
// Used by drag&drop to keep only acceptable files (or reject entirely if none acceptable).
138+
function omFilterFilesForInput(input, files) {
139+
var allowed = omParseAcceptExts(input.getAttribute('accept'));
140+
if (!allowed.length) return Array.prototype.slice.call(files);
141+
var kept = [];
142+
for (var i = 0; i < files.length; i++) {
143+
if (omNameMatchesExt(files[i].name, allowed)) kept.push(files[i]);
144+
}
145+
if (!kept.length) {
146+
alert("Invalid file type.\nAllowed: " + allowed.join(', '));
147+
return null;
148+
}
149+
if (!input.multiple && kept.length > 1) kept = [kept[0]];
150+
return kept;
151+
}
152+
</script>
153+
96154
<script>
97155
/* File drag & drop */
98156
(function() {
@@ -140,14 +198,12 @@
140198
var files = (e.dataTransfer && e.dataTransfer.files) ? e.dataTransfer.files : null;
141199
if (!files || files.length === 0) return;
142200

143-
// Respect single-file inputs.
144-
if (!input.multiple && files.length > 1) {
145-
var dt = new DataTransfer();
146-
dt.items.add(files[0]);
147-
input.files = dt.files;
148-
} else {
149-
input.files = files;
150-
}
201+
var filtered = omFilterFilesForInput(input, files);
202+
if (!filtered || filtered.length === 0) return;
203+
204+
var dt = new DataTransfer();
205+
for (var i = 0; i < filtered.length; i++) dt.items.add(filtered[i]);
206+
input.files = dt.files;
151207

152208
// Trigger existing onchange handlers (optionChanged()).
153209
input.dispatchEvent(new Event('change', { bubbles: true }));

0 commit comments

Comments
 (0)