File browser/editor in HTML (NAS)

I am making a NAS (Network Attached Storage) on a microcontroller. The user interface for the NAS will be a web page hosted on the microcontroller itself. This web page will allow the user to browse the files located on the microcontroller and edit them (I will add more functionality later). To be more precise the files are located on an SD card connected to the microcontroller. So far I have written my own HTTP server. I am currently writing the user interface web page. Here's what I've done:

When I access the root directory: index.html in / directory

When I open a file: Fichier1.txt in / directory opened

When I open a directory: index.html in /Dossier1/ directory

Here's the index.html file of the root directory:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<h2>/</h2>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
  <li><span class="fa-li"><i class="fa fa-file"></i></span><a href="Fichier1.txt" target="file_viewer">Fichier1.txt</a></li>
</ul>

<iframe name="file_viewer" style="height:100vh;width:100%;border:none;"></iframe>
</body>

</html>

As you can see the files are opened in an iframe so they can't be edited. I was wondering if there is a way to load files in a textarea or something else that will allow the user to edit the content.

Thanks!

Solution

I've figured a way to do it.

Here's the new index.html file of the root directory:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<h2>/</h2>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
  <li><span class="fa-li"><i class="fa fa-file"></i></span><a href="javascript:load_file('Fichier1.txt');">Fichier1.txt</a></li>
</ul>

<textarea id="file_editor" style="height:100vh;width:100%;"></textarea>

<script>
function load_file(file) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("file_editor").value = this.responseText;
    }
  };
  xhttp.open("GET", file, true);
  xhttp.send();
}
</script>
</body>
</html>