user3052503 user3052503 - 6 months ago 92
Javascript Question

How to print all the txt files inside a folder using java script

I need to print all the txt files from a directory inside an HTML using javascript.
i tried to modify a code dealing with photos but I didn't success

How to load all the images from one of my folder into my web page, using Jquery/Javascript

var dir = "D:\Finaltests\test1\new\places";
var fileextension = ".txt";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function (data) {
//List all .txt file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<input type='file' onload='readText(" + dir + ")>");


});
}
});

Answer

You can use <input type="file"> with multiple attribute set, accept attribute set to text/plain; change event ;FileReader, for loop.

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    (function(file) {
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
         pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    }(files[i]))
  }
})
<input type="file" accept="text/plain" multiple />
<pre>

</pre>


You can also use webkitdirectory and allowdirs attributes for directory upload at chrome, chromium; at nightly 45+ or firefox 42+ where dom.input.dirpicker preference set to true, see Firefox 42 for developers , Select & Drop Files and/or Folders to be parsed. Note, you can also drop folders from file manager at <input type="file"> element

var pre = document.querySelector("pre");

document.querySelector("input[type=file]")
  .addEventListener("change", function(event) {
    console.log(event.target.files)
    var uploadFile = function(file, path) {
      // handle file uploading
      console.log(file, path);
      var reader = new FileReader();
      reader.addEventListener("load", function(e) {
        pre.textContent += "\n" + e.target.result;
      });
      reader.readAsText(file)
    };

    var iterateFilesAndDirs = function(filesAndDirs, path) {
      for (var i = 0; i < filesAndDirs.length; i++) {
        if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
          var path = filesAndDirs[i].path;

          // this recursion enables deep traversal of directories
          filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
        } else {
          uploadFile(filesAndDirs[i], path);
        }
      }
    };
    if ("getFilesAndDirectories" in event.target) {
      event.target.getFilesAndDirectories()
        .then(function(filesAndDirs) {
          iterateFilesAndDirs(filesAndDirs, '/');
        })
    } else {
      // do webkit stuff
      var files = event.target.files;
      for (var i = 0; i < files.length; i++) {
        (function(file) {
          uploadFile(file)
        }(files[i]))
      }
    }

  })
<!DOCTYPE html>
<html>

<head>
  <script></script>
</head>

<body>
  <input type="file" webkitdirectory allowdirs directory />
  <pre>

</pre>
</body>

</html>

plnkr http://plnkr.co/edit/Y1XYd9rLOdKRHw6tb1Sh?p=preview


For ajax requests at chromium, chrome file: protocol local filesystem you can launch with --allow-file-access-from-files flag set, see Jquery load() only working in firefox?.

For a possible $.ajax() approach at chrome, chromium you can try

var path = "D:\Finaltests\test1\new\places";
var files = [];
$.get(path)
.then((data) => {
  // match file names from `html` returned by chrome, chromium
  // for directory listing of `D:\Finaltests\test1\new\places`;
  // you can alternatively load the "Index of" document and retrieve
  // `.textContent` from `<a>` elements within `td` at `table` of
  // rendered `html`; note, `RegExp` to match file names
  // could probably be improved
  var urls = $.unique(data.match(/((\w+|\d+)\.txt)\b/g));
  return $.when.apply($, $.map(urls, (file) => {
    files.push(file);
    // `\`, or `/`, depending on filesystem type
    return $.get(path + "\" + file).then((data) => {
      // return array of objects having property set to `file` name,
      // value set to text within `file`
      return {[file]:data}
    })
  }))
})
.then((...res) => {
  console.log(res, files)
})