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>
