Get all images from local folder

Question

I need a way to get all the images from a local folder for a presentation that will also run locally. There will be no attempt for a server to take the images from a local folder since that is not possible/the case.

I need to use .js since I can't use .php (which would be easier) since it runs on a local PC.

Say I need to take all the images from learn/

I have tried various solutions that can be found here, here and here but none worked.

@Ja͢ck The input type allows me to manually load images from a folder. That would be a start but I need the JavaScript to go through the folder and get all the images. — Alin, Jun 15 '15 at 06:53
The only thing you can do is prompt the user to select the images. JS in the browser cannot directly access the local filesystem. — Felix Kling, Jun 15 '15 at 06:54
@Alin You would need the user to actually enter a directory and select all files within; the file objects are only instantiated upon user interaction. — Ja͢ck, Jun 15 '15 at 06:55

score 13 · Accepted Answer · answered Jun 15 '15 at 06:57

I think your best option is to use the new File API in Javascript. Is has a lot of functions to read files from the file system.

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>

(code from here)

You can find a good explanation and helpful code here.

This helped me, I just posted the modified code in the post :) Thanks. — Alin, Jun 15 '15 at 07:20
@Alin: Very good. If you want to, please post the code you are using in a separate answer if you'd like to. Don't post 'answer' code in the question. — Patrick Hofman, Jun 15 '15 at 07:22

score 4 · Answer 2 · answered Jun 15 '15 at 07:23

Thanks to Patrick Hofman's answer, I modified the code and ended up with this :

$(document).ready(function(){  

  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    $('body').append('<h1>' + f.name + '</h1><img src="learn/' + f.name + '"/>');
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);

});

Get all images from local folder

2 Answers2

Linked