diff options
| author | yulai.li <blacktear23@gmail.com> | 2022-04-06 22:39:12 +0800 |
|---|---|---|
| committer | yulai.li <blacktear23@gmail.com> | 2022-04-07 15:19:33 +0800 |
| commit | 4f87ee7755ae78fb15d411815e0100e97d3b7bbf (patch) | |
| tree | cb5d4ecb069d238c56139628860f17ffd1be2499 | |
| parent | 3ab2c0e5c0263de5af35dad91a9107e6038f4203 (diff) | |
| download | seaweedfs-4f87ee7755ae78fb15d411815e0100e97d3b7bbf.tar.xz seaweedfs-4f87ee7755ae78fb15d411815e0100e97d3b7bbf.zip | |
Add create directory and delete web UI features for filer
| -rw-r--r-- | weed/server/filer_ui/filer.html | 106 |
1 files changed, 79 insertions, 27 deletions
diff --git a/weed/server/filer_ui/filer.html b/weed/server/filer_ui/filer.html index 6f57c25d8..939f3f419 100644 --- a/weed/server/filer_ui/filer.html +++ b/weed/server/filer_ui/filer.html @@ -26,6 +26,7 @@ border-radius: 2px; border: 1px solid #ccc; float: right; + margin-left: 5px; } .button:hover { @@ -36,6 +37,13 @@ display: none; } + .danger { + color: red; + background: #fff; + border: 1px solid #fff; + border-radius: 2px; + } + </style> </head> <body> @@ -54,6 +62,7 @@ </a> {{ end }} <label class="button" for="fileElem">Upload</label> + <label class="button" onclick="handleCreateDir()">Create Dir</label> </div> </div> @@ -61,7 +70,7 @@ <form class="upload-form"> <input type="file" id="fileElem" multiple onchange="handleFiles(this.files)"> - <table width="90%"> + <table width="86%"> {{$path := .Path }} {{ range $entry_index, $entry := .Entries }} <tr> @@ -89,9 +98,16 @@ {{ $entry.Size | humanizeBytes }} {{end}} </td> - <td nowrap> + <td align="right" nowrap> {{ $entry.Timestamp.Format "2006-01-02 15:04" }} </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> {{ end }} @@ -114,60 +130,96 @@ </body> <script type="text/javascript"> // ************************ Drag and drop ***************** // - let dropArea = document.getElementById("drop-area") + let dropArea = document.getElementById("drop-area"); // Prevent default drag behaviors ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { - dropArea.addEventListener(eventName, preventDefaults, false) - document.body.addEventListener(eventName, preventDefaults, false) - }) + dropArea.addEventListener(eventName, preventDefaults, false); + document.body.addEventListener(eventName, preventDefaults, false); + }); // Highlight drop area when item is dragged over it ;['dragenter', 'dragover'].forEach(eventName => { - dropArea.addEventListener(eventName, highlight, false) - }) + dropArea.addEventListener(eventName, highlight, false); + }); ;['dragleave', 'drop'].forEach(eventName => { - dropArea.addEventListener(eventName, unhighlight, false) - }) + dropArea.addEventListener(eventName, unhighlight, false); + }); // Handle dropped files - dropArea.addEventListener('drop', handleDrop, false) + dropArea.addEventListener('drop', handleDrop, false); function preventDefaults(e) { - e.preventDefault() - e.stopPropagation() + e.preventDefault(); + e.stopPropagation(); } function highlight(e) { - dropArea.classList.add('highlight') + dropArea.classList.add('highlight'); } function unhighlight(e) { - dropArea.classList.remove('highlight') + dropArea.classList.remove('highlight'); } function handleDrop(e) { - var dt = e.dataTransfer - var files = dt.files + var dt = e.dataTransfer; + var files = dt.files; - handleFiles(files) + handleFiles(files); } function handleFiles(files) { - files = [...files] - files.forEach(uploadFile) - window.location.reload() + files = [...files]; + files.forEach(uploadFile); + window.location.reload(); } function uploadFile(file, i) { - var url = window.location.href - var xhr = new XMLHttpRequest() - var formData = new FormData() - xhr.open('POST', url, false) + var url = window.location.href; + var xhr = new XMLHttpRequest(); + var formData = new FormData(); + xhr.open('POST', url, false); + + formData.append('file', file); + 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'; + } - formData.append('file', file) - xhr.send(formData) + var xhr = new XMLHttpRequest(); + xhr.open('DELETE', url, false); + xhr.send(); + window.location.reload(); } </script> </html> |