297 lines
9.8 KiB
HTML
297 lines
9.8 KiB
HTML
{{NAVBAR}}
|
|
<!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="global-style.css" rel="stylesheet">
|
|
|
|
<style>
|
|
#file-row:nth-child(odd) {
|
|
background-color: #e8e8e8;
|
|
}
|
|
progress{
|
|
width: 380px;
|
|
}
|
|
#submit-edit, #submit-upload, #submit-delete, #submit-update-local{
|
|
width:120px;
|
|
}
|
|
#dir-path{
|
|
width: 75px;
|
|
}
|
|
fieldset {
|
|
width:500px;
|
|
}
|
|
table {
|
|
width:540px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<h1>File Manager</h1>
|
|
|
|
<fieldset>
|
|
<legend>File list</legend>
|
|
<div id="spacer-20"></div>
|
|
<p>  Total storage: {{FS_TOTAL_BYTES}}, Used: {{FS_USED_BYTES}}, Still 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>
|
|
<select name="dir-path" id="dir-path">
|
|
{{DIR_LIST}}
|
|
</select>  
|
|
<input type="file" id="upload-file" name="upload-file">
|
|
</td>
|
|
<td><input type="submit" id="submit-upload" value="File upload!" onclick="return validateFormUpload()"></td>
|
|
</tr></table>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset>
|
|
<legend>Edit file</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/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="/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>-->
|
|
|
|
<h2>Firmware/File System Update</h2>
|
|
|
|
<fieldset>
|
|
<legend>Firmware Update (Local) | Firmware Ver: {{FIRM_VER}} | fwataVxxx.bin or lfsataVxxx.bin</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/update" method="POST" enctype="multipart/form-data">
|
|
<table>
|
|
<tr>
|
|
<td id="first_td_th">
|
|
<input type="file" id="update-file" name="update-file">
|
|
</td>
|
|
<td>
|
|
<input type="submit" id="submit-update-local" value="Update!" onclick="return validateFormUpdate()">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<tr><div id="spacer-20"></div>
|
|
<td >
|
|
<label for="firm-progress">Progress:</label>
|
|
<progress id="firm-progress" value="0" max="100"></progress>
|
|
<label id="lbl-firm-progress" for="firm-progress">---</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</fieldset>
|
|
|
|
<div id="spacer-20"></div>
|
|
|
|
<fieldset hidden>
|
|
<legend>Firmware Update (Web)</legend>
|
|
<div id="spacer-20"></div>
|
|
<form action="/update" method="POST" enctype="multipart/form-data">
|
|
<table><tr>
|
|
<td id="first_td_th">
|
|
<button type="submit" id="submit-update-check" value="check" onclick="return validateFormUpdate()"></button>
|
|
<label>Status:</label></td>
|
|
<td><input type="submit" id="submit-update-web" value="Update!" onclick="return validateFormUpdate()"></td>
|
|
</tr></table>
|
|
</form>
|
|
</fieldset>
|
|
<div id="spacer-50"></div>
|
|
<div id="spacer-50"></div>
|
|
<div id="spacer-50"></div>
|
|
<div id="spacer-50"></div>
|
|
<div id="spacer-50"></div>
|
|
<div id="spacer-50"></div>
|
|
|
|
<iframe style="display:none" name="self-page"></iframe>
|
|
|
|
|
|
<script>
|
|
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> |