From 8f9bcaa06a781bfa4c2372a24302c9538bb14bea Mon Sep 17 00:00:00 2001
From: Olusesan Ameye <ses66181@gmail.com>
Date: Sun, 31 Jul 2022 02:19:13 -0400
Subject: [PATCH] Show file name, size and type to upload

---
 .../views/jobs/uploads/upload_files.php       | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/www/application/views/jobs/uploads/upload_files.php b/www/application/views/jobs/uploads/upload_files.php
index a0b4d815..bfecff50 100644
--- a/www/application/views/jobs/uploads/upload_files.php
+++ b/www/application/views/jobs/uploads/upload_files.php
@@ -57,9 +57,10 @@
                             <!--begin::Controls-->
                             <div class="dropzone-panel mb-4">
                                 <!-- a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a -->
-                                <input class="dropzone-select btn btn-sm btn-primary me-2" type='file' name='fileToUpload[]' multiple=""  id="fileToUpload[]">
+                                <input class="dropzone-select btn btn-sm btn-primary me-2" type='file' name='fileToUpload[]' multiple=""  id="fileToUpload[]" onchange="fileToUploadChanged(this)">
                                 <!-- a class="dropzone-upload btn btn-sm btn-light-primary me-2">Upload All</a>
                                 <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a -->
+                                <br><div id="fileToUploadList"></div>
                                 <br><input class="dropzone-select btn btn-sm btn-primary me-2" type='submit' value='Upload' name='upload' />
                             </div>
                             <!--end::Controls-->
@@ -116,3 +117,38 @@
 </div>
 <!--end::Modal - Upload File-->
 
+<script type="text/javascript">
+<!--
+function fileToUploadChanged(e) {
+    var fileToUploadList = document.getElementById('fileToUploadList');
+    fileToUploadList.innerHTML = '';
+    e.files.forEach(file => {
+        //alert(file.name);
+        fileToUploadList.innerHTML += '<br><b>' + file.name + '</b> - ' + humanFileSize(file.size) + ' (' + file.type + ')';
+    });
+}
+
+function humanFileSize(bytes, si=false, dp=1) {
+  const thresh = si ? 1000 : 1024;
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + ' B';
+  }
+
+  const units = si 
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let u = -1;
+  const r = 10**dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+  return bytes.toFixed(dp) + ' ' + units[u];
+}
+
+// -->
+</script>
\ No newline at end of file