I am trying to make an interface to my server folder contents using php,CSS and JS.
I have managed to get my script to read folder(php)>>organize array(php)>>display contents in a grid based on their respective index of the array.
What I am having trouble with is retaining the .href of each element as they are created, so i can reference the file location (which is displayed on screen, in each element.)
My code seems to loop through, create elements, but the link within each element is always pointed to the final array element which is "." This loads my homepage. not the file.
How can I get the elements to point to their respective filenames on the server??
HERE IS SCRIPT;
<!DOCTYPE html>
<html>
<body>
<!-- Count all files in DIR and make variable-->
<?php
$dir = "/var/www/html/secure/uploads";
// Sort in descending order
$files = scandir($dir, 1);
print_r ($files);
print_r (sizeof($files));
$count = (sizeof($files));
//create array that has the filenames
print_r ($files);
$js_array = json_encode($files);
echo "var javascript_array = ". $files . ";
";
?>
<script type='text/javascript'>
</script>
<head>
<style>
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
.grid {
/* Grid Fallback */
display: flex;
flex-wrap: wrap;
/* Supports Grid */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
}
.module {
/* Demo-Specific Styles */
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 200px;
/* Flex Fallback */
margin-left: 5px;
margin-right: 5px;
flex: 1 1 200px;
}
/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
.module {
margin: 0;
}
}
</style>
</head>
<div class="grid" id="container">
<script>
//encode to JS array from PHP...
var jArray = <?php echo json_encode($files); ?>;
for (var c in jArray) {
var newElement = document.createElement('button');//edited
newElement.id = jArray[c];
newElement.className = "module";
newElement.href = "/secure/uploads/" + newElement.id;
newElement.innerHTML = jArray[c];
//newElement.document.createElement('button');
newElement.onclick = function(){
alert('pointed at '+ newElement.href);
}
document.getElementById('container').appendChild(newElement);
}
</script>
</div>
</body>
</html>
Just at first glance, didn't dig in, but "New" is not a known element...
instead of: document.createElement('New');
try: document.createElement('button');
//encode to JS array from PHP...
const jArray = <?php echo json_encode($files); ?>;
const container = document.getElementById('container');
// map to elements, then append to container
jArray
.map(file => {
var btn = document.createElement('button');
btn.id = file;
btn.className = "module";
btn.dataset.url = `/secure/uploads/${encodeURIComponent(file)}`;
btn.appendChild(document.createTextNode(file));
})
.forEach(btn => container.appendChild(btn));
// one event handler for the container, bubbling propagation
container.addEventListener('click', event => {
const btn = event && event.target;
const url = btn.dataset && ntn.dataset.url;
if (!url) return;
alert(url);
});SOLVED
Thanks Tracker1, I changed,
var jArray = <?php echo json_encode($files); ?>;
to..
const jArray = <?php echo json_encode($files); ?>;
And it worked as I had wanted.