diff options
| author | ache <ache@ache.one> | 2019-02-14 04:10:52 +0100 |
|---|---|---|
| committer | ache <ache@ache.one> | 2019-02-14 04:10:52 +0100 |
| commit | fdbb4eeedf8793e24903990742e8a847200cacb3 (patch) | |
| tree | 5b5a3aae0c2af98d884d89249239046e6744c3e8 /dir.html | |
| parent | test PUT front-end (diff) | |
Grid CSS
Diffstat (limited to 'dir.html')
| -rw-r--r-- | dir.html | 108 |
1 files changed, 105 insertions, 3 deletions
@@ -4,8 +4,110 @@ {{if .Name}}<title>{{ .Name }}</title>{{end}} </head> <body> -<pre>{{range .ListEntries}} -<a href="{{ .Name }}">{{ .Name }}</a> {{ .Size }}{{end}} +<h1>Index of {{ .Name }}</h1><br> +<section id="main"> +<pre>{{range .ListFiles}} + <a href="{{ .Name }}">{{ .Name }}</a>{{ .Size }}{{end}} </pre> - </body> +</section> +<section id="nav"> + <h2>List of directories</h2> +<pre>{{range .ListCols}} + <a href="{{ .Name }}">{{ .Name }}</a>{{end}} +</pre> +</section> +<section id="dav"> + <div class="uploadDiv"> + <label for="fileinput">Select File</label> + <input id="fileinput" type="file"> + </div> + <div class="mkdirDiv"> + </div> +</section> +<div id="footer">Create with love 💟</div> +<script language="javascript"> +const input = document.getElementById('fileinput'); + +const upload = (file) => { + const l = window.location; + + let uri = l.protocol + '//' + l.hostname; + if( l.port !== '80' ) { + uri += ':' + l.port + } + uri += l.pathname + + console.log(uri) + + if( uri[uri.length - 1] !== '/' ) { + uri += '/' + } + + uri += file.name + + console.log(uri) + + fetch( encodeURI(uri) , { + method: 'PUT', + headers: { + "Content-Type": file.type + }, + body: file // This is your file object + }).then( + response => { + console.log(response); + } + ).then( + success => { + console.log(success); + } + ).catch( + error => { + console.log(error); + } + ); +}; + +const onSelectFile = () => { + let i = 0; + for( ; i < input.files.length ; i++) { + upload(input.files[i]); + } +} + +input.addEventListener('change', onSelectFile, false); +</script> +<style> +body { + display: grid; + grid-template-columns: calc(100% / 6) calc(100% / 3 + 100% / 6) calc(100%/3); + grid-template-areas: "h h h" + "nav main dav" + "nav f f"; +} + +h1 { + grid-area: h; + background-color: #8ca0ff; +} +#nav { + grid-area: nav; + background-color: #ffa0fc; +} + +#main { + grid-area: main; + background-color: #00ff64; +} +#dav { + grid-area: dav; + background-color: #ff0f64; +} + +#footer { + grid-area: f; + background-color: #fcffa0; +} +</style> +</body> </html> |