How to read all files in a directory using javascript or Nodejs? [on hold]

419
September 18, 2017, at 10:18 AM

Brief of the project - I am really annoyed by shitty windows 10 photo viewer and I have uninstalled it using powershell. Now I want to create my own imageviewer where user

  1. Clicks on one of the image on desktop/pc to view
  2. Then uses arrow keys to browser rest of the images sitting in the same directory like old windows image viewer. Basically, application automatically detect all the files...
  3. I also to want to attach all the image files [.jpg,.gif,*.png etc....] to be open with this application.

What I have researched

  1. Javascript - It can't access all image from client's pc automatically upon loading one images.
  2. HTML5 File API - It looks promising but then I tired this I don't know how to proceed [refer to code snippet #1] Problem is I don't know how to browse a directory on a button click and extract files inside it. Code snippet #2 does give the relative paths of the files but when I attach those paths to a img tag, it doesn't do anything.
  3. NodeJS FS Reader - Yes it works but then you have to hard code the directory path in the app.js. Is there anyway to make this hardcoded path dynamic using some other nodejs module or anything. Refer to code snippet #3, it does show the content from given directory but how to change this hardcoded path to dynamic directory?

OR

It is not possible at all using any form of web technologies.

Code snippet #1

function toArray(list) {
         return Array.prototype.slice.call(list || [], 0);
     }
     function listResults(entries) {
         // Document fragments can improve performance since they're only appended
         // to the DOM once. Only one browser reflow occurs.
         var fragment = document.createDocumentFragment();
         entries.forEach(function(entry, i) {
             var img = entry.isDirectory ? '<img src="folder-icon.gif">' :
                 '<img src="file-icon.gif">';
             var li = document.createElement('li');
             li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
             fragment.appendChild(li);
         });
         document.querySelector('#filelist').appendChild(fragment);
     }
     function onInitFs(fs) {
         var dirReader = fs.root.createReader();
         var entries = [];
         // Call the reader.readEntries() until no more results are returned.
         var readEntries = function() {
             dirReader.readEntries(function(results) {
                 if (!results.length) {
                     listResults(entries.sort());
                 } else {
                     entries = entries.concat(toArray(results));
                     readEntries();
                 }
             }, errorHandler);
         };
         readEntries(); // Start reading dirs.
     }
     window.requestFileSystem(window.TEMPORARY, 1024 * 1024, onInitFs, errorHandler);

Code snippet #2

  var input = document.getElementById('files');
 var output = document.getElementById('output');
 var pathArray = [];
 input.onchange = function(e) {
     var files = e.target.files; // FileList
     for (var i = 0, f; f = files[i]; ++i) {
         console.debug(files[i].webkitRelativePath);
         pathArray.push(files[i].webkitRelativePath);
         output.innerText = output.innerText + files[i].webkitRelativePath + "\n";
     }
 }

Code snippet #3

var fs = require('fs');

if (process.argv.length <= 2) {
    console.log("Usage: " + __filename + " path/to/directory");
    process.exit(-1);
}
var path = process.argv[2];
fs.readdir(path, function(err, items) {
    console.log(items);
    for (var i=0; i<items.length; i++) {
        console.log(items[i]);
    }
});

Code snippet #4 -- > This works fine but still can I make it so that when user uploads one image, it automatically uploads every single image in that directory...

HTML -----

 <input type="file" id="files" name="files[]" multiple webkitdirectory /> 

JS--------------- 
var input = document.getElementById('files');
 var output = document.getElementById('output');
 input.onchange = function(e) {
     var files = e.target.files; // FileList
     for (var i = 0, f; f = files[i]; ++i) {
         previewImage(this.files[i]); 
     }
 }
 function previewImage(file) {
     var galleryId = "myImages";
     var gallery = document.getElementById(galleryId);
     var imageType = /image.*/;
     if (!file.type.match(imageType)) {
         throw "File Type must be an image";
     }
     var thumb = document.createElement("div");
     thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div
     var img = document.createElement("img");
     img.file = file;
     thumb.appendChild(img);
     gallery.appendChild(thumb);
     // Using FileReader to display the image content
     var reader = new FileReader();
     reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
     reader.readAsDataURL(file);
 }
READ ALSO
Node-Red - Get all nodes connected to another node

Node-Red - Get all nodes connected to another node

Is there any way to know which nodes are connected to another without any messages passing along?

189
Unexpected token { in JSON at position 6508 parsing array containing results from two sequential Youtube Data API (Playlist:List) requests

Unexpected token { in JSON at position 6508 parsing array containing results from two sequential Youtube Data API (Playlist:List) requests

I am trying to get all the playlists on a youtube channelchunks parses with no problem when i only request from either the 1st https

250
How response.end and response.send differs?

How response.end and response.send differs?

Hi I am trying to build a simple application using express jsI am new to node and express js

217
Close websocket server with a reason

Close websocket server with a reason

How can i close websocket server with a different reason? It's always 1006 when i call serverclose()

247