INOH INOH - 23 days ago 6
HTML Question

Create UL Columns To List Files from Selected and Uploaded Files

So I am Uploading Multiple Images To Folder using Php/Html. When user selects multiple Files, They are listed in a single column, the same goes for uploading after Uploading images, i echo out the Filename with being completed or not, and they to are listed in a single column. What i am asking for help with is- How can i create (lets say 3 or more column-example) that list a max 5 or more in each column. So if the user selects 15 images then both the fileslisted and Uploaded will have 3 columns and there will be 5 listed in each. Here Is an example as well as Script. I have included a ideal situation as well. I would also like if the completed uploads be columned like the selected. Please and thanks

Demo Here

Script

<?php
$total = count($_FILES['filesToUpload']['name']);
$succes = [];
$error = [];
for($i=0; $i<$total; $i++) {
$tmpFilePath = $_FILES['filesToUpload']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./upimages/" . $_FILES['filesToUpload']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
$succes[$_FILES['filesToUpload']['name'][$i]] = true;
}else{
$errors[$_FILES['filesToUpload']['name'][$i]] = true;
}
}
}
foreach(array_keys($succes) as $suc){
$myString = $suc." was succesfull,";
$myArray = explode(',', $myString);
foreach($myArray as $my_Array){
echo $my_Array.'<br>';
}
}
foreach(array_keys($errors) as $error){
echo $error." failed to upload";
}
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" accept="image/png, image/jpeg" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
<input type="hidden" name="MAX_FILE_SIZE" value="60000000" />
</div>
<p>
<strong>Files You Selected:</strong>
<ul id="fileList"><li>No Files Selected</li></ul>
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>

<style type="text/css">
.file-input-wrapper {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper > input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper > .btn-file-input {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper:hover > .btn-file-input {
background-color: #aaa;
}

.file-input-wrapper1 {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper1 > input[type="submit"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper1 > .btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover > .btn-file-input1 {
background-color: #ffff00;
}
button {
font-size: 26px;
}
</style>

<script type="text/javascript">
function makeFileList() {
var input = document.getElementById("filesToUpload");
var ul = document.getElementById("fileList");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
var li = document.createElement("li");
li.innerHTML = input.files[i].name;
ul.appendChild(li);
}
if(!ul.hasChildNodes()) {
var li = document.createElement("li");
li.innerHTML = 'No Files Selected';
ul.appendChild(li);
}
}
</script>

Answer

You need three things : a table (<table>), calculate how many columns based on the files selected, and a counter for the columns that are being displayed. Here is your code, just copy-paste and run (the changes are between thick lines ■■■■■■■■■■■■■■■■■■■■■■■■■■■■):

<?php
if ( isset( $_FILES['filesToUpload'] ) )
{
$total = count($_FILES['filesToUpload']['name']);
$succes = [];
$errors = [];
for($i=0; $i<$total; $i++) {
$tmpFilePath = $_FILES['filesToUpload']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./upimages/" . $_FILES['filesToUpload']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
    $succes[$_FILES['filesToUpload']['name'][$i]] = true;
}else{
    $errors[$_FILES['filesToUpload']['name'][$i]] = true;
} 
}
}
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
echo "<table border='1'>";
$columns = ceil( sqrt(count($succes) + count($errors)) ); // HOW MANY COLUMNS.
$counter = 0; // COLUMNS COUNTER.
foreach(array_keys($succes) as $suc){
if ( $counter == 0 ) echo "<tr>";
echo "<td>$suc was succesfull</td>";
$counter++;
if ( $counter == $columns ) // IF ROW WAS FILLED
   $counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
}
foreach(array_keys($errors) as $error){
if ( $counter == 0 ) echo "<tr>";
$counter++;
if ( $counter == $columns ) // IF ROW WAS FILLED
   $counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
echo "<td>$error failed to upload</td>";
}
echo "</table>";
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
} // if ( isset( $_FILES['filesToUpload'] ) )
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" accept="image/png, image/jpeg" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
<input type="hidden" name="MAX_FILE_SIZE" value="60000000" />
</div>
<p>
<strong>Files You Selected:</strong>
<!--■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->
<table id="tableList" border="1">
  <tr><td>No Files Selected</td></tr>
</table>
<!--■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■-->
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>

<style type="text/css">
.file-input-wrapper {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper > input[type="file"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper > .btn-file-input {
 display: inline-block;
 width: 400px;
 height: 125px;
 }
 .file-input-wrapper:hover > .btn-file-input {
 background-color: #aaa;
 }

 .file-input-wrapper1 {
 width: 400px;
 height: 125px;
 overflow: hidden;
 position: relative;
 }
 .file-input-wrapper1 > input[type="submit"] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
.file-input-wrapper1 > .btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover > .btn-file-input1 {
background-color: #ffff00;
}
button {
font-size: 26px;
}
</style>
<script type="text/javascript">
function makeFileList() {
    var input = document.getElementById("filesToUpload");
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    if ( input.files.length > 0 )
       { var tbl = document.getElementById("tableList"); // THE TABLE.
         var columns = Math.ceil( Math.sqrt( input.files.length ) ); // HOW MANY COLUMNS.
         var counter = 0; // COLUMNS COUNTER.
         tbl.innerHTML = ""; // DELETE ALL ROWS.
         for (var i = 0; i < input.files.length; i++) {
             if ( counter == 0 )
                var row = tbl.insertRow( -1 ); // -1 = INSERT ROW AT END OF TABLE.
             var cel = row.insertCell( -1 ); // -1 = INSERT CELL AT END OF ROW.
             cel.innerHTML = input.files[i].name; // DISPLAY FILE IN CELL.
             counter = counter + 1;
             if ( counter == columns ) // IF ROW WAS FILLED
                counter = 0; // INSERT ANOTHER ROW IN NEXT LOOP.
       }
    }
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
}
</script>

Edit : now there's another table for the UPLOADED files, also the original list of files was removed.