I’m trying to simulate a directory tree creation. The tree must include the files a user uploads in it. Something like this
Directory: (Add Directory)(Add File)
Directory: (Add Directory)(Add File)
(browse) Uploaded_file.png
Directory: (Add Directory)(Add File)
Directory: (Add Directory)(Add File)
(browse) Uploaded_file.png
(browse) Uploaded_file.png
I’ve found a way to simulate the directory tree but I’m having problems with adding the uploaded files. I’m new to Javascript so not sure how to go about this.
I created a function for tree generating and a separate function for uploading the files. I’d like the file browsing to start when the (Add File) button is clicked. Here’s my code:
function add_directory(current) {
var chosen_branches_of_level = current.getAttribute('what_branches');
var chosen_level = parseInt(current.getAttribute('what_level'));
var same_level_branches = document.getElementsByClassName('class_level_' + (chosen_level + 1));
same_level_branches = same_level_branches.length;
var where_to = document.getElementById('level_' + chosen_branches_of_level);
var subdirectory = document.createElement('div');
var subdirectory_id = (chosen_level + 1) + '_' + (same_level_branches + 1);
subdirectory.id = 'level_' + subdirectory_id;
subdirectory.className = 'sub';
subdirectory.setAttribute('class', 'class_level_' + (chosen_level + 1));
where_to.appendChild(subdirectory);
var label = document.createElement("label");
label.name = 'where' + subdirectory_id;
label.innerText = "Directory: ";
subdirectory.appendChild(label);
var input = document.createElement('input');
input.name = 'where' + subdirectory_id;
input.placeholder = 'Subdirectory';
subdirectory.appendChild(input);
var new_button_dir = document.createElement('button');
new_button_dir.setAttribute('onclick', "add_directory(this)");
new_button_dir.setAttribute('what_branches', subdirectory_id);
new_button_dir.innerText = 'Add Directory';
subdirectory.appendChild(new_button_dir);
var new_button_files = document.createElement('button');
new_button_files.setAttribute('onclick', "add_files()");
new_button_files.setAttribute('what_branches', subdirectory_id);
new_button_files.innerText = 'Add Files';
subdirectory.appendChild(new_button_files);
var file_upload = document.createElement("INPUT");
file_upload.setAttribute("type", "file");
}
function add_files() {
var file_upload = document.createElement("INPUT");
file_upload.setAttribute("type", "file");
subdirectory.appendChild(file_upload);
}
div {
padding: 10px;
margin: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Adding HTML elements dynamically</title>
</head>
<body>
<h1>Directory tree simulator</h1>
<div id="level_0_0">
</div>
<div>
<button onclick="add_directory(this)" what_branches="0_0" what_level="0">Add Directory</button>
</div>
</body>
Making ‘subdirectory’ variable global doesn’t really work. GetElementbyId doesn’t work here either as the id changes with each branch. Is there a way to ‘append’ the ‘add_files’ function’s variable ‘file_upload’ as a child to the ‘subdirectory’ parent?