Dynamically created list of files in JavaScript

Question

I want to make a JavaScript code that created dynamically a list of files that i have in a specific folder on my server. This list will be presented when i press a button and each object will have a checkbox. The selected items will then be downloaded with another submit button and I guess some PHP.

So far I used JavaScript code I found online to find the names of the files and then call another function to create the elements but no luck.

function createEl(var a){
    var myDiv = document.getElementById("cboxes");
    var checkBox = document.createElement("input");
    var label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = a;
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(a));

}
function foldlist(){
const testFolder = './xampp/htdocs/website1/uploads';
const fs = require('fs');

fs.readdir(testFolder, (err, files) => {
  files.forEach(file => {
    var a=file;
    createEl(a);
  });
})}

Did you write an empty div in your html with an id `cboxes` where your `createEl` function can append the created elements to? — AndrewL64, Jan 06 '19 at 19:13

score 1 · Accepted Answer · answered Jan 06 '19 at 20:20

1

You are trying to pass the var JavaScript keyword as a part of your createEl() function parameter.

Just change this:

function createEl(var a){
    ....
}

To this:

function createEl(a){
    ....
}

And your function should work fine. Check the Code Snippet below and you'll see that the function above is creating input-boxes as it should:

/* JavaScript */
function createEl(a){
    var myDiv = document.getElementById("cboxes");
    var checkBox = document.createElement("input");
    var label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = a;
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(a));
}

btn.addEventListener("click", function(){ createEl("hello") });

<!-- HTML -->
<button id="btn">Create input-box</button>
<div id="cboxes"></div>

answered Jan 06 '19 at 20:20

AndrewL64

15,794
8
47
79

thank you very much my friend !Doesnt work for me though :( still doesnt show – johni Jan 07 '19 at 11:27
That's weird. Can you add this line: `console.log(a)` inside your `files.forEach(file => {` below the `var a=file;` and then tell me what do you see in the console after refreshing the page. – AndrewL64 Jan 07 '19 at 11:30
Uncaught ReferenceError: foldlist is not defined – johni Jan 07 '19 at 14:54
Oh ok. So the issue now is not with the `createEl()` function anymore. You can confirm that by replacing `a` with some dummy string and it will work. You need to debug your `foldlist()` function and the `testfolder` associated with it now. I would recommend that you post a new question for that, with the new question switching focus to the `File System` module or the `fs module` that you are using above. Cheers!! – AndrewL64 Jan 07 '19 at 16:50
i can show you the article from stackoverflow that i found it in – johni Jan 07 '19 at 18:13
https://stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j?rq=1 – johni Jan 07 '19 at 18:13
Since this is (most probably) a `nodejs` issue and out of the scope of this current question, I think you should post a new question "fs.readdir not retrieving files" and then comment on the above original answer asking the answerer to help you out in your new question. – AndrewL64 Jan 07 '19 at 18:18

Dynamically created list of files in JavaScript

1 Answers1