276 lines
8.9 KiB
HTML
276 lines
8.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>File Manager</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="/css/global-style.css" rel="stylesheet">
|
|
<link href="/css/nav.css" rel="stylesheet">
|
|
|
|
<style>
|
|
#file-row:nth-child(odd) {
|
|
background-color: #e8e8e8;
|
|
}
|
|
#first_td_th {
|
|
width:300px;
|
|
}
|
|
progress{
|
|
width: 290px;
|
|
}
|
|
#submit-edit, #submit-upload, #submit-delete, #submit-update-local{
|
|
width:120px;
|
|
}
|
|
#dir-path{
|
|
width: 75px;
|
|
}
|
|
fieldset {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
border-collapse: collapse;
|
|
margin: 1rem 0;
|
|
/*width:380px; */
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="navbar"></div>
|
|
<div class="main-container">
|
|
<h1>File Manager</h1>
|
|
|
|
<fieldset>
|
|
<legend>File list</legend>
|
|
<div id="spacer-20"></div>
|
|
<p>  Total: {{FS_TOTAL_BYTES}}, Used: {{FS_USED_BYTES}}, Available: {{FS_FREE_BYTES}}</p>
|
|
<div id="spacer-20"></div>
|
|
<table><tr><th id="first_td_th">Listing:</th> </th><th>Size:</th></tr>
|
|
{{LISTED_FILES}}
|
|
</table>
|
|
<div id="spacer-20"></div>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend>File upload</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/upload" method="POST" enctype="multipart/form-data">
|
|
<table>
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<label for="dir-path">Dir: </label><br>
|
|
<select name="dir-path" id="dir-path">
|
|
{{DIR_LIST}}
|
|
</select>  
|
|
|
|
</td>
|
|
<td><input type="submit" id="submit-upload" value="File upload!" onclick="return validateFormUpload()"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="spacer-20"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input type="file" id="upload-file" name="upload-file">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend>Edit file</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/files/edit" method="GET">
|
|
<table><tr>
|
|
<td id="first_td_th">
|
|
<select name="edit-path" id="edit-path">
|
|
<option value="choose">Select file to edit</option>
|
|
<option value="new">New text file</option>
|
|
{{EDIT-DEL_FILES}}
|
|
</select></td>
|
|
<td><input type="submit" id="submit-edit" value="Edit" onclick="return validateFormEdit()"></td>
|
|
</tr></table>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend>Delete file</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/files/delete" method="GET">
|
|
<table><tr>
|
|
<td id="first_td_th">
|
|
<select name="delete-path" id="select-files">
|
|
<option value="choose">Select file to delete</option>
|
|
{{EDIT-DEL_FILES}}
|
|
</select></td>
|
|
<td><input type="submit" id="submit-delete" value="Delete" onclick="return validateFormDelete()"></td>
|
|
</tr></table>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<!--<fieldset>
|
|
<legend>Format File System</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/format" method="POST" target="self-page">
|
|
<table><tr>
|
|
<td id="first_td_th">
|
|
<p id="format-notice">Pressing the 'Format' button will immediately delete all data from File System!</p></td>
|
|
<td><input type="submit" id="submit-format" value="Format" onclick="return confirmFormat()"></td>
|
|
</tr></table>
|
|
</form>
|
|
<div id="spacer-20"></div>
|
|
</fieldset>-->
|
|
|
|
<!--<iframe style="display:none" name="self-page"></iframe>-->
|
|
</div>
|
|
<script>
|
|
|
|
fetch('/www/navbar.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('navbar').innerHTML = data;
|
|
});
|
|
|
|
|
|
function validateFormEdit()
|
|
{
|
|
var allowedExtensions = "{{ALLOWED_EXTENSIONS_EDIT}}";
|
|
var editSelectValue = document.getElementById('edit-path').value;
|
|
var dotIndex = editSelectValue.lastIndexOf(".")+1;
|
|
var editSelectValueExtension = editSelectValue.substring(dotIndex);
|
|
var extIndex = allowedExtensions.indexOf(editSelectValueExtension);
|
|
|
|
if(editSelectValue == "new"){
|
|
return true;
|
|
}
|
|
if(editSelectValue == "choose" ){
|
|
alert("You have not chosen a file!");
|
|
return false;
|
|
}
|
|
if(extIndex == -1){
|
|
alert("Editing of this file type is not supported!");
|
|
return false;
|
|
}
|
|
|
|
}
|
|
function validateFormDelete()
|
|
{
|
|
var deleteSelectValue = document.getElementById('delete-path').value;
|
|
|
|
if(deleteSelectValue == "choose" || !deleteSelectValue.indexOf(".")){
|
|
alert("You have not chosen a file!");
|
|
return false;
|
|
}
|
|
}
|
|
function confirmFormat()
|
|
{
|
|
var text = 'Pressing the "OK" button immediately deletes all data from SPIFFS and restarts ESP32!';
|
|
if (confirm(text) == true) {
|
|
return true;
|
|
}
|
|
else{
|
|
return false;
|
|
}
|
|
}
|
|
function validateFormUpload()
|
|
{
|
|
var inputElement = document.getElementById('upload-file');
|
|
var files = inputElement.files;
|
|
|
|
if(files.length==0){
|
|
alert("You have not chosen a file!");
|
|
return false;
|
|
}
|
|
}
|
|
|
|
const fileInput = document.getElementById('update-file');
|
|
const progressBar = document.getElementById('firm-progress');
|
|
const progressLabel = document.getElementById('lbl-firm-progress');
|
|
const submitButton = document.getElementById('submit-update-local');
|
|
|
|
submitButton.addEventListener('click', uploadFile);
|
|
|
|
function uploadFile(event) {
|
|
event.preventDefault(); // Prevent the default form submission
|
|
|
|
const file = fileInput.files[0];
|
|
const url = '/update'; // Replace with the actual upload URL
|
|
|
|
// File Checks
|
|
//*********************************************************
|
|
// Check file extension
|
|
if (!file.name.toLowerCase().endsWith('.bin')) {
|
|
alert('Please select a file with the ".bin" extension.');
|
|
return;
|
|
}
|
|
|
|
// Check filename prefix
|
|
if (!file.name.toLowerCase().startsWith('fwata') && !file.name.toLowerCase().startsWith('lfsata')) {
|
|
alert('Please select a file with a filename starting with "fwata" or "lfsata".');
|
|
return;
|
|
}
|
|
|
|
// Check file size
|
|
const maxSizeBytes = 2.7 * 1024 * 1024; // 2.75Mb in bytes
|
|
if (file.size > maxSizeBytes) {
|
|
alert('Please select a file with a size not exceeding 2.7Mb.');
|
|
return;
|
|
}
|
|
//*********************************************************
|
|
|
|
const formData = new FormData();
|
|
formData.append('file-size', file.size); // Include the file size as a parameter
|
|
formData.append('update-file', file);
|
|
let s = "file-size: " + file.size;
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.upload.addEventListener('progress', (event) => {
|
|
if (event.lengthComputable) {
|
|
const progressPercent = Math.round((event.loaded * 100) / event.total);
|
|
progressBar.value = progressPercent;
|
|
progressLabel.innerHTML =progressBar.value + "%";
|
|
}
|
|
});
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
console.log("received status: %d", xhr.status);
|
|
if (xhr.status === 200) {
|
|
// Upload completed successfully
|
|
alert('Upload completed!');
|
|
progressLabel.innerHTML = "Completed!";
|
|
} else if (xhr.status === 500) {
|
|
// Request was aborted (server-side)
|
|
alert('Upload aborted by the server.');
|
|
progressLabel.innerHTML = "Aborted!";
|
|
} else {
|
|
// Handle other error cases
|
|
alert('An error occurred during the upload.');
|
|
progressLabel.innerHTML = "Error!";
|
|
}
|
|
submitButton.disabled = false;
|
|
progressBar.value = 0;
|
|
progressLabel.innerHTML = "";
|
|
}
|
|
};
|
|
|
|
xhr.open('POST', url, true);
|
|
xhr.send(formData);
|
|
submitButton.disabled = true;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |