WrenchBoard/WrenchBoradWeb
1
0
Fork 0
Code Issues Pull Requests Releases Activity

AJAX file upload and size limit

Browse Source
This commit is contained in:
Olusesan Ameye
2022-07-31 09:17:04 -04:00
parent 8f9bcaa06a
commit 3954822c89
2 changed files with 152 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/application/views/jobs/uploads/upload_files.php
+85 -6
View File
@@ -57,11 +57,11 @@
<!--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[]" onchange="fileToUploadChanged(this)">
<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' />
<br><input class="dropzone-select btn btn-sm btn-primary me-2" type='button' value='Upload' name='upload' onclick="fileToUploadRun(); return false;" />
</div>
<!--end::Controls-->
<!--begin::Items-->
@@ -119,12 +119,91 @@
<script type="text/javascript">
<!--
const sizeLimit = <?php echo '3145728'; ?>;
function fileToUploadChanged(e) {
var fileToUploadList = document.getElementById('fileToUploadList');
var fileList = $('#fileToUpload').prop("files"); // e.files;
$('#fileToUploadList').html('');
fileToUploadList.innerHTML = '';
e.files.forEach(file => {
//alert(file.name);
fileToUploadList.innerHTML += '<br><b>' + file.name + '</b> - ' + humanFileSize(file.size) + ' (' + file.type + ')';
var i;
for ( i = 0; i < fileList.length; i++) {
if (fileList[i].size > sizeLimit) {
$('#fileToUploadList').append('<br>Size limit exceeded: <span style="color:red;"><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ')</span>');
} else {
$('#fileToUploadList').append('<br><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ') <span class="loading-prep" id="prog'+i+'"></span>');
}
}
}
function fileToUploadRun() {
var fileList = $('#fileToUpload').prop("files");
var i, n = 0;
for ( i = 0; i < fileList.length; i++) {
if (fileList[i].size <= sizeLimit) {
n = i;
}
}
if (n < 1) {
alert('No files for upload!');
return;
}
console.log('Max upload index is ' + n);
for ( i = 0; i <= n; i++) {
if (fileList[i].size <= sizeLimit) {
console.log('Uploading file ' + i + ' of ' + n + ' => ' + fileList[i].name);
uploadajax(n, i);
}
}
}
function uploadajax(ttl,cl) {
var fileList = $('#fileToUpload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');
var form_data = "";
form_data = new FormData();
form_data.append("fileToUpload", fileList[cl]);
form_data.append("jobID",'<?php echo $jobID; ?>');
form_data.append("contractId",'<?php echo $contract_id; ?>');
var request = $.ajax({
url: "/proj/upload",
cache: false,
contentType: false,
processData: false,
async: true,
data: form_data,
type: 'POST',
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', function(event){
var percent = 0;
if (event.lengthComputable) {
percent = Math.ceil(event.loaded / event.total * 100);
}
$('#prog'+cl).text(percent+'%')
}, false);
}
return xhr;
},
success: function (res, status) {
if (status == 'success') {
percent = 0;
$('#prog' + cl).text('');
$('#prog' + cl).text('--Success: ');
if (cl < ttl) {
uploadajax(ttl, cl + 1);
} else {
alert('Done');
$('#fileToUpload').val(null);
$('#fileToUploadList').html('');
}
}
},
fail: function (res) {
alert('Failed');
}
});
}