mirror of
https://github.com/seaweedfs/seaweedfs.git
synced 2024-01-19 02:48:24 +00:00
Add create directory and delete web UI features for filer
This commit is contained in:
parent
3ab2c0e5c0
commit
4f87ee7755
|
@ -26,6 +26,7 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
@ -36,6 +37,13 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
color: red;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -54,6 +62,7 @@
|
||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<label class="button" for="fileElem">Upload</label>
|
<label class="button" for="fileElem">Upload</label>
|
||||||
|
<label class="button" onclick="handleCreateDir()">Create Dir</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -61,7 +70,7 @@
|
||||||
<form class="upload-form">
|
<form class="upload-form">
|
||||||
<input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
|
<input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
|
||||||
|
|
||||||
<table width="90%">
|
<table width="86%">
|
||||||
{{$path := .Path }}
|
{{$path := .Path }}
|
||||||
{{ range $entry_index, $entry := .Entries }}
|
{{ range $entry_index, $entry := .Entries }}
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -89,9 +98,16 @@
|
||||||
{{ $entry.Size | humanizeBytes }}
|
{{ $entry.Size | humanizeBytes }}
|
||||||
{{end}}
|
{{end}}
|
||||||
</td>
|
</td>
|
||||||
<td nowrap>
|
<td align="right" nowrap>
|
||||||
{{ $entry.Timestamp.Format "2006-01-02 15:04" }}
|
{{ $entry.Timestamp.Format "2006-01-02 15:04" }}
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
{{if $entry.IsDirectory}}
|
||||||
|
<label class="button danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name "/" }}')">Delete</label>
|
||||||
|
{{else}}
|
||||||
|
<label class="button danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name }}')">Delete</label>
|
||||||
|
{{end}}
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
@ -114,60 +130,96 @@
|
||||||
</body>
|
</body>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// ************************ Drag and drop ***************** //
|
// ************************ Drag and drop ***************** //
|
||||||
let dropArea = document.getElementById("drop-area")
|
let dropArea = document.getElementById("drop-area");
|
||||||
|
|
||||||
// Prevent default drag behaviors
|
// Prevent default drag behaviors
|
||||||
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||||
dropArea.addEventListener(eventName, preventDefaults, false)
|
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||||
document.body.addEventListener(eventName, preventDefaults, false)
|
document.body.addEventListener(eventName, preventDefaults, false);
|
||||||
})
|
});
|
||||||
|
|
||||||
// Highlight drop area when item is dragged over it
|
// Highlight drop area when item is dragged over it
|
||||||
;['dragenter', 'dragover'].forEach(eventName => {
|
;['dragenter', 'dragover'].forEach(eventName => {
|
||||||
dropArea.addEventListener(eventName, highlight, false)
|
dropArea.addEventListener(eventName, highlight, false);
|
||||||
})
|
});
|
||||||
|
|
||||||
;['dragleave', 'drop'].forEach(eventName => {
|
;['dragleave', 'drop'].forEach(eventName => {
|
||||||
dropArea.addEventListener(eventName, unhighlight, false)
|
dropArea.addEventListener(eventName, unhighlight, false);
|
||||||
})
|
});
|
||||||
|
|
||||||
// Handle dropped files
|
// Handle dropped files
|
||||||
dropArea.addEventListener('drop', handleDrop, false)
|
dropArea.addEventListener('drop', handleDrop, false);
|
||||||
|
|
||||||
function preventDefaults(e) {
|
function preventDefaults(e) {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
e.stopPropagation()
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function highlight(e) {
|
function highlight(e) {
|
||||||
dropArea.classList.add('highlight')
|
dropArea.classList.add('highlight');
|
||||||
}
|
}
|
||||||
|
|
||||||
function unhighlight(e) {
|
function unhighlight(e) {
|
||||||
dropArea.classList.remove('highlight')
|
dropArea.classList.remove('highlight');
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDrop(e) {
|
function handleDrop(e) {
|
||||||
var dt = e.dataTransfer
|
var dt = e.dataTransfer;
|
||||||
var files = dt.files
|
var files = dt.files;
|
||||||
|
|
||||||
handleFiles(files)
|
handleFiles(files);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFiles(files) {
|
function handleFiles(files) {
|
||||||
files = [...files]
|
files = [...files];
|
||||||
files.forEach(uploadFile)
|
files.forEach(uploadFile);
|
||||||
window.location.reload()
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadFile(file, i) {
|
function uploadFile(file, i) {
|
||||||
var url = window.location.href
|
var url = window.location.href;
|
||||||
var xhr = new XMLHttpRequest()
|
var xhr = new XMLHttpRequest();
|
||||||
var formData = new FormData()
|
var formData = new FormData();
|
||||||
xhr.open('POST', url, false)
|
xhr.open('POST', url, false);
|
||||||
|
|
||||||
formData.append('file', file)
|
formData.append('file', file);
|
||||||
xhr.send(formData)
|
xhr.send(formData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCreateDir() {
|
||||||
|
var dirName = prompt('Directory Name:', '');
|
||||||
|
dirName = dirName.trim();
|
||||||
|
if (dirName == null && dirName == '') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var baseUrl = window.location.href;
|
||||||
|
if (!baseUrl.endsWith('/')) {
|
||||||
|
baseUrl += '/';
|
||||||
|
}
|
||||||
|
var url = baseUrl + dirName;
|
||||||
|
if (!url.endsWith('/')) {
|
||||||
|
url += '/';
|
||||||
|
}
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', url, false);
|
||||||
|
xhr.setRequestHeader('Content-Type', '');
|
||||||
|
xhr.send();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(path) {
|
||||||
|
if (!confirm('Are you sure to delete ' + path + '?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var url = path;
|
||||||
|
if (url.endsWith('/')) {
|
||||||
|
url += '?recursive=true';
|
||||||
|
}
|
||||||
|
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('DELETE', url, false);
|
||||||
|
xhr.send();
|
||||||
|
window.location.reload();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue