Show file name, size and type to upload
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user