file_upload.pt
1.88 KB
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
<tal:block tal:define="oid oid|field.oid;
css_class css_class|field.widget.css_class;
style style|field.widget.style;
preview_url cstruct.get('preview_url')|cstruct.get('base64')|'';
ext str(cstruct.get('filename').split('.')[-1:][0]).lower()|[];">
${field.start_mapping()}
<tal:block tal:condition="preview_url and ext in ['jpg','jpeg','png','bmp','gif']">
<img id="preview-${oid}" alt="" src="${structure: preview_url}" style="width:100px;height:auto;"></img>
<br>
</tal:block>
<tal:block tal:condition="not preview_url or ext not in ['jpg','jpeg','png','bmp','gif']">
<img id="preview-${oid}" alt="" src="" style="width:100px;height:auto;"></img>
<br>
</tal:block>
<a id="label-${oid}" tal:condition="preview_url" class="label label-default" href="${structure: preview_url}"
target="_blank"><i class="fa fa-search"></i> View</a>
<input type="file" name="upload" id="${oid}"
tal:attributes="style style;
accept accept|field.widget.accept;
data-filename cstruct.get('filename');
attributes|field.widget.attributes|{};"/>
<input tal:define="uid cstruct.get('uid')"
tal:condition="uid"
type="hidden" name="uid" value="${uid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback('${oid}', function (oid) {
$('#' + oid).upload();
});
document.getElementById('${oid}').addEventListener('change', function () {
var output = document.getElementById('preview-${oid}');
output.src = URL.createObjectURL(this.files[0]);
document.getElementById('label-${oid}').remove();
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
});
</script>
</tal:block>