file_upload.pt
3.35 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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')|'';
ext str(cstruct.get('filename').split('.')[-1:][0]).lower()|[];
fname str(cstruct.get('filename'))|'';
delete cstruct.get('delete')|'';
maxsize field.widget.size|5242880;
img ['jpg', 'jpeg', 'gif', 'png', 'svg', 'eps', 'psd'];
video ['avi', 'mov', 'mp4'];
title title|field.title;
">
${field.start_mapping()}
<div class="thumbnail" tal:condition="ext in img or ext in video or ext=='pdf'">
<img tal:condition="ext in img" id="preview-${oid}" alt="" src="${preview_url}" style="${style}"
onload="window.URL.revokeObjectURL(this.src);"></img>
<video tal:condition="ext in video" style="${style}" controls src="${preview_url}" type="video/${ext}"
id="preview-${oid}">
Your browser does not support the video tag.
</video>
<video tal:condition="ext=='mp4'" controls style="${style}" src="${preview_url}" type="video/mp4"
id="preview-${oid}">
Your browser does not support the video tag.
</video>
<embed tal:condition="ext=='pdf'" src="${preview_url}" style="${style}" id="preview-${oid}">
</div>
<a tal:condition="ext" class="label label-default" href="${preview_url}" target="_blank" id="a-preview-${oid}"><i
class="fa fa-search"></i> View</a>
<div class="flex items-center justify-center w-full">
<label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-80 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
</svg>
<p class="font-bold mb-2">Unggah ${title}</p>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klik untuk mengunggah</span> atau seret dan jatuhkan file</p>
<p class="text-xs text-gray-500 dark:text-gray-400">${img}</p>
</div>
<input id="dropzone-file" type="file" class="hidden" />
</label>
</div>
<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}").onchange = function () {
if (this.files[0].size > ${ maxsize }) {
alert("File is too big!");
this.value = "";
document.getElementById('preview-' + this.id).src = '';
}
document.getElementById('preview-' + this.id).src = window.URL.createObjectURL(this.files[0]);
document.getElementById('labeldelete-' + this.id).remove();
document.getElementById('label-' + this.id).remove();
};
</script>
</tal:block>