Show file name, size and type to upload

This commit is contained in:
2022-07-31 02:19:13 -04:00
parent 8e52e36d3f
commit 8f9bcaa06a
@@ -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>