make updates

README.md

@@ -8,10 +8,8 @@
 + [ ] Rename files
 + [ ] Upload files and drag & drop
 + [ ] Delete files
-+ [ ] Show text files
++ [ ] Download files
-+ [ ] Show pictures
++ [ ] Preview files
-+ [ ] Show videos
-+ [ ] Show music
 
 ```
 filemanager {

assets/public/css/styles.css

@@ -1,153 +1,146 @@
-* { padding: 0; margin: 0; }
+* {
-
+    padding: 0;
+    margin: 0;
+}
 body {
-	font-family: sans-serif;
+    font-family: 'Roboto', sans-serif;
-	text-rendering: optimizespeed;
+    text-rendering: optimizespeed;
 }
-
 a {
-	color: #006ed3;
+    color: #006ed3;
-	text-decoration: none;
+    text-decoration: none;
 }
-
+a:hover, h1 a:hover {
-a:hover,
+    color: #319cff;
-h1 a:hover {
-	color: #319cff;
 }
-
+header, #summary {
-header,
+    padding-left: 7%;
-#summary {
+    padding-right: 7%;
-	padding-left: 7%;
-	padding-right: 7%;
 }
-
+th:first-child, td:first-child {
-th:first-child,
+    padding-left: 1em;
-td:first-child {
-	padding-left: 7%;
 }
-
+th:last-child, td:last-child {
-th:last-child,
+    padding-right: 1em;
-td:last-child {
-	padding-right: 5%;
 }
-
 header {
-	background-color: #FFC107;
+    background-color: #03A9F4;
-	padding-top: 1.5em;
+    color: #fff;
-	padding-bottom: 1.5em;
+    padding: 1.3em 0;
 }
+header i {
 
+margin: 0 .2em;
+
+color: rgba(255,255,255,0.3);
+
+font-style: normal;
+}
 h1 {
-	font-size: 20px;
+    font-size: 1.5em;
-	font-weight: normal;
+    font-weight: normal;
-	white-space: nowrap;
+    white-space: nowrap;
-	overflow-x: hidden;
+    overflow-x: hidden;
-	text-overflow: ellipsis;
+    text-overflow: ellipsis;
 }
-
 h1 a {
-	color: inherit;
+    color: inherit;
 }
-
 h1 a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
-
 main {
-	display: block;
+    display: block;
 }
-
 .meta {
-	font-size: 12px;
+    font-size: 12px;
-	font-family: Verdana, sans-serif;
+    padding-top: 15px;
-	/* border-bottom: 1px solid #9C9C9C; */
+    padding-bottom: 15px;
-	padding-top: 15px;
+    background-color: #4FC3F7;
-	padding-bottom: 15px;
+    color: #fff;
-	background-color: #FFA000;
-	color: #fff;
 }
-
 .meta-item {
-	margin-right: 1em;
+    margin-right: 1em;
 }
-
 table {
-	width: 100%;
+    width: 100%;
-	border-collapse: collapse;
+    border-collapse: collapse;
 }
-
 tr {
-	border-bottom: 1px dashed #dadada;
+    border-bottom: 1px dashed #dadada;
 }
-
 tr:not(:first-child):hover {
-	background-color: #ffffec;
+    background-color: #ffffec;
 }
-
+th, td {
-th,
+    text-align: left;
-td {
+    padding: 1em 0;
-	text-align: left;
-	padding: 10px 0;
 }
-
 th {
-	padding-top: 15px;
+    padding-top: 15px;
-	padding-bottom: 15px;
+    padding-bottom: 15px;
-	font-size: 16px;
+    font-size: 16px;
-	white-space: nowrap;
+    white-space: nowrap;
 }
-
 th a {
-	color: black;
+    color: black;
 }
-
 th svg {
-	vertical-align: middle;
+    vertical-align: middle;
 }
-
 td {
-	font-size: 14px;
+    font-size: 14px;
 }
-
 td:first-child {
-	width: 50%;
+    width: 50%;
 }
-
+th:last-child, td:last-child {
-th:last-child,
+    text-align: right;
-td:last-child {
-	text-align: right;
 }
-
 td:first-child svg {
-	position: absolute;
+    position: absolute;
 }
-
+td .name, td .goup {
-td .name,
+    margin-left: 1.1em;
-td .goup {
+    word-break: break-all;
-	margin-left: 1.75em;
+    overflow-wrap: break-word;
-	word-break: break-all;
+    white-space: pre-wrap;
-	overflow-wrap: break-word;
+    color: #424242;
-	white-space: pre-wrap;
+    vertical-align: middle;
 }
-
 footer {
-	padding: 40px 20px;
+    padding: 40px 20px;
-	font-size: 12px;
+    font-size: 12px;
-	text-align: center;
+    text-align: center;
+}
+
+.container {
+	margin: 0 auto;
+	width: 95%;
+	max-width: 960px;
+}
+
+
+.listing i {
+  vertical-align: middle;
+}
+
+pre {
+  border: 1px solid #e6e6e6;
+    background-color: #f5f5f5;
+    border-radius: .5em;
+    padding: 1em;
 }
 
 @media (max-width: 600px) {
-	.hideable {
+    .hideable {
-		display: none;
+        display: none;
-	}
+    }
-
+    td:first-child {
-	td:first-child {
+        width: auto;
-		width: auto;
+    }
-	}
+    th:nth-child(2), td:nth-child(2) {
-
+        padding-right: 5%;
-	th:nth-child(2),
+        text-align: right;
-	td:nth-child(2) {
+    }
-		padding-right: 5%;
-		text-align: right;
-	}
 }

assets/templates/base.tmpl

@@ -4,16 +4,19 @@
 		<title>{{.Name}}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 			<script src="https://use.fontawesome.com/ede56571a0.js"></script>
+			<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
 		  <link rel="stylesheet" href="/_filemanagerinternal/css/styles.css">
-		<style>
+			<style>
 
-		</style>
+			</style>
 	</head>
 	<body>
     <header>
-      <h1>
+			<div class="container">
-        {{range $url, $name := .BreadcrumbMap}}<a href="{{$url}}">{{$name}}</a>{{if ne $url "/"}}/{{end}}{{end}}
+	      <h1>
-      </h1>
+	        {{range $url, $name := .BreadcrumbMap}}{{if eq $url "/"}}<a href="{{$url}}">Home</a>{{end}}{{if ne $url "/"}}<i>></i><a href="{{$url}}">{{$name}}</a>{{end}}{{end}}
+	      </h1>
+			</div>
     </header>
     <main>
       {{ template "content" .Data }}

assets/templates/listing.tmpl

@@ -1,6 +1,6 @@
 {{ define "content" }}
 <div class="meta">
-	<div id="summary">
+	<div id="summary" class="container">
 		<span class="meta-item"><b>{{.NumDirs}}</b> director{{if eq 1 .NumDirs}}y{{else}}ies{{end}}</span>
 		<span class="meta-item"><b>{{.NumFiles}}</b> file{{if ne 1 .NumFiles}}s{{end}}</span>
 		{{- if ne 0 .ItemsLimitedTo}}
@@ -8,8 +8,10 @@
 		{{- end}}
 	</div>
 </div>
+
+
 <div class="listing">
-	<table aria-describedby="summary">
+	<table class="container" aria-describedby="summary">
 		<thead>
 		<tr>
 			<th>
@@ -46,7 +48,7 @@
 		<tr>
 			<td>
 				<a href="..">
-					<span class="goup">Go up</span>
+					<i class="fa fa-level-up fa-2x" aria-hidden="true"></i> <span class="goup">Go up</span>
 				</a>
 			</td>
 			<td>&mdash;</td>
@@ -58,9 +60,9 @@
 			<td>
 				<a href="{{.URL}}">
 					{{- if .IsDir}}
-					<i class="fa fa-folder" aria-hidden="true"></i>
+					<i class="fa fa-folder fa-2x" aria-hidden="true"></i>
 					{{- else}}
-					<i class="fa fa-file-text-o" aria-hidden="true"></i>
+					<i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
 					{{- end}}
 					<span class="name">{{.Name}}</span>
 				</a>

assets/templates/single.tmpl

@@ -0,0 +1,18 @@
+{{ define "content" }}
+
+<main class="container">
+
+  {{ if eq .Type "image" }}
+  <img src="{{.Base64}}">
+  {{ else if eq .Type "audio" }}
+  <audio src="{{.Base64}}">
+</audio>
+  {{ else if eq .Type "video" }}
+
+  {{ else}}
+  <pre>{{ .Content }}</pre>
+  {{ end }}
+
+</main>
+
+{{ end }}

binary.go

@@ -4,6 +4,7 @@
 // assets/public/js/application.js
 // assets/templates/base.tmpl
 // assets/templates/listing.tmpl
+// assets/templates/single.tmpl
 // DO NOT EDIT!
 
 package filemanager
@@ -102,6 +103,24 @@ func templatesListingTmpl() (*asset, error) {
 	return a, err
 }
 
+// templatesSingleTmpl reads file data from disk. It returns an error on failure.
+func templatesSingleTmpl() (*asset, error) {
+	path := "D:\\Code\\Go\\src\\github.com\\hacdias\\caddy-filemanager\\assets\\templates\\single.tmpl"
+	name := "templates/single.tmpl"
+	bytes, err := bindataRead(path, name)
+	if err != nil {
+		return nil, err
+	}
+
+	fi, err := os.Stat(path)
+	if err != nil {
+		err = fmt.Errorf("Error reading asset info %s at %s: %v", name, path, err)
+	}
+
+	a := &asset{bytes: bytes, info: fi}
+	return a, err
+}
+
 // Asset loads and returns the asset for the given name.
 // It returns an error if the asset could not be found or
 // could not be loaded.
@@ -158,6 +177,7 @@ var _bindata = map[string]func() (*asset, error){
 	"public/js/application.js": publicJsApplicationJs,
 	"templates/base.tmpl": templatesBaseTmpl,
 	"templates/listing.tmpl": templatesListingTmpl,
+	"templates/single.tmpl": templatesSingleTmpl,
 }
 
 // AssetDir returns the file names below a certain
@@ -211,6 +231,7 @@ var _bintree = &bintree{nil, map[string]*bintree{
 	"templates": &bintree{nil, map[string]*bintree{
 		"base.tmpl": &bintree{templatesBaseTmpl, map[string]*bintree{}},
 		"listing.tmpl": &bintree{templatesListingTmpl, map[string]*bintree{}},
+		"single.tmpl": &bintree{templatesSingleTmpl, map[string]*bintree{}},
 	}},
 }}
 

filemanager.go

@@ -72,7 +72,7 @@ func (f FileManager) ServeHTTP(w http.ResponseWriter, r *http.Request) (int, err
 				if file.Info.IsDir() {
 					return f.ServeListing(w, r, file.File, c)
 				}
-				return f.ServeSingleFile(w, r, file.File, c)
+				return f.ServeSingleFile(w, r, file, c)
 			case http.MethodPost:
 				// Create new file or directory
 
@@ -100,6 +100,7 @@ func (f FileManager) ServeHTTP(w http.ResponseWriter, r *http.Request) (int, err
 type InfoRequest struct {
 	Info os.FileInfo
 	File http.File
+	Path string
 	Code int
 	Err  error
 }
@@ -107,9 +108,8 @@ type InfoRequest struct {
 // GetFileInfo gets the file information and, in case of error, returns the
 // respective HTTP error code
 func GetFileInfo(path string, c *Config) *InfoRequest {
-	request := &InfoRequest{}
+	request := &InfoRequest{Path: path}
 	request.File, request.Err = c.Root.Open(path)
-
 	if request.Err != nil {
 		switch {
 		case os.IsPermission(request.Err):

page.go

@@ -2,10 +2,10 @@ package filemanager
 
 import (
 	"encoding/json"
-	"html/template"
 	"log"
 	"net/http"
 	"strings"
+	"text/template"
 )
 
 // PageInfo contains the information of a page

single.go

@@ -1,10 +1,67 @@
 package filemanager
 
-import "net/http"
+import (
+	"encoding/base64"
+	"html"
+	"io/ioutil"
+	"mime"
+	"net/http"
+	"path/filepath"
+	"regexp"
+)
+
+var (
+	videoRegex = regexp.MustCompile("video[/]")
+	audioRegex = regexp.MustCompile("audio[/]")
+	imageRegex = regexp.MustCompile("image[/]")
+)
+
+type File struct {
+	*FileInfo
+	Content string
+}
 
 // ServeSingleFile redirects the request for the respective method
-func (f FileManager) ServeSingleFile(w http.ResponseWriter, r *http.Request, file http.File, c *Config) (int, error) {
+func (f FileManager) ServeSingleFile(w http.ResponseWriter, r *http.Request, file *InfoRequest, c *Config) (int, error) {
-	w.Header().Set("Content-Type", "text/plain")
+	fullpath := c.PathScope + file.Path
-	w.Write([]byte("Hello"))
+	fullpath = filepath.Clean(fullpath)
-	return 200, nil
+
+	raw, err := ioutil.ReadFile(fullpath)
+	if err != nil {
+		return http.StatusInternalServerError, err
+	}
+
+	base := base64.StdEncoding.EncodeToString(raw)
+	mimetype := mime.TypeByExtension(filepath.Ext(file.Path))
+	data := "data:" + mimetype + ";base64," + base
+
+	page := &Page{
+		Info: &PageInfo{
+			Name: file.Path,
+			Path: file.Path,
+			Data: map[string]string{
+				"Type":    RetrieveContentType(mimetype),
+				"Base64":  data,
+				"Content": html.EscapeString(string(raw)),
+			},
+		},
+	}
+
+	return page.PrintAsHTML(w, "single")
+}
+
+func RetrieveContentType(name string) string {
+	if videoRegex.FindString(name) != "" {
+		return "video"
+	}
+
+	if audioRegex.FindString(name) != "" {
+		return "audio"
+	}
+
+	if imageRegex.FindString(name) != "" {
+		return "image"
+	}
+
+	return "text"
 }