summaryrefslogtreecommitdiff
path: root/dir.html
blob: da8ab1ccc348d48c960df2aba87416cec6e68ea4 (plain)
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
  <head>
    {{if .Name}}<title>{{ .Name }}</title>{{end}}
  </head>
  <body>
<h1>Index of {{ .Name }}</h1><br>
<section id="main">
<pre>{{range .ListFiles}}
  <a href="{{ .Path }}">{{ .Name }}</a>{{ .Size }}{{end}}
</pre>
</section>
<section id="nav">
  <h2>List of directories</h2>
<pre>{{range .ListCols}}
  <a href="{{ .Path }}">{{ .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>