file_upload.html · rin/polar

Code Issues Pull requests Releases 9 Activity

file_upload.html · 81 lines · 3.4 KB

1	{{define "content"}}
2	<div class="container">
3	{{template "repo_header" .}}
4
5	<div class="card" style="max-width:680px;">
6	<div class="card-header" style="padding:0.6rem 0.9rem;">
7	<span class="font-semibold text-sm flex items-center gap-2">
8	{{icon "upload" "size-4"}}
9	{{t .Lang "file.upload_file"}}
10	</span>
11	<span class="font-mono text-xs text-muted">{{.Repo.OwnerUsername}}/{{.Repo.Name}}</span>
12	</div>
13	<form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/upload" enctype="multipart/form-data" class="card-body flex flex-col gap-3">
14	<input type="hidden" name="_csrf" value="{{.CSRFToken}}">
15
16	<div class="flex flex-col gap-1">
17	<label class="upload-drop" id="upload-drop" for="files">
18	{{icon "upload" "size-5"}}
19	<span class="text-sm font-medium">{{t .Lang "file.upload_pick"}}</span>
20	<span class="text-xs">{{t .Lang "file.upload_hint"}}</span>
21	<input id="files" name="files" type="file" multiple style="display:none;">
22	</label>
23	<div id="upload-list" class="text-xs font-mono text-muted"></div>
24	</div>
25
26	<div class="flex flex-col gap-1" style="max-width:300px;">
27	<label class="text-xs font-semibold" for="path">{{t .Lang "file.upload_dest"}}</label>
28	<input id="path" name="path" class="input font-mono" value="{{.SubPath}}" placeholder="{{t .Lang "file.upload_dest_ph"}}">
29	</div>
30
31	<div class="flex flex-col gap-1" style="max-width:240px;">
32	<label class="text-xs font-semibold" for="ref">{{t .Lang "file.branch"}}</label>
33	<select id="ref" name="ref" class="input font-mono">
34	{{range .Branches}}<option value="{{.}}" {{if eq . $.Ref}}selected{{end}}>{{.}}</option>{{end}}
35	</select>
36	</div>
37
38	<div class="flex flex-col gap-1">
39	<label class="text-xs font-semibold" for="message">{{t .Lang "file.message"}}</label>
40	<input id="message" name="message" class="input font-mono" placeholder="Add files">
41	</div>
42
43	<div class="flex items-center gap-2 pt-1 flex-wrap">
44	<button type="submit" class="btn btn-primary btn-sm">
45	{{icon "check" "size-3.5"}}
46	<span>{{t .Lang "file.upload_submit"}}</span>
47	</button>
48	<a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tree/{{.Ref}}{{if .SubPath}}/{{.SubPath}}{{end}}" class="btn btn-ghost btn-sm">
49	<span>{{t .Lang "common.cancel"}}</span>
50	</a>
51	<span class="text-xs text-muted">{{t .Lang "file.upload_replace_hint"}}</span>
52	</div>
53	</form>
54	</div>
55	</div>
56	<script>
57	(function () {
58	var input = document.getElementById('files');
59	var drop = document.getElementById('upload-drop');
60	var list = document.getElementById('upload-list');
61	function render() {
62	var names = [];
63	for (var i = 0; i < input.files.length; i++) names.push(input.files[i].name);
64	list.textContent = names.length ? names.join(' · ') : '';
65	}
66	input.addEventListener('change', render);
67	['dragover', 'dragenter'].forEach(function (ev) {
68	drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('drag'); });
69	});
70	['dragleave', 'drop'].forEach(function (ev) {
71	drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('drag'); });
72	});
73	drop.addEventListener('drop', function (e) {
74	if (e.dataTransfer && e.dataTransfer.files.length) {
75	input.files = e.dataTransfer.files;
76	render();
77	}
78	});
79	})();
80	</script>
81	{{end}}